Sharath
Posts: 49
Joined: Wed Dec 14, 2022 7:37 am

To show date and blank in between graph when no data is present

Hi team,

Lets consider I have plotted a stock graph using series data .If I delete some series data in between How to show the date and a blank space in between graph if the some of the series data is not present.

Can I get a working sample code for the same?


Regards,
Sharath MM
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: To show date and blank in between graph when no data is present

Thanks for contacting us with your question!

If you want to highlight the blank space in your data, simply replace the point with a null value and (in this case) the line will have a break wherever the null values are, see:

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

Let me know if that was what you were looking for!
Kind regards
Jakub
Sharath
Posts: 49
Joined: Wed Dec 14, 2022 7:37 am

Re: To show date and blank in between graph when no data is present

Hi Jakub,

Please find the sample code link: https://jsfiddle.net/ef2h0sn8/

So my ask is in the above example provided I have added a sample array of time series data.

So I have commented a timestamp data in between, now even though that particular data is commented out I want time to be displayed in the x-axis and show a gap in between the graph as there is missing data.

Can you please edit the same example and send me the solution if its possible?

Regards,
Sharath MM
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: To show date and blank in between graph when no data is present

Hey!

You need to add null value to the point that you want to act as a missing data, see:

Demo: https://jsfiddle.net/BlackLabel/5oxtqv7w/

I hope you find it useful
Kind regards
Jakub
Sharath
Posts: 49
Joined: Wed Dec 14, 2022 7:37 am

Re: To show date and blank in between graph when no data is present

Thanks for your response,

I understand, but I want to know is it possible to show the missing data(blank space) without adding null value, instead if the entire array is removed as like I have shown in my sample code(commented line)? : https://jsfiddle.net/ef2h0sn8/

If you look at my sample code provided I have commented out an array. So is it possible to show that missing date in x-axis and also a blank space in the graph?

Regards,
Sharath MM
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: To show date and blank in between graph when no data is present

Hey!

I'm not sure if I understand what you mean, but I believe you want the data to be without the null point and to generate it automatically, so did I in the demo based on the interval between the first two points, see:

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

Let me know if that helps!
Kind regards
Jakub
Sharath
Posts: 49
Joined: Wed Dec 14, 2022 7:37 am

Re: To show date and blank in between graph when no data is present

Hi Jakub,

Let me try explaining you again.
Please find my updated link here :https://jsfiddle.net/ars15qz7/

So if you see in my sample code I have multiple series data plotted using stock chart.

here is my requirement:
In the given sample code I have provided you the hardcoded series data.
but in our project we pull data from the backend.

Now in the sample code I have commented few timeseries data which means they are not available I mean they do not exist which eventually means there is a break or discontinuation of series data in between which is handled on default by the stock component plotting the points by gathering the next series data ignoring the missed ones.

But I need to show a gap when there is a missing series data/ discontinuation of series data in between.

can you provide a solution ?

Regards,
Sharath MM
jedrzej.r
Posts: 742
Joined: Tue Jan 24, 2023 11:21 am

Re: To show date and blank in between graph when no data is present

Hi!

Thanks for adding context into your requirements!

It seems that the solution here would be to simply disable the xAxis.ordinal, which by default spaces out points without any breaks.

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

API: https://api.highcharts.com/highstock/xAxis.ordinal

Let me know if that was helpful for you.
Best regards!
Jędrzej Ruta
Highcharts Developer
Sharath
Posts: 49
Joined: Wed Dec 14, 2022 7:37 am

Re: To show date and blank in between graph when no data is present

Hi Jedrzej,

thanks for the solution , but this resolves only one part of my issue.

Another part is I need to show a gap when there is a missing series data/ discontinuation of series data in between as u see in my sample code (commented lines).

Can you help on this with the same sample code I provided.

Regards,
Sharath MM
jedrzej.r
Posts: 742
Joined: Tue Jan 24, 2023 11:21 am

Re: To show date and blank in between graph when no data is present

Hi again!

If I understood correctly, you'd then like to show a discontinuation of line series, when there is a missing data. In this case, you'd have to insert null values when there is a missing point at a given timestamp.

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

Let me know if that's what you were looking for.
Best regards!
Jędrzej Ruta
Highcharts Developer
Sharath
Posts: 49
Joined: Wed Dec 14, 2022 7:37 am

Re: To show date and blank in between graph when no data is present

No can you provide a solution without inserting null values, because in our backend data from api we dont have null values. Even without null if there is discontinuation in series how should we show the blank space.

regards,
Sharath MM
jedrzej.r
Posts: 742
Joined: Tue Jan 24, 2023 11:21 am

Re: To show date and blank in between graph when no data is present

I see, in this case you can use the gapSize property with a value of 1, meaning that if the distance between two points is greater than the distance between two closest points, there will be a 1 point gap between missing points. You can also use switch to absolute values and e.g. set the gap to be exactly one hour.

Demo with relative gap value: https://jsfiddle.net/BlackLabel/e2u8sp5w/

Demo with absolute gap value: https://jsfiddle.net/BlackLabel/jzybht81/

API:
https://api.highcharts.com/highstock/se ... ne.gapSize
https://api.highcharts.com/highstock/se ... e.gapUnit
In case of any other questions, feel free to reach out to us anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer
Sharath
Posts: 49
Joined: Wed Dec 14, 2022 7:37 am

Re: To show date and blank in between graph when no data is present

Hi Jedrzej,

Thanks for the reply so when to use relative and absolute gap value?
Also if I give gapSize:5 what does that mean? on what basis we can define the gapSize value?

Also since we are getting data from backend API we will not know the distance between points as it may vary in that case can we make this gapSize dynamic?
If yes can you provide an example?

Regards,
Sharath MM
jedrzej.r
Posts: 742
Joined: Tue Jan 24, 2023 11:21 am

Re: To show date and blank in between graph when no data is present

Hi!

I can see that in your other post, Kamil already responded with a thorough explanation of gapSize property: viewtopic.php?p=191850#p191850.

As for calculating the gapSize dynamically, on initial load of the chart you can iteretate through points xData in order to find minimal distance between points, and the update the gapSize accordingly. You can tweak this code, so that it fits your application requirements.

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

API:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... art#update

In case of any other questions related to Highcharts, feel free to contact us in the future.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Stock”