I would like to show data in a Heatmap chart where xAxis represents time. I would also like to keep adding data in the x direction. I have been told that Heatmap does not support resizing of it’s DataSeries, so I decided to have a Heatmap of fixed size and to resample my data to the Heatmap’s size.
I have managed to resample my data and using a custom LabelProvider for the xAxis I have also managed to show the values on xAxis as dates. I got stuck at trying to animate the chart upon adding new data to the chart. The animation does not work correctly because the xAxis is always the same size since I resample the data and have a fixed size Heatmap.
My question is, how would I achieve what I desire with the available tools. Basically on every update of the zValues of DataSeries I would like to animate the ticks of the xAxis so that it would appear as though the dataSeries got points appended in the x direction.
An example of what I am trying to do.
The amount of data needed to be drawn is too big for SciChart Heatmap implementation so I decided to have a fixed size Heatmap. Lets say a Heatmap with width 100 and height 50. X axis represents time of the measurement. I have an ongoing measurement that produces data. On every measurement update I update the Heatmap. I resize the measurement data to make it 100 points in width and then update Z values on the DataSeries. This effectively appends data in the X direction.
What I would like is to animate the X axis to show that the data is being appended from the right. However, animating X axis’ visible range is not an option, since the Heatmap’s width is always 100. Which only leaves the tick marks themselves that could be animated to reflect what the chart is showing. That is data being appended from the right.
Hope this makes it clearer what I am trying to do 🙂
Thank you for all the help!
- MIha Rozina asked 4 years ago
- last edited 4 years ago
- You must login to post comments
Hi Miha,
Thanks for your question.
I’m not sure that I 100% understood your requirements but I think you can do this in several ways:
– Move heatmap when you need to scroll xAxis by changing it’s StartX value:
dataSeries.setStartX(newStartOnXAxis);
- Create two xAxes ( like in this example ): first one (which is used to draw heatmap) should be invisible ( so there will be no ticks, labels etc for this axis ) and use second xAxis to draw axis labels. Then set VisibleRange for this second axis when it’s required.
Is this suitable for your needs?
Hope this will help you!
Best regards,
Yura
- Yura Khariton answered 4 years ago
Moving the dataSeries is not an option since all the data need to be shown. Having two axes sounds interesting, but I don’t think I fully understand. How would the visible axis be controlled? I will update my question with an example of my case and it will hopefully make it clearer what I am trying to achieve.- Have you read the updated question?
Yes, I’ve read updated question. Visible xAxis would be controlled by updating its VisibleRange value. When you “append” new values into heatmap you change VisibleRange in a such way that left and right edges of heatmap will be aligned with desired ticks on visible xAxis. Regarding approach with StartX – yes, it won’t work in your case. However I think you can use StepX property to stretch heatmap in a such way that it will be drawn in (startX, startX + heatmap_width * stepX) range. So when you “append” new values you adjust StepX to draw heatmap till desired label on xAxis
- You must login to post comments
Please login first to submit.
