Discussions
Categories
Groups
Community Home
Categories
INTERNAL ENABLEMENT
POPULAR
PUBLIC CLOUD
PRIVATE CLOUD
Quick Links
MY LINKS
HELPFUL TIPS
Back to website
Home
Intelligence (Analytics)
How to dynamicaly change the fill color of an AREA chart
roland v
Hello, <br />
I'm searching for a clue for 24 hours now.. <br />
I need to change the color of an area in a 4 series area chart, depending on the name of the serie. <br />
<br />
I already know how to : <br />
- use the <strong class='bbc'>beforeDrawDataPoint</strong>( dph, fill, icsc ) to change pie chart / Bar chart color depending on the serie name<br />
beforeDrawDataPoint( dph, fill, icsc )<br />
{<br />
var sValue = dph.getBaseDisplayValue(); // or getSerieDisplayValue();<br />
if (sValue == "Comptoir"){<br />
fill.getStartColor().set(254,254,0);<br />
fill.getEndColor().set(255,255,128);<br />
}<br />
<br />
- use the <strong class='bbc'>beforeDrawLegendItem</strong>( lerh, bounds, icsc ) to change the legend color..;<br />
{<br />
var label = lerh.getLabel();<br />
var sValue = label.getCaption().getValue();<br />
if (sValue == "Comptoir"){<br />
lerh.getFill().getStartColor().set(254,254,0);<br />
lerh.getFill().getEndColor().set(255,255,128);<br />
}<br />
etc...<br />
<br />
but why on earth does it not work with area charts ? How can I do that ? <br />
I found how to get the serie name.. int<br />
function <strong class='bbc'>beforeDrawSeries</strong>( series, isr, icsc )<br />
{<br />
var myName = series.getSeriesIdentifier();<br />
<br />
But I'm totally stuck there. <br />
<br />
Do someone have a solution ?<br />
(please take into consideration that I need to get some specific colors for specific series, as my clients might not get all series at the same time. Sometimes no serie 1, some other : no serie 2.. But everytime a serie 1 pops out, I need it to be in red. )<br />
<br />
Any help would be highly appreciated (even if it is a redirection to a book that holds the solution.)<br />
<br />
regards, <br />
Roland
Find more posts tagged with
Comments
kclark
Hi roland! Take a look at the rptdesign I've attached. The color change is done by this script.<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>
highlightSeries = new Array();
s = 0;
function afterDataSetFilled( series, dataSet, icsc )
{
if(series.getSeriesIdentifier() != ""){
temp = dataSet.getValues();
for(i=0;i<temp.length;i++){
if(temp[i] > 830000){ // change to 800000 to see more than one series change
highlightSeries[highlightSeries.length] = s;
}
}
s++;
}
}
function beforeGeneration( chart, icsc )
{
sd = chart.getAxes()[0].getAssociatedAxes()[0].getSeriesDefinitions( ).get( 0 );
palette = sd.getSeriesPalette( ).getEntries( );
for(i=0;i<highlightSeries.length;i++){
palette[highlightSeries[i]].set(255,0,0);
}
}
</pre>
<br />
In afterDataSetFilled() the script loops through each series for anything with a value of x. In this case 830,000. When they are found the index is stored in the array highlightSeries. Later in beforeGeneration() is where the color is of the series in the array is changed with palette[highlightSeries
].set(255,0,0);