Heatmap Animation

[Audacity]

I have a time series data set where a forecast is represented as a heatmap. The current data we have "now" influences what we're forecasting in the future (i.e. the data casts a kind of a "shadow" into the future in a predictive sense), but as time advances and we get new data that can override earlier forecasts.

I have a heatmap series, but I essentially want to animate it. Let's say I have two weeks of time series data, I'd like to incrementally add the data as it was observed (a day at a time, or an hour at a time) and show how that impacts the forecast. So you'd see a line that "wipes" left-to-right across the heatmap, and as the line progresses, the data to the right of the line changes slightly (or substantially) every frame.

I'm not sure what the best way to approach this in Highcharts/Highstock, but I was thinking that if Highcharts could have a HTML canvas heatmap that exists (but is "empty"), and then I can hook onto that HTML canvas myself to do the drawing/animation, then I'd have the freedom necessary to do whatever I need to the canvas element itself.

So, I'm looking for pointers from the experts.

[dominik.c]

Hello Audacity!

We appreciate you reaching out to us!

Unfortunately, I'm not sure how your chart should look like. Could you provide me some more information about your project? A mockup or some sketches would be very helpful. I'm not sure if heatmap is the correct type of chart to do something that you want. On heatmap, we've got little rectangles, not lines.

So to sum up, could you send me more information about that? I would appreciate it a lot.

Best regards!

[Audacity]

The path we took yesterday was to put a canvas element in front of the Highcharts control (covering up the real chart). And then we're just drawing the animation ourselves on the canvas control. Once we're done, we remove the canvas control.

The thing that was problematic for us was that Highcharts was using a PNG to display the heatmap, and that's something that's not easy to animate. But heatmaps are easy to draw, so we just drew it ourselves.

What we're trying to achieve is to show how a particular algorithm works; how new data samples impact the heatmap, and the "shadow" that is cast into the future. I was hoping that something more tightly integrated into Highcharts could be done.

I just made a quick video showing what it looks like so far. It's still unfinished, but it gives you an idea of where we're going with it.

https://www.screencast.com/t/oM7taJ6SujX

If I were to add something to a feature wishlist, it would be that we could have direct access to the heatmap series such that when the chart extremes are set that we provide a event handler and we just draw the heatmap ourselves.

[dominik.c]

Hi again!

Thanks for the explanation and the video.

Doing the whole animation in Highcharts would be an extremely demanding operation. I doubt if it worked well, because of performance issues such as updating a lot of points with a large amount of data in a very short period of time.

Regarding the last part of your post, you can use the setExtremes event to get to the heatmap series and do with the chart whatever you need. API reference: https://api.highcharts.com/class-refere ... etExtremes

Best regards!