Bar charts with overlapping Data

[dhiresh13]

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 (4.91 KiB) Viewed 837 times

Any help here is really appreciated. Thank you

[hubert.k]

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!

[dhiresh13]

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]

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!

[dhiresh13]

Thank you

[hubert.k]

You're welcome! In case of any further questions, feel free to contact us again.