MeinerEiner
Posts: 13
Joined: Tue Mar 23, 2021 12:00 pm

Aligning Xaxes

Hello,

I have several Xaxis which I would like to synchronize with each other.
For understanding, sometimes it’s 500 values sometimes 485, I want that if the values have the same value,
the corresponding point should be displayed. Now I have integrated several Xaxis as a workaround,
so the values are still offset but you can read them at least manually. I hope I explained it reasonably.

Its my Workaround
Its my Workaround
xaxis.JPG (27.36 KiB) Viewed 608 times
Thank you very much.
Best regards.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Aligning Xaxes

Hello MeinerEiner,

Thanks for contacting us with your question.

Could you provide me with some sample data that you use with your x axes? If I understood correctly you would like to show on axes only vaues that are common for all axes. You could either use labels.formatter to programatically show only values that are the same, or use properties like xAxis.min with correct tickInterval value.

Best regards!
Mateusz Bernacik
Highcharts Developer
MeinerEiner
Posts: 13
Joined: Tue Mar 23, 2021 12:00 pm

Re: Aligning Xaxes

Hello,

Thank you very much for the answer. Of course I can provide some data.

The times should match the measured values, so that the curves are not offset.

Best regards.
Attachments
data.rar
(1.23 KiB) Downloaded 24 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Aligning Xaxes

Hi MeinerEiner,

Thanks for sharing that sample data.

I have parsed it and created chart based on that data. I have noticed that your data have many common x values. Could you tell me why would you create separate x axis for each series in this case?
Demo with multiple axes: https://jsfiddle.net/BlackLabel/Lu0wtcxb/
Demo with single axis: https://jsfiddle.net/BlackLabel/v0ujd753/

Best regards!
Mateusz Bernacik
Highcharts Developer
MeinerEiner
Posts: 13
Joined: Tue Mar 23, 2021 12:00 pm

Re: Aligning Xaxes

Hello,

Thanks for the example! It is a measuring device that generates its own time axis with the respective measurement.
The values are written into a database every 20ms during the measurement.
Depending on the capacity of the measuring device,the values arrive in 20-60ms.

What does not matter so far, only when displaying in the line chart, the timeline of the different measurements should be synchronous.

Thank you very much.

Greetings
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Aligning Xaxes

Hi MeinerEiner,

Thanks for explaining! Just wanted to ask if either of these shared demos was what you expected and if I can help you further somehow?

Best regards!
Mateusz Bernacik
Highcharts Developer
MeinerEiner
Posts: 13
Joined: Tue Mar 23, 2021 12:00 pm

Re: Aligning Xaxes

Hello,

Thanks for the example! Sorry for the late answer, I was ill. I tried to realize the example in atvise, but unfortunately I didn’t make it there.
In the appendix my code , “data:Measurement1 - 5”, “date” is always an array that I fill.

Maybe you have a tip for me on how to realize it there.
Thank you very much!

Best regards
Attachments
code.rar
(791 Bytes) Downloaded 11 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Aligning Xaxes

Hi MeinerEiner,

Thansk for sharing that code, I took a peek at it and it seems fine. I wasn't able to create a demo with a solution because the code that you shared doesn't include data which is crucial in this case. Could you provide me with sample data that you use? Measurement1 - 5 and date is what I need. If you could insert it in the fiddle it would be even better: https://jsfiddle.net/BlackLabel/jk5uL2ca/

Regards!
Mateusz Bernacik
Highcharts Developer
MeinerEiner
Posts: 13
Joined: Tue Mar 23, 2021 12:00 pm

Re: Aligning Xaxes

Good morning,

Thank you so much for supporting me so much!
I have inserted the data and also all 5 date values, because they are needed for comparison.

Now you can also see that the average curve is displayed longer than the others.
Here the link:

https://jsfiddle.net/z7ew9kns/3/

Thanks again!

Best regards
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Aligning Xaxes

HI MeinerEiner,

Thanks for sample data. AVG series is longer because it has more points that other series. There are few things that you can do:
- apply extremes for xAxis using max option: https://jsfiddle.net/z7ew9kns/3/
- trim AVG series data
- define x values for your data so that they finish at the same point: https://api.highcharts.com/highcharts/series.line.data

Let me know what do you think about these solutions.
Regards!
Mateusz Bernacik
Highcharts Developer
MeinerEiner
Posts: 13
Joined: Tue Mar 23, 2021 12:00 pm

Re: Aligning Xaxes

Hello,

the best option would be to adjust the measurements to the AVG time. Because the times are the same, only depending on capacity utilization 20-40ms clock.
The AVG measurement therefore has more measuring points, as it was created from the others.
So the time values should be displayed on the same position.

If the time AVG: 0.01 should also, if present, the values of the other measurements at that time should be displayed. That would stretch the other curves.
Would that be possible?

I don’t know if it was understandable now.

Thank you.

Best regards.
MeinerEiner
Posts: 13
Joined: Tue Mar 23, 2021 12:00 pm

Re: Aligning Xaxes

Or would it work if I set the time axis fixed values and then compare them with the others? Is there such a function? That the time is always at the same height and then the values are displayed there.

Thank you!

Best greetings
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Aligning Xaxes

MeinerEiner,

I have created something like that: https://jsfiddle.net/BlackLabel/v0hnozq8/
That is the best you can most likely achieve right now with data that you have, but it is more a band aid than a proper solution. I have created a second dummy X axis to which AVG series is linked now.

If you want to do it properly then you need to provide x data for AVG series. I understand that time values are the same for all series but there is not enough data in date variable, you need to assign x value for each AVG series point to make it work properly. So if your AVG series consists of 735 y values, then you need to provide 735 x values and parse it to [x,y] format per point:
https://api.highcharts.com/highcharts/series.line.data

Regards!
Mateusz Bernacik
Highcharts Developer
MeinerEiner
Posts: 13
Joined: Tue Mar 23, 2021 12:00 pm

Re: Aligning Xaxes

Hello,

thanks for the help, I have now solved it so that I fill the values with FirstValue/LastValue in the SQL Server.

Thus, each measurement now has the same number of values.

Thank you for your efforts!

Best greetings
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Aligning Xaxes

Hi MeinerEiner,

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

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”