Customize Pie Chart

Hi,

I try to customize the Pie chart to get a specific render :

Actually, i can’t remove the line between each section of data and i can’t add space between each section like this example.

Is there a way to do that, i search a little on the JFreeChart library with no success (except removing the shadow and the outline border).

Thanks!

Can you make the line fat and white?

1 Like

Changing the line is definitely the easiest way to do this. I put this on mousePressed to make it easier to test, but it should work from most places:

from java.awt import BasicStroke, Color
chart = event.source.getChart()
plot = chart.getPlot()

plot.setSeparatorStroke(BasicStroke(10))
plot.setSeparatorPaint(Color(255, 255, 255))
plot.setShadowPaint(None)
plot.setOutlineVisible(False)
2 Likes

That’s exactly what i want to do!

I have two last question about the pie chart.
Firstly, where should i run this script? I would like to do it at runtime when the component is loading, how can i manage to run the script at this point?
Secondly, can you change by script the section colors property of the pie chart?

Thanks.

The easiest way, since the Pie Chart component doesn’t offer a configureChart script, would be to use the propertyChange event handler. Like this:

if event.propertyName == "componentRunning":
	from java.awt import BasicStroke, Color
	chart = event.source.getChart()
	plot = chart.getPlot()
	
	plot.setSeparatorStroke(BasicStroke(10))
	plot.setSeparatorPaint(Color(255, 255, 255))
	plot.setShadowPaint(None)
	plot.setOutlineVisible(False)

And the color of a particular section can be set like this:
plot.setSectionPaint("Apples", Color(0, 0, 0))

1 Like

Ok, that did the work, thanks again.

@PGriffith, when is the “componentRunning” property supposed to change? I haven’t seen this script being triggered so far (at least not in the designer).

Also, when you update the values of the chart, it seems like the style of the separators and shadow gets reset, and I don’t know where to catch this fast enough to not have flickering. Even a generic propertyChange script without extra checks is too slow to hide the flickering.

componentRunning only reliably fires in a full client - one of the quirks of the designer is that many propertyChange events don’t fire.
The only other alternative to this approach would be manually creating the JFreeChart Ring Plot on a standard Chart component - but that involves much more complex scripting.

1 Like

Is there any logical reason why the pie chart component resets to its original form when the “data” property is updated?

Because changing the data re-initializes the chart, which wipes out the configuration changes made by the script.
You can easily catch this with an additional case on the propertyChange event:
if event.propertyName == "componentRunning" or event.propertyName == "data":
or, to be marginally more efficient:
if event.propertyName in ["componentRunning", "data"]:

Thanks, but catching the “data” event makes the component blink everytime data is changing.

No help for it. This is why the configureChart() method was created for most chart components. If you can't stand it until IA upgrades this component, you would have to create a java module that subclasses this one and implement your own configureChart() equivalent.

Ok, guess I’ll just have to wait then :slight_smile: IA will probably have this finished before I’m halfway there…hehe
But would be nice with a circular progressbar component though.

Where do I find resources on the java.awt library and how you guys came to this point? I am trying to do something similar where I change the color of the largest count section to red, I cannot find the steps or information regarding this besides the errors in the console saying it cannot convert to type java.awt…

The version of Python that Ignition uses is called Jython and is based off of Java. So, many java libraries like java.awt are usable through Python. It can get kind of hairy to look through the documentation if you aren’t familiar with Java & how it works though.

1 Like

PGriffith,
I used this code successfully in my ignitions apps but recently we updates to version 8 and it no longer removes the white box and Ring shadow. Did something change in ignition 8 where this wouldn’t work?

#Removes Border from Pie Chart and Creates the Ring.

if event.propertyName == “componentRunning”:
from java.awt import BasicStroke, Color
chart = event.source.getChart()
plot = chart.getPlot()
plot.setShadowPaint(None)
plot.setOutlineVisible(False)

That’s because the Pie Chart component now has a configureChart script extension unlike pre-Ignition 8. I had a script to parameterize the series colours in the propertyChange script and based on what I had to change I think your script will work with the following now in configureChart:

from java.awt import BasicStroke, Color
plot = chart.getPlot()
plot.setShadowPaint(None)
plot.setOutlineVisible(False)

The main difference is that chart is already defined as a parameter of the configureChart function. Hope this works out for you.

1 Like

Actually, as of 8.0.16, where the pie chart got a configureChart implementation, there’s also a direct boolean property on the chart - you can just toggle outlineVisible to false.