nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change Line Color depending on plot value

rgleason

I am trying to change the color of a line based on the rendered position relative to zero. 
 
Any point above zero I would like the first color of the series palllet and second color for all values below zero.
 
Any idea or example on how this can be done? 
 
 
 
Thanks, 
 
RG

Find more posts tagged with

Comments

mwilliams

You should be able to do this in the beforeDrawDataPoint script by checking the value of the data point and then setting the fill color. What is your BIRT version? I can create a simple example for you.

rgleason

I'm using 4.2.3 
 
thanks

mwilliams

So, BDPro, then. Are you using HTML5 charts or one of the standard image formats?

rgleason

HTML 5

mwilliams

Ah. That'll change things a bit. Let me see if I can figure something out for you on this.

mwilliams

So far, it appears that the line color and marker fill/line color with the HTML5 Highcharts can only be changed for the entire series. If I find anything different, I'll let you know.

rgleason

Mike, I know we have a visibility / hide method, I was planning to incorporate two identical plots and overlay them. By selecting to hide the positive side of one plot and the negative side of the other, the effect would be to show green line above zero and red line below zero. 
 
Thoughts? 
 
RG

mwilliams

I've looked at that, too, but it seems that with the line chart, everything with visibility and color is done on the series level. If you find out differently, I'd love to hear about it. I'll keep digging for a bit to see if I can find something.

rgleason

Okay, but I'm not married to "HTML5" if it makes it easier.

mwilliams

It's definitely easier without HTML5. I do see that it's possible to change the color of the individual markers with HTML5, but it doesn't work through BIRT. If you can access the HTML5 chart with client side script, you can update the data points with values like:
 
{y: 4, color: '#00ff00'} to change individual marker colors. I've done this in jsFiddle, but not with a chart through BIRT, yet.
 
I'll get you an example of non-HTML5 charts with markers colored based on the value, soon.

mwilliams

Sorry for the delay. On a standard chart, this script would change the marker color of the line based on the value:
 
<pre class="_prettyXprint _linenums:0">function beforeDrawDataPoint( dph, fill, icsc )
{
if(dph.getOrthogonalValue() < 0){
fill.set(255,0,0);
}
else{
fill.set(0,255,0);
}
}
</pre>

rgleason

Thanks Mike, 
 
Looked simple enough, however I am not getting the change of color. Do I need to do anything with the dph.getOrthogonalValue()? 
 
It seems like the override is not evaluating the if statement. 
 
Thanks again, 
 
Ralph

mwilliams

Do you have markers on your chart? With BDPro, the default is just the line. I had to turn markers on and set the width of the marker border to the thinnest possible setting. Here is my example.

rgleason

Yes, I have been able to change both, the legend color and the marker color, however I cannot find a way to change the color of the line itself. 
 
Can we change the line color? Or at the very least, index our way through the series palette? This way if the number is <0 we use seriesIndex[1] else seriesIndex[0]. Where index [1] is RED, and index [0] is green? 
 
Thanks, 
 
RG

mwilliams

Sorry for the delay. Unfortunately, I think the line color is going to be just one color as it's set for the series. If you were to piece together multiple series, you could probably make it work, but it might be messy.