Data Decimation in ChartJS

[iwuser]

The provided example is very simplistic: you give the chart 10 values and 10 / matching number of  labels and that's it.

What do I do if I have a very long list of frequent readings for a small number of hours or days? - how can I stuff all these values into the chart and only have 24 hour labels? Or 7 days worth of labels? And possibly decimate it as well? My "X" values for the data points is in Unix time format - seconds from something in the past, or I can make it TDateTime instead, but I would want the few shown labels to refer to around the current time / date.

Also, if I have gaps in this data, I want it shown as a broken line - - - - - or something. Hopefully automatically, without actually looking for any gaps in the Delphi code.

It looks like ChartJS supports both, but I could not figure out how to feed this into the TIWChartJS component, hope you can help...

[iwuser]

The provided example is very simplistic: you give the chart 10 values and 10 / matching number of  labels and that's it.

What do I do if I have a very long list of frequent readings for a small number of hours or days? - how can I stuff all these values into the chart and only have 24 hour labels? Or 7 days worth of labels? And possibly decimate it as well? My "X" values for the data points is in Unix time format - seconds from something in the past, or I can make it TDateTime instead, but I would want the few shown labels to refer to around the current time / date.

Also, if I have gaps in this data, I want it shown as a broken line - - - - - or something. Hopefully automatically, without actually looking for any gaps in the Delphi code.

It looks like ChartJS supports both, but I could not figure out how to feed this into the TIWChartJS component, hope you can help...

Alexandre, this decimation in ChartJS is described on some pages as "plug-in". Does it mean you would need to specifically implement some additional code to support it? Or can it be leveraged with it as it is? And if yes, how?

[Alexandre Machado]

I'll see if I can get you a demo that shows what you're asking. Some time since the last time I digged under the ChartJS library... let's see what I get

[iwuser]

I'll see if I can get you a demo that shows what you're asking. Some time since the last time I digged under the ChartJS library... let's see what I get

Thanks, Alexandre, it will be appreciated!

[Alexandre Machado]

I believe you are considering something like this?

   

[iwuser]

I believe you are considering something like this?

Yes, exactly! I'm not even so fussed about reducing points (although that would be nice), as reducing the count of labels and then showing points proportionally to the labels. And if there's for instance 1h of data missing, I want it shown with some kind of broken line that connects the last point before the gap with the first one after the gap, if you know what I mean.

[iwuser]

I believe you are considering something like this?

Yes, exactly! I'm not even so fussed about reducing points (although that would be nice), as reducing the count of labels and then showing points proportionally to the labels. And if there's for instance 1h of data missing, I want it shown with some kind of broken line that connects the last point before the gap with the first one after the gap, if you know what I mean.

Do you have an ETA for this?

[Alexandre Machado]

We've just released a new update, https://www.atozed.com/2024/03/intraweb-15-5-9/

The major thing in this update was a considerable enhancement of IWChartJS controls. A new demo will follow.

Please notice that ChartJS library is complex and not every single feature is supported 1 to 1 from the IWChartJS component, but we are constantly extending it to support new features.

I'll publish a new demo with a few more complex charts, including this one that I posted above. Stay tuned.

[iwuser]

Alexandre, have you had a chance to update the demos with this new functionality?

[Alexandre Machado]

Please check out this new demo:

https://github.com/Atozed/IntraWeb/tree/...i/ChartJS2

It shows 2 new charts (the one above) + 1 more with Date/Time scale axis.