Any help or insight on how this might have been done?

Am in the process of slowly slowly slowly trying to take over ignition development for a company where in their previous dev just left out of the blue. They are asking for something similar to (same as preferably) the chart shown in image below:


This little graph was made using just a time series chart, and so trying to recreate it using something like the similar but non identical "rectangle chart" off ignition exchange, and so those differences coupled with general low understanding has made it difficult to recreate.
This whole thing has been such a hassle I have abandoned it for other projects for months now and it is beginning to catch up to me haha.
Basically I just want to re create the above chart with different data, but attempts to do so usually look like this:

Which is very much so less than ideal, any help or insight or places to start looking would be helpful, and my apologies in advance towards the fact that I have essentially asked this question before already.

1 Like

Is the goal of the chart in the first screenshot to show the state of a binary value over time? Or what is the goal for your chart?
Also, are you using Vision or Perspective?

I ask because I have seen some interesting threads/examples depending on use case. Assuming you're hoping to show states of values over time, I was just going to look for similar threads. My gold standard for how to display this data is SEL's SynchroWave software (viewing data from event files in electrical relays) which creates charts like this.

Goal/ function of the chart in the first screenshot (the one which I seek to emulate) is to show whether the speed of a lines operation (measured in pounds per minute) is Above (green) or Below (red) the setpoint (Usually about 50 lbs)
And I want the chart on bottom to be doing a similar thing, showing green when the value is above the setpoint and red when it is below that setpoint.

This is all in Ignition Perspective.

What component(s) are you using or have you tried so far?

Original chart is a Time Series Chart that has somehow been made to look like that, my unsuccessful recreation is also a time series chart. I have also tried to recreate it using the "Rectangle Chart" off ignition exchange which works using a bunch of embedded views.

Really simple - if it will work for you.

Label strip chart

That's just a Label component with the following addition:

props.style.backgroundImage : linear-gradient(
  to right, 
  green,
  green 20%,
  red 20%,
  red 50%,
  green 50%,
  green 80%,
  red 80%,
  red 85%,
  green 85%,
  green
)

The gradient should be easy enough to generate with a binding followed by script transform.

Snazzy version with border, cross-fade and boxShadow:

Label strip chart with shadow

PROPS.style
{
  "classes": "",
  "borderStyle": "solid",
  "backgroundImage": "linear-gradient(\n  to right, \n  green,\n  green 19%,\n  red 21%,\n  red 49%,\n  green 51%,\n  green 79%,\n  red 81%,\n  red 84%,\n  green 86%,\n  green\n)",
  "borderWidth": 1,
  "borderColor": "#16269F",
  "boxShadow": "0 4px 8px 0 #00000055, \n0 6px 20px 0 #00000077"
}
3 Likes

So I would just set those percentages to be the live value of the chart? Or would this no longer be live updating then?

You'll have to do some datetime calculations with that method.
First, calculate the interval between the start time and end time of your chart bounds.
Then, calculate the percentage of each start and endpoint relative to the interval.
Then, you can format the CSS with percentages such as @Transistor displayed above.

1 Like

So I would just set those percentages to be the live value of the chart?

You would create a binding on the raw data. That way the chart will update automatically. As @msteele said, you'll have to do a bit of grunt work to convert the timestamps to integer values for the calculations. system.date.toMillis | Ignition User Manual is your friend here.

This topic is a couple weeks old now my apologies, but despite my best efforts I cannot seem to get this to work. I suspect I may be simply going about it all the wrong way, but after converting the date range (which I essentially just have as "todays date starting at 6am and ending at 6pm) I think I'm going full idiot on how to bind data to actually do this next? I would essentially want it to update something like every minute, but in order to do that wouldn't I then also need to be taking the average of the tag over the last minute? And not sure how to get it to actually work with the chart argh.

Like, not trying to conscript you to my job lol but, if I have a single tag, that live updates with the current "pounds per hour" and want to

  • Average that value out across the last 5 minutes.
  • Compare that value to a setpoint (Pre calculated and held as a custom value on the page's root).
  • If the value is above the setpoint, color that "5 minute" zone of the entire chart as green, and as red if it is below, then I suppose if it is not yet to that bracket of the day it would show black.
  • Preferably it would also be able to "scroll" so only show the last 1-2 hours worth of red or green on the chart.

I'm busy running sound and light for a ballet production and the theatre has just upgraded the lighting from incandescent to LEDs with full colour, pan, tilt and zoom so I have a lot to learn and some fun ahead. I won't have time to help you with this problem.

I would just quickly point out that this sort of data presentation is much, much simpler if the data is stored in the format you need so that you don't need all sorts of interpolation and silly stuff to get reports out.

Why not just show a rate trend? It's more intuitive.

The company wants it this way so it is line with previous views for other lines. I just wish I was experienced enough to understand how to do it haha

Well first off, you never answered if this is vision or perspective. The solution provided by transistor is for perspective.

If it's Vision I might give it a crack

Oh sorry I thought I mentioned it as a footnote previously, this is all in Perspective

Yep, I missed the tag in the title.

Anywho, this is what I'd do in vision. I think it would be pretty easy to move over to perspective:

1.Make an expression tag that evaluates if the setpoint is met or not. (Your exact implementation of this will depend on if your setpoint and current value are part of a UDT or not. If so, just add the tag to the UDT. If not, I'd probably make a tracker UDT with 2 reference tags and this one expression tag.)

{[.]Flow} >= {[.]Setpoint}

2.Turn on history for this tag.
3.Create a realtime easychart, remove all the extra stuff, and set the Y axis to 0-1. Add this expression tag to the chart and set the style to digital area. Set up time bindings as needed.

I'd make it a template with a path to the UDT and start time parameters for easy reuse.

In perspective, I think you should be able to use an area time series chart with a tag history binding to that expression tag.

1 Like

Maybe there's a way you can fill the area under a sparkline?

Displaying with with the gradient transistor showed should be quite easy.
But it seems OP is already having troubles representing his history data.

@D_Mitri_Tompkins could you give us a (small) dataset with data from the tag history.
Do they want to see one shift so that the bar gradual fills up to 100% at the end?
Or do they want to see the current value at the right, and the history (-one day) to the left?

It's definitely not super difficult with the gradient, but it's more straightforward with the historical BOOL tag. I understood OP's desire to be current time at the right and history to the left. Even if that was misunderstood, it would be easy enough to adjust that using a tag history binding and bindings to a time series' properties.

They want currentmost ("Now") on the right, and the rest of the day up to that point on the left, so it essentially "fills up" from 6:30 am to 4:30 pm.

Gosh I am so Embarrassingly sorry to ask but, would a screenshot of the tag I'm viewing's value be what you're looking for? or something else, again apologies for incompetence lol.