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; } } }

Dynamically setting border colors on Chart

jeffwebb

I have a requirement to set a colored frame around a chart under certain conditions. I did this with a table by using getStyle.borderRightColor = ... but this doesn't seem to be an option with ChartWithAxesImpl.

How can I dynamically set the border of the Chart?

Find more posts tagged with

Comments

mwilliams

What kind of condition tells you? A parameter?

jeffwebb

The condition is computed in a script. A target is calculated then if the target is not met, the bar is set to red and the frame must be set to the color of the current condition.

function beforeDrawDataPoint(dph, fill, icsc)
{
var currentval = dph.getOrthogonalValue();
var index = dph.getIndex();
var target = icsc.getExternalContext().getScriptable().getPersistentGlobalVariable("target" + index);

if( fill.getClass().isAssignableFrom(ColorDefinitionImpl)){
if (target > currentval){
fill.set(255, 0, 0);
}
}
}

mwilliams

So, you just have a single bar in the chart that contains the current value? Or multiple bars, but the most recent value in the chart determines the border color? Let me know. I'll do some testing.

mwilliams

Either way, here's how you can set the border of a chart:

function beforeGeneration( chart, icsc )
{
importPackage (Packages.org.eclipse.birt.chart.model.attribute.impl);
importPackage (Packages.org.eclipse.birt.chart.model.attribute);
cd = ColorDefinitionImpl.create(255, 0, 0);
chart.getBlock().getOutline().setColor(cd);
chart.getBlock().getOutline().setStyle(LineStyle.SOLID_LITERAL);
chart.getBlock().getOutline().setThickness(3);
chart.getBlock().getOutline().setVisible(true);
}

So, you'll need to find the value in the afterDataSetFilled or outside the chart and pass it in with a persistent global variable.

jeffwebb

That worked. I have added a sloped target line to a bar graph. Based on if the bar value meets the target range I calculate an alert level.

function beforeGeneration( chart, icsc )
{
var level = icsc.getExternalContext().getScriptable().getPersistentGlobalVariable("current_alert_level");

if(level == 0) { //green
cd = ColorDefinitionImpl.create(0, 255, 0);
}
if(level == 1) { //yellow
cd = ColorDefinitionImpl.create(255, 255, 25);
}
if(level == 2) { //orange
cd = ColorDefinitionImpl.create(255, 200, 125);
}
if(level == 3) { //red
cd = ColorDefinitionImpl.create(255, 0, 0);
}

chart.getBlock().getOutline().setColor(cd);
chart.getBlock().getOutline().setStyle(LineStyle.SOLID_LITERAL);
chart.getBlock().getOutline().setThickness(CHART_BORDER_THICKNESS);
chart.getBlock().getOutline().setVisible(true);

}

mwilliams

Awesome. Let us know whenever you have questions!