XRange 'point of intrest'

[shreshtha]

Hi All,
I want to implement this graph using xrange highcharts.

sample Small.jpeg (11.24 KiB) Viewed 718 times

I have below questions related to its implementation
1) The black line parallel to the y-axis is 'current time'. How this can be displayed on the same graph?
2) Data after the 'current time' should be opaque compared to the before ones.
3) How to display label of xAxis in HH:MM:SS format
4) How to change graph timezone in runtime

[dawid.d]

Hello,

Thanks for contacting us with your questions!

1) You can achieve this with the plotLines option. API: https://api.highcharts.com/highcharts/xAxis.plotLines

2) I'm not sure what exactly you want to achieve here, but you might find the partialFill option useful: https://api.highcharts.com/highcharts/s ... artialFill

3) Use the format option for axis labels: https://api.highcharts.com/highcharts/x ... els.format

4) Refer to the timezone parameter. You can use it in the update method as in the demo below. https://api.highcharts.com/highcharts/time.timezone

Demo: https://jsfiddle.net/BlackLabel/xn69mwta/

Let me know if that was what you were looking for!
Best regards

[shreshtha]

Thank you @dawid.d this meets the requirement. For the 2nd point I will be using the class option. As this is going to be a near to real time graph, I have few more questions:
1) currentTime should update every 1min. What is the best way to handle it?
2) new input will be passed every 5mins (data fetched from api call, formatted then passed to graph). What is the best way to pass the new valued to update the graph?

[shreshtha]

I am using chart.setdata to update the series.
However the tooltip formatter function is not updating the timezone based on the new timezone passed on button click.
Demo: https://jsfiddle.net/2tgmq5c8/

[dawid.d]

Hi,

That's because the dateFormat method is static and our timezone is only set for that chart. However, you can change it by setting the timezone for all charts as in the demo below.

Demo: https://jsfiddle.net/BlackLabel/xn69mwta/

In this demo, you will also find a proposal for updating the graph in real-time (adding and editing points).

I hope you will find it useful
Best regards!

[shreshtha]

Hi,

If I compare my demo code with what you have shared its almost same but still the timezone change is not reflecting on the tooltip.
Demo: https://jsfiddle.net/v5ouwbak/3/

[dawid.d]

Hi,

It's not the same, especially the timezone-changing function. In your case, it still only calls for this one chart, and as I said before, changing the global Highcharts options should help.

See here: https://jsfiddle.net/BlackLabel/e8g3s701/

Regards!

[shreshtha]

Thank you for the reply.

I have another question, for data points like {x: 1674465000000, x2: 1674465060000} that is difference of 1min is not represented on graph. But in my usecase I need to plot it on graph. How can we ensure that such intervals are also visible in graph?
Demo: https://jsfiddle.net/5hpg2t8L/

Regards
Shreshtha

[dawid.d]

Hi,

You can add a point belonging to the scatter series as in the demo below.

Demo: https://jsfiddle.net/BlackLabel/356ugko1/

Best regards!

[shreshtha]

Thanks Dawid.

Is there any way to show as bar only? May be by adding some mock weightage but showing the exact value in tooltip?

Thanks and Regards,
Shreshtha

[dawid.d]

Hello,

You can set this as a bar, but then you will have to set a different x2, and in the tooltip handle the custom option, as in the demo below.

Demo: https://jsfiddle.net/BlackLabel/r42Lsbha/

Regards!

[dawid.d]

Hi Shreshtha,

Is there any way to show as bar only? May be by adding some mock weightage but showing the exact value in tooltip?

It turns out that I was wrong, there is also an option that allows you to do it using the API: series.minPointLength.

API: https://api.highcharts.com/highcharts/s ... ointLength
Demo: https://jsfiddle.net/BlackLabel/by6zheuq/

I hope you will find it useful
Best regards!