I want to make a chart that has a background that is different colors based on some condition and time stamp. I then want to overlay some lines on this. Here is a very crude mock up of what the chart should look like:
Is there a good way to do this in perspective? I'm considering a line time series chart on top of an area time series chart, but ideally there would be a better way to do it.
There are a couple of modules that might make this easier, although I have not tried what you are attempting.
Musson Industrial’s Embr-Charts Module - 3rd Party Modules - Inductive Automation Forum
KyvisLabs ApexChart Module - Ignition - Inductive Automation Forum
Yup, both ApexCharts and Chart.js have annotation options that can do this:
Sorry I took a while to respond. Been busy. I was pretty sure this can be done and I'm more sure now. Here's a suggestion of an approach that I think will work with the standard perspective time series chart.
If you're using a time series chart you can do this with a linear gradient on the background of the chart. I couldn't remember if you were trying to put bars vertically or horizontally. I usually see this done horizontally so I made an example of that, but it looks like you want to do it vertically. It's done the same way but finding the spots where it transitions (scaled to pixels) might be tricky on the time axis.
Here's an example gradient using static values to illustrate how it would work. I'd have to test it a bit to see if the bottom is consistently starting around 67px. So basically, I would update this to scale based on a value of the vertical size of the chart minus 67px to get the size of the charting area. I assume the bottom starting point is variable based on the chart options you're using so I would make a custom property that calculates the bottom offset based on the options you have selected (expression structure binding on a custom property).
Then you just scale the value based on the scale of the chart against the height of the charting area to turn it into px. The actual gradient binding would be an expression binding against the backgroundImage style.
linear-gradient(0deg, transparent, transparent 150px, #00FFFF55 150px, #00FFFF55 250px, transparent 250px, transparent)
I'm just trying to show you an approach; not a fully fleshed out example.
Notice my gradient has 2 stops for each line of demarcation. That's because I want it to show a solid color for each stop so I make the start and stop the same color and transition to transparent at the same place the bar stopped. You could draw lots of bars this way if you want to. You could make a plaid chart if you wanted to 
One thing I'm noticing is that you see the gradient under the time axis if you just apply the time axis gradient. You can fix this by adding a second gradient that is your background color for the spot under the time axis and then goes to transparent.
Here's an example on the time axis. I used this gradient.
'linear-gradient(0deg, #FFFFFF 0px, #FFFFFF 67px, transparent 67px, transparent), ' +
'linear-gradient(90deg, transparent, transparent 70px, #00FFFF55 70px, #00FFFF55 250px, #FF00FF55 250px, #FF00FF55) '
This is a static example. An idea of an approach to do what I think you want to do. You'd have to do a bunch of stuff to translate time to px but I think it's doable.
Edit:
I forgot to mention this code is in an expression binding on the backgroundImage property on the chart. I would do this in an expression binding because you'd ultimately be plugging values into it and calculating your gradient.
1 Like
I ended up doing this with apex charts and their annotations:
Just set the x and x2 (in milliseconds) and add as many annotations as necessary.