spk
Posts: 13
Joined: Tue Sep 27, 2022 12:27 pm

Null values inbetween should be ignored if time difference in milliseconds

My json file:

Last item in each object is the type ("tp":"graphA"). Second item in each object is the time (t":"09/27/2022 10:23:48.733").

[
{"spd":65.62,"t":"09/27/2022 10:23:48.733","d":1037.29,"tp":"graphA"},
{"acc":1.45,"t":"09/27/2022 10:23:48.930","sgstr":56208,"incltn":56.17",tp":"graphB"},
{"spd":65.62,"t":"09/27/2022 10:23:48.934","d":1037.51,"tp":"graphA"},
{"acc":1.45,"t":"09/27/2022 10:23:49.050","sgstr":56208,"incltn":56.17,"tp":"graphB"},
{"spd":65.62,"t":"09/27/2022 10:23:49.134","d":1037.73,"tp":"graphA"},
{"spd":65.62,"t":"09/27/2022 10:23:49.200","d":1037.62,"tp":"graphA"},
{"acc":1.45,"t":"09/27/2022 10:23:49.325","sgstr":56208,"incltn":56.17,"tp":"graphB"},
{"spd":65.62,"t":"09/27/2022 10:23:49.334","d":1037.95,"tp":"graphA"},
{"acc":1.45,"t":"09/27/2022 10:23:49.555","sgstr":56208,"incltn":56.17,"tp":"graphB"}
{"acc":1.45,"t":"09/27/2022 10:23:49.555","sgstr":56208,"incltn":56.17,"tp":"graphB"}
{"acc":1.45,"t":"09/27/2022 10:24:49.555","sgstr":56208,"incltn":56.17,"tp":"graphB"}
{"acc":1.45,"t":"09/27/2022 10:25:49.555","sgstr":56208,"incltn":56.17,"tp":"graphB"}
{"acc":1.45,"t":"09/27/2022 10:26:49.555","sgstr":56208,"incltn":56.17,"tp":"graphB"}
{"acc":1.45,"t":"09/27/2022 10:27:49.555","sgstr":56208,"incltn":56.17,"tp":"graphB"}
{"acc":1.45,"t":"09/27/2022 10:28:49.555","sgstr":56208,"incltn":56.17,"tp":"graphB"}
]


Below is my code:

var acc= [];
var sgstr = [];
var spd =[];
var d =[];

if (data.tp === "graphA") {
acc.push(data.acc)
sgstr.push(data.sgstr)
}
else {
acc.push(null)
sgstr.push(null)
}

if (data.tp === "graphB") {
spd.push(data.spd)
d.push(data.d)
}
else {
spd.push(null)
d.push(null)
}

Assume Json gets generated when a tool runs. I push null in above code because I want to keep each graph(A and B) in line with the whole time the tool was running. Now the problem is, since most of the times graphA and graphB comes alternatively, graphs are generated like points and does not connect like a graph. How do I show them connected like a real graph .Can time diff in milliseconds be ignored or how do we go about it?

If you the notice last 5 lines, only graphB gets data. So, graphA will not have anything plotted for that time period in real graph, which is fine because graphA is not getting data for that time period (like for five mins).

Do we have any technique in highcharts that can handle this? Any suggestion would be helpful.
spk
Posts: 13
Joined: Tue Sep 27, 2022 12:27 pm

Re: Null values inbetween should be ignored if time difference in milliseconds

Please see the attached link. Which could give better insight of what I have explained. Consider first chart plotted from graphA data, second chart from graphB data. You could notice null values at beginning and inbetween of graph, as we are plotting inline with the total time the tool was run.

https://ibb.co/QYXR5kw

graphA, graphB was plotted like a graph, even though it was alternating between two different types of graph data A nd B (which is plotting null in-between as per my code, so my chart data are not connected).
[
{"spd":65.62,"t":"09/27/2022 10:23:48.733","d":1037.29,"tp":"graphA"},
{"acc":1.45,"t":"09/27/2022 10:23:48.930","sgstr":56208,"incltn":56.17",tp":"graphB"}
]

How can I draw these two graphs in a way my points are connected like a graph, keeping null values in place to know total time tool was run.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Null values inbetween should be ignored if time difference in milliseconds

Hello spk!
Thanks for contacting us with your question!

I think the option you are looking for is the xAxis.ordinal property from the Stock module. The ordinal option makes sure that points are spaced equally regardless of the time, distance and different similar factors. Even though breaks don't show any data it is still meaningful and the enabled ordinal option shows such periods, the only thing that is changed is regardless of the period length the space between points is exactly the same.

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

Let me know if you have any further questions!
Regards!
Hubert Kozik
Highcharts Developer
spk
Posts: 13
Joined: Tue Sep 27, 2022 12:27 pm

Re: Null values inbetween should be ignored if time difference in milliseconds

Hi,

Thank you for the reply.

'connectNulls: true' seem to help my case.

Graphs are now drawn like a proper graph even though data from json was alternating between two different types of graph data (graphA and graphB). Which was plotting null in-between before, now they are connected like a graph.

But I would like to know, is there anything that can detect long gap. Suppose, if graphA data was not available for like more than 5 json lines(objects) (or we can use time to detect break). Then I do not want null to connect in these places. Any gap less than 5 json lines can be connected with connectNulls.

May I know how I can achieve this? Thank you.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Null values inbetween should be ignored if time difference in milliseconds

spk,

Unfortunately, there are no options directly from API to use something like a conditional ordinal function, which will connect small gaps (e.g. between 3 points) and will not connect bigger gaps (e.g. between 6 points). But in theory, you can try to calculate distances between points and conditionally, dynamically create proper breaks (https://api.highcharts.com/highcharts/xAxis.breaks). You will have to iterate through all your data, so I think performance could be a little bad, but it is just an idea, maybe in your case it will fit enough.

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”