How to start with correct timerange display

[wvhn]

Hi,
i have a datetime plot with two series showing data from different time spans which overlap. So I want to focus the plot on the time where both series have data. I am doing this by setting the xAxis min and max options on the xAxis and also on the navigator.
https://jsfiddle.net/wvhn_/1o9zt2j6/17/

If xAxis.min is later than the time stamp of one of the series, the plot starts with the minimum series timestamp instead of xAxis.min. If I press the "All" rangeSelector Button, the plot will be okay.

How do I manage to start the plot with the correct timerange display?

Best regards
Wolfram

[michal.f]

Hello, welcome to our forum and thanks for contacting us with your question!

On line 15 (xAxis.min) you had a typo instead of min you wrote mix. Was that the problem?
Demo: https://jsfiddle.net/BlackLabel/tqnLk4uw/

Let me know if you have any further questions!
Best regards!

[wvhn]

Hi again,

thanks for the quick reply. Even if it was only a typo in the fiddle which showed a similar behaviour, your answer helped me to dig deeper into the problem in my real application. That is a jQuery plot widget in a smarthome visualization where the backend updates the data on every change. So there is a widget._create method with empty series data which prepares the chart. When the backend sends the data the widget._update method is called which uses the .setData() method of Highcharts. The problem occurs during the _update cycle.

So I updated the fiddle and call the setData() method after the HIghcharts object is completed. https://jsfiddle.net/wvhn_/tjazuq9d/4/. This reproduces the behaviour better, now.

How can I set the xAxis back to it's original options after .setData()? I tried to call .setExtremes() and .update() on xAxis[0] before or after the setData statement but with no effect.

Best regards
Wolfram

[michal.f]

Hi,

I don't see a problem with the setExtremes() method here. In the attached demo, it works fine, additionally, if you want to completely reset min and max, you can pass null as parameters.

Demo: https://jsfiddle.net/BlackLabel/rko6cuxn/
API: https://api.highcharts.com/class-refere ... etExtremes

Feel free to ask any further questions!
Best regards!

[wvhn]

Hi again. Happy New Year!

while using setExtremes() seemed to be a good solution first, we ran into a new problem: if setExtremes() is used, it overrides the rangeSelector.selected property, too. So users can not specify upfront which zoom level they wish to use.

https://jsfiddle.net/wvhn_/tjazuq9d/43/

To sum it up:
- series[0].setData overrides the configured scaling on the x-axis (which is not an ecpected behaviour from my point of view)
- this can be corrected as a workaround using xAxis[0].setExtremes() which again overrides / destroys configured options

Can this be considered a bug in Highstock or is there a way to avoid this behaviour?

Thanks and best regards
Wolfram

[wvhn]

P.S. using setExtremes() in the update Method also destroys the currently active zoom level, not only rageSelector.selected.

[michal.f]

Hi,

I suggested using setExtremes() as a potential solution, but since you write

not an ecpected behavior from my point of view

then it might be worth considering proper data parsing before they are transferred to the graph. Then you would have to write the logic in pure JavaScript that will return time range where both series have data.

Regards!

[wvhn]

Hi Michał,

maybe you got me wrong. The setExtremes() method works of course but it overrides - by design - some chart options already set.

The problem is in the navigator from my point of view:

• if I use Hicharts.chart{…} the graph is shown „OK“ (as desired) clipped to the configured xAxis.

• with Highcharts.stockChart{…}, the graph is OK if I set the data already during object definition ( https://jsfiddle.net/wvhn_/1o9zt2j6/17/ )

• If I set the data in Highcharts.stockChart{…} using the series.setData() method the configured xAxis timerange gets ignored/overridden

• If I then exclude the series with data exceeding the timerange from the navigator the graph is OK, again. (series[0].showInNavigator : false)

This is what I mean with „unexpected behavior“. Are there options for the navigator to prevent this behavior or is it to be considered as a bug in the navigator code?

Thanks and best regards
Wolfram

[wvhn]

P.S: interestingly, zoom is clipped to the configured axes limits (xAxis.min/max and navigator.xAxis.min/Max ) if the „All“ button is used. If I select a shorter zoom span the graph sticks to Max of the series data instead of configured xAxis max. Setting navigator.clipToMax to false helps with correctly displaying the „All“ range but has no effect on the other zoom spans.
https://jsfiddle.net/wvhn_/tjazuq9d/49/

Note that navigator.clipToMax helps me at least to get rid of the necessity to use setExtremes() but the zoom behavior remains weird.

[michal.f]

Hi,

... or is it to be considered as a bug in the navigator code?

If I understand it correctly, yes, it's probably a bug, it's best if you report it on GitHub, where one of our developers will analyze it more and let you know. It is worth making the demo as simple as possible and presenting this specific problem, and that it is well described how to reproduce it.

You can do this here: https://github.com/highcharts/highchart ... new/choose

Best regards!