Birt Charts - How to change the color/opacity of categories in a bar chart
andrew.karkut
Member
<p>Hi,</p>
<p> </p>
<p>I'm a relative newbie to the World of BIRT. I've just plotted my first BIRT bar chart. The x-axis category represents the year and the y-axis, whatever. My problem is that I'd like to plot the bars in future years as 50% opacity, compared to the past years, which would appear as 100% opacity.</p>
<p> </p>
<p>It appears to be a simple problem but I've read the manual, googled and dug around for a scripted solution to no avail.</p>
<p> </p>
<p>Can anyone point me in the direction of a solution? I've attached a jpg of the graph I want to reproduce.</p>
<p> </p>
<p>Many thanks,</p>
<p> </p>
<p>Andy</p>
<p> </p>
<p> </p>
<p> </p>
<p>I'm a relative newbie to the World of BIRT. I've just plotted my first BIRT bar chart. The x-axis category represents the year and the y-axis, whatever. My problem is that I'd like to plot the bars in future years as 50% opacity, compared to the past years, which would appear as 100% opacity.</p>
<p> </p>
<p>It appears to be a simple problem but I've read the manual, googled and dug around for a scripted solution to no avail.</p>
<p> </p>
<p>Can anyone point me in the direction of a solution? I've attached a jpg of the graph I want to reproduce.</p>
<p> </p>
<p>Many thanks,</p>
<p> </p>
<p>Andy</p>
<p> </p>
<p> </p>
0
Comments
-
<p>Which version of BIRT are you using?</p>
<p> </p>
<p>In the beforeDrawDataPoint of the onRender of the chart, the opacity can be modified by setting the fill.</p>
<p> </p>
<p>For Example, if I wanted to only change the color/opacity for the bar whose x-axis value is "USA", I used the following code:</p>
<pre class="_prettyXprint _lang-js">
function beforeDrawDataPoint( dph, fill, icsc )
{
if(dph.getBaseDisplayValue() == "USA"){
fill.set(250, 178, 23, 50);
}
}
</pre>
<p>I've attached a sample report design for reference. The last value of setting the fill specifies the opacity.</p>Warning No formatter is installed for the format ipb0 -
<p>Try something like this in your chart script:</p>
<pre class="_prettyXprint _linenums:0">
function beforeDrawDataPoint( dph, fill, icsc )
{
today = new Date();
barYear = dph.getBaseValue().getYear();
todayYear = today.getYear() + 1900;
if(barYear >= todayYear){
fill.setTransparency(50);
}
}
</pre>
<p>If you're not using a date as your x-axis field and just the integer year, you'll have to change that just slightly. Also, note the addition of 1900 to the getYear() on a new Date(), but that it's not used on the birt date time value. Not sure why this is, but it is. Let me know.</p>
<p> </p>
<p><strong>Update Note: Didn't see Jesse's post before I posted. If you're setting custom colors, just do a year check around what Jesse put and that will work great. If you're using the standard (or modified in the chart editor palette) you will only need to change the transparency of the bars that meet your check, like in my post.</strong></p>
Warning No formatter is installed for the format ipb0 -
<p>Hi,</p>
<p> </p>
<p>That works a treat! </p>
<p> </p>
<p>Another, related question. How do I reduce the opacity of the lines in the diagram (as opposed to the bars)?</p>
<p> </p>
<p>Cheers,</p>
<p> </p>
<p>Andy</p>
0
Categories
- All Categories
- 123 Developer Announcements
- 54 Articles
- 151 General Questions
- 148 Thrust Services
- 57 Developer Hackathon
- 37 Thrust Studio
- 20.6K Analytics
- 4.2K AppWorks
- 9K Extended ECM
- 918 Core Messaging
- 84 Digital Asset Management
- 9.4K Documentum
- 32 eDOCS
- 186 Exstream
- 39.8K TeamSite
- 1.7K Web Experience Management
- 8 XM Fax
- Follow Categories