Home
Analytics
Line chart: define value-specific colors for lines and markers
mogwai
<p>I would like to assign fixed line and marker colors to the countries in the attached report, regardless of which countries appear in the query result, so for example:</p>
<p>Australia: (255,0,0)</p>
<p>Belgium: (0,255,0)</p>
<p>France: ((0,0,255)</p>
<p>Any other country: (0,0,0)</p>
<p> </p>
<p>The complexity I am struggling with is that the graph has 2 series and Y-series grouping (by country) in each series. I don't find the correct code to consistently change the line and marker color in both series.</p>
Find more posts tagged with
Comments
pricher
<p>Hi,</p>
<p> </p>
<p>You will need to apply scripting in the <span style="font-family:'courier new', courier, monospace;">beforeGeneration </span>to change the line color, in the <span style="font-family:'courier new', courier, monospace;">beforeDrawDataPoint </span>to change the marker color, and in the <span style="font-family:'courier new', courier, monospace;">beforeDrawLegendItem </span>to change the legend items.</p>
<pre class="_prettyXprint _lang-">
importPackage( Packages.org.eclipse.birt.chart.model.impl );
importPackage( Packages.org.eclipse.birt.chart.model.type.impl );
importPackage( Packages.org.eclipse.birt.chart.model.attribute );
importPackage( Packages.org.eclipse.birt.chart.model.attribute.impl );
function beforeDrawLegendItem( lerh, bounds, icsc )
{
var seriesValue = lerh.getLabel().getCaption().getValue();
var fill = lerh.getFill();
if( seriesValue == "Australia" )
fill.set( 255, 0, 0 );
else if(seriesValue == "Belgium")
fill.set( 0, 255, 0);
else if(seriesValue == "France")
fill.set( 0, 0, 255);
}
function beforeDrawDataPoint( dph, fill, icsc )
{
if( dph.getSeriesDisplayValue() == 'Australia' ){
fill.set( 255, 0, 0, 255 );
}
else if( dph.getSeriesDisplayValue() == 'Belgium' ){
fill.set( 0, 255, 0, 255 );
}
else if( dph.getSeriesDisplayValue() == 'France' ){
fill.set( 0, 0, 255, 255 );
}
}
function beforeGeneration( chart, icsc )
{
var xAxis = chart.getAxes().get(0);
var yAxis = xAxis.getAssociatedAxes().get(0);
var nbOfSeries = yAxis.getSeriesDefinitions().size()
for (j = 0; j < nbOfSeries; j++) {
var ySeries = yAxis.getSeriesDefinitions().get(j).getRunTimeSeries();
var nbOfRunSeries = ySeries.size();
//loop thru all of the series
for (var i = 0; i < nbOfRunSeries; i++) {
if ( ySeries.get(i).getSeriesIdentifier() == 'Australia' ) {
ySeries.get(i).setPaletteLineColor(false);
ySeries.get(i).getLineAttributes().setColor( ColorDefinitionImpl.create( 255, 0, 0 ) );
}
else if ( ySeries.get(i).getSeriesIdentifier() == 'Belgium' ) {
ySeries.get(i).setPaletteLineColor(false);
ySeries.get(i).getLineAttributes().setColor( ColorDefinitionImpl.create( 0, 255, 0 ) );
}
else if ( ySeries.get(i).getSeriesIdentifier() == 'France' ) {
ySeries.get(i).setPaletteLineColor(false);
ySeries.get(i).getLineAttributes().setColor( ColorDefinitionImpl.create( 0, 0, 255 ) );
}
}
}
}
</pre>
<p>This example is loosely based on this <a data-ipb='nomediaparse' href='
http://developer.actuate.com/community/forum/index.php?/topic/24938-changing-a-series-color-in-a-line-chart-with-script/'>post</a>.</p>
;
<p> </p>
<p>Hope this helps,</p>
<p> </p>
<p>P.</p>
mogwai
<p>Thank you Pierre. It works perfectly. Cycling through the series was my biggest challenge.</p>