Vision Chart Deviation Render/Envelope Curve Monitoring

[ajith.josephs]

Does anyone have experience creating charts like this in Vision?

The chart aims to visualize an envelope around a curve based on a moving average (the color filled bands around the trend is established by looking at the average of the respective data points over the last 10 trends).

Since the Vision Chart component doesn't seem to have a native way to do this, I looked at the jChart API documentation and it seems it may be possible by creating a a custom charting component.

DeviationRenderer (JFreeChart 1.5.4 API)

Does anyone have experience with creating custom charts in Vision? I have no experience with this and no real idea how to start. Would greatly benefit from some advice on how to get started (even a sample/guide of another example to understand how custom charts can be created in vision).

Any recommendations on native vision chart component, data structure in database storage to best service this application, custom chart component creation or alternative methods to achieve a similar result or visual representation of what this type of chart shows would be greatly appreciated!

[pturmel]

You can probably do this without a custom component by writing an appropriate .configureChart() method implementation on Ignition's native Chart component (in XY mode). You would need to reprocess the time scales of your datasets to have a common starting x-value.

That DeviationRenderer class is present in the JFreeChart jar that is distributed with Ignition.

Some topics to study for ideas:

https://forum.inductiveautomation.com/search?q=jfreechart%20renderer%20configureChart%20order%3Alatest

[pturmel]

Even better:

Help using DeviationRenderer @ Chart

Hello guys, newbie reporting in after a lot of stalking and learning here in the forums, so thanks in advance for everyone willing to help The goal here is the following: I have a normal chart with 2 y axis where I plot two types of process information (temperature and rotation) from both a setpoint and actual (live) information, comparing the lines ‘in the same canvas’. I’d like to add a “tolerance” for the setpoints - and I could do it adding new datasets (which I think it’s no…

[ajith.josephs]

Hi @pturmel,

Thanks for the feedback. This was super helpful. I dug through some documentation/forum posts and tried some stuff on my end with some success. Even though some of the functionality can be applied, I cant seem to get it to work for exactly what I need which is multiple filled regions.

See below for some more details around what I tried. Any feedback on how to isolate specific lines and fill between multiple lines is essentially what I am looking for.

Trial 1:

From the information and example codes, I was able to manipulate and shade:
• between the two blue lines only
• When changing the code and adding more strokes, ignition does not shade between a new set of lines.

• It identifies the strokes and can make the lines thicker and thinner as needed.
• All data is one dataset that we are grabbing for this sample graph.

Here’s the manipulation of the code:

• I also tried to assign different strokes to a different renderer, which did not make any changes.
• It appears that ignition only picks on the first pairing of lines to shade.

Trial 2:
Another attempt was made by separating the data for green lines and blue lines on different named queries and using the same code, the same issue occurs again.