bharat.nagdev
Posts: 23
Joined: Mon Aug 10, 2020 1:45 pm

Range selector not working with Live chart

Tue Jul 05, 2022 4:11 am

Hello there,

I have a live chart created using spline. I am facing two issues with it.

1. When adding points at a specific interval sometimes the spline chart is rendered as a line chart.
2. In the range selector the 1-hour duration does not work even though there is data.

Here is codepen for the same: https://codepen.io/nagdevbharat/pen/LYd ... itors=0010

kamil.m
Posts: 676
Joined: Thu May 19, 2022 1:33 pm

Re: Range selector not working with Live chart

Tue Jul 05, 2022 8:25 am

Hi,

First of all, your afterSetExtremes function is not necessary here. You don't need to create new data after switching and changing the time range (and also, you shouldn't - that's not good for performance).
Range selection just changes the zoom of the chart, it does not mutate the data. And that's how it should work.
Also a good convention would be to use different names than used in Highcharts API.

The 1H range selection works just fine. There is simply not enough data to show (you have around 15 mins of data at the initial load).

Could you show me how you add your points to the chart (to see the change from spline to line chart)? Remember that you can use the methods below:
https://api.highcharts.com/class-refere ... s#addPoint
https://api.highcharts.com/class-refere ... es#setData
https://api.highcharts.com/class-refere ... ies#update

Let me know if that was useful,
Best regards!
Kamil Musiałowski
Highcharts Developer

bharat.nagdev
Posts: 23
Joined: Mon Aug 10, 2020 1:45 pm

Re: Range selector not working with Live chart

Tue Jul 05, 2022 9:45 am

Hello, Thanks for the quick reply.

I am using afterSetExtremes to execute dynamic API calls on the server to get data based on the range selected.

For the spline changes to line issue.

There is a socket involved in my project, to replicate that here I have added setInterval in the chart load event.

I use addPoint to add data.

The same code pen has all the configurations I use in my actual project.

kamil.m
Posts: 676
Joined: Thu May 19, 2022 1:33 pm

Re: Range selector not working with Live chart

Tue Jul 05, 2022 2:57 pm

I think now I know what you want to achieve with your chart.
So let me point out some important things:

You need a larger dataset (I'm guessing that your original data has a sufficient length). But to show 1H of data, you will need at least a data length of 3600 points (assuming that each point is one second).

You shouldn't use the range selector to achieve that, it is meant to be used with zooming - not slicing the data to a specific period.
To achieve the desired outcome, I'd suggest using some custom buttons, and then slice the original data to the specified length (i.e 15mins = 900 one-second points).

Please remember, when mutating the data, do not reference a chart.series.data - because you will end up with a dataset getting smaller and smaller with each mutation, without a reference to the original dataset.

Take a look at the simplified demo below:
https://jsfiddle.net/BlackLabel/f7ozp0jx/

Let me know once you implement it in your chart,
Best regards!
Kamil Musiałowski
Highcharts Developer

bharat.nagdev
Posts: 23
Joined: Mon Aug 10, 2020 1:45 pm

Re: Range selector not working with Live chart

Fri Jul 08, 2022 4:52 pm

Thanks for the details,
It doesn't seem to be working in the existing environment I am using.

I will try it with some different data and will update further.

kamil.m
Posts: 676
Joined: Thu May 19, 2022 1:33 pm

Re: Range selector not working with Live chart

Fri Jul 08, 2022 6:42 pm

Sure thing, let me know how that worked!

In case of any further questions, you know where to find us,
Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”