dhiresh13
Posts: 7
Joined: Tue Aug 30, 2022 4:31 am

Bar charts with overlapping Data

Fri Nov 25, 2022 5:46 am

I am trying to develop a UI with timestamps on X-axis and the data to be plotted is in boolean values (1,0). it looks like a bar chart with overlapped data but unable to figure out its terminology nor find a suitable chart/graph to proceed with.

I have attached the prototype image of how exactly should be the data be visually represented
plt3.png
plt3.png (4.91 KiB) Viewed 61 times
Any help here is really appreciated. Thank you

hubert.k
Posts: 1149
Joined: Mon Apr 11, 2022 11:48 am

Re: Bar charts with overlapping Data

Fri Nov 25, 2022 1:54 pm

Hi dhiresh13!
Thanks for contacting us with your question!

To achieve the chart, which is similar to the one from the image which you attached I suggest doing it with an x-range chart type. The point structure needs two dates, but I think it can be easily calculated with some extra JS code, before the chart initialization. Please, check the demo below to see an example.

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

Let me know if that fits your requirement.
Regards!
Hubert Kozik
Highcharts Developer

dhiresh13
Posts: 7
Joined: Tue Aug 30, 2022 4:31 am

Re: Bar charts with overlapping Data

Mon Nov 28, 2022 1:54 pm

Hey Hubert.k,
This is precisely the thing I was looking for.

I need some suggestions herein representing the data,
The x2 value(endpoint) which needs to be plotted is nondeterministic, as the array is generated using linspace with two timestamps (start time, end time) and an array of data points [0,0,0,0, null, null, null,1,1,1,0,1,...].

I generate an array of values in such a format, I need to figure out the solution to extract x2 from such a dataset?

Code: Select all

[ [1657682534000, 1]
[1657682539000, 1]
[1657682544000, 1]
[1657682549000, 1]
[1657682554000, 1]
[1657682559000, 1]
[1657682564000, null]
[1657682569000, 1]
[1657682574000, 1]
[1657682579000, 1]
[1657682584000, 1]
[1657682589000, 0]
[1657682594000, 0]
[1657682599000, 0]
[1657682624000, null] ]

Can you please help me in figuring out the values for the x2 or any other work around here?

Your help is really apprectiated.
Thanks a lot, hubert.k.

hubert.k
Posts: 1149
Joined: Mon Apr 11, 2022 11:48 am

Re: Bar charts with overlapping Data

Wed Nov 30, 2022 4:53 pm

dhiresh13,
Sadly, I am not sure how would you like to present data, but what you are describing seems to me, like preparing data for Highcharts in JavaScript. You can do it in a lot of ways and it of course depends on the result you would like to achieve. I have prepared a simple demo for you, you can check it below.

Demo: https://jsfiddle.net/BlackLabel/9h7xakgL/

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”