HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Windbarbs above/below

Hi,

I have a chart as in this jsfiddle. If you search for name: 'WindBarbs', you will see where I add the windbarbs and on which xAxis I show them. I wish to give the user the choice to either show the barbs high or low in the chart (i.e. use the xAxis 0 or 1). You can simulate that easily by switching the xAxis value in the addSeries function.

Now my problem is that the value series show differently: with the windbarbs low (xAxis == 0) they show only value points for every two hours tick and with the windbarbs high (xAxis==1) they show for every 5 or 10 minute tick. The values in the json actually are for every five minutes. This leads to the following questions:
  1. How do I get the value series in the highest resolution possible (so for 5 min ticks) no matter whether the windbarbs are on the upper or lower xAxis.
    NOTE: the 5 minute ticks may be 10 minute tick depending on the size of the chart depending on what size of screen it is displayed on. That can be disregarded.
  2. The upper and lower xAxis are not tick aligned. What causes this and can the alignment be accomplished without triggering other problems and how?
HansR
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: Windbarbs above/below

In addition I must say that the upper xAxis will not be created when the winbarbs are on the lower xAxis!
HansR
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: Windbarbs above/below

Reply to self: The second xAxis need to have a linkedTo: 0 attribute for the tick to align. But it does not help the display of datapoint interval (2 hrs vs 5 or 10 minutes).
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Windbarbs above/below

Hi there,

I am really sorry for the late reply. Your use case is quite extensive, so let's divide it into separate parts.

1) Windbarbs axis position toggle
I have created a simple selection menu, where you can choose where to render your wind barbs. You can achieve it by finding the wind barbs series and updating its xAxis value with the series.update method.
DEMO: https://jsfiddle.net/BlackLabel/2pL94fwu/
API Reference: https://api.highcharts.com/class-refere ... ies#update

2) Different values when toggling Axis
Since your code is quite complicated, it's hard to quickly tell what is causing the issue with the data values. I would start with debugging it with hardcoded data (instead of the JSON one) so that you will be able to tell if it's a code problem or a data problem.
Remember that you can always use our Highcharts.getJSON method, and access your data in the enclosing function scope. That could greatly simplify your code.
DEMO: https://jsfiddle.net/BlackLabel/46acj7qu/
API Reference: https://api.highcharts.com/class-refere ... s#.getJSON

3) Alignment of the xAxis ticks
In the demo provided in the first post, the tick on both axes are perfectly aligned in my JSFidlle. Could you post a screenshot of that issue, if it still occurs?

Thank you for your patience,
Best regards!
Kamil Musiałowski
Highcharts Developer
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: Windbarbs above/below

kamil.m wrote: I am really sorry for the late reply. Your use case is quite extensive, so let's divide it into separate parts.
Thanks for the answer, timing is no problem. I understand what you are saying, I simplified my jsfiddle and explain below.
The data is public and you can access it through the links given in the jsfiddle code. I would like to stay as close to the original code as possible as it is all legal use of highcharts (I think)

I left the structure of the code untouched, you have to believe me: that is unrelated to my question, it is only related to loading the data. Examining the loaded data in the debugger shows that is not an issue.

So I reduced the code, leaving only one datafile and the windbarb data file to be read and displayed. I removed all redundant axis and attributes. That which remains may even be further reduced but it does not complicate the code. Datafiles are read only once, not during switching of the windbarbs.
kamil.m wrote: 1) Windbarbs axis position toggle
I have created a simple selection menu, where you can choose where to render your wind barbs. You can achieve it by finding the wind barbs series and updating its xAxis value with the series.update method.
Thank you, I implemented it in my fiddle
kamil.m wrote: 2) Different values when toggling Axis
Since your code is quite complicated, it's hard to quickly tell what is causing the issue with the data values. I would start with debugging it with hardcoded data (instead of the JSON one) so that you will be able to tell if it's a code problem or a data problem.
Remember that you can always use our Highcharts.getJSON method, and access your data in the enclosing function scope. That could greatly simplify your code.
I hope we can reach each other on this:
1) the data can be inspected publicly by using the URL's as found in the code so I did not change to the highcharts method of getting the data. The straightforward ajax calls do work and yes I debugged this and the variables show what I expect. So the data for the series are correct.
2) the reason to use this amount of data is that the effect can only be clearly seen with large series of data where the data for the windbarbs get 'compressed' to fit the with of the windbarb icon. Using this amount of data hardcoded makes the fiddle unreadable, which I hope you agree.
kamil.m wrote: 3) Alignment of the xAxis ticks
In the demo provided in the first post, the tick on both axes are perfectly aligned in my JSFidlle. Could you post a screenshot of that issue, if it still occurs?
I am sorry for the confusion, my second reply 'to self' confirms I managed to align both the xAxis by using the linkedTo attribute so afaics this part if the question is solved.

So what is the leftover issue?

If the WindBarbs are on top, you see the temperature curve (with a five minute resolution in the JSON) displayed as a ten minute resolution (check the xAxis tooltip time range).

If the WindBarbs are at the bottom, you see the temperature curve as a smooth curve with a two hour resolution between points (five minutes between points in the JSON) which apparently is caused by the WindBarbs which require space of 2 or 3 hours between points, a space which is then forced upon the temperature dataseries.

So my questions are:

1) why are the WindBarbs apparently dominant for the distance between datapoints of the temperature series (blue)
2) how can I have the windbarbs at the bottom and still have the temperature (blue) series be displayed with as many points as possible.
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Windbarbs above/below

Hello,

Thank you for simplifying your demo. That makes our work much easier!

The issue that caused displaying different amounts of points on the temperature curve is the fact, that we were rendering the wind barbs on separate xAxis, and on the shared xAxis (for all series and wind barbs).
Highcharts was trying to display the same amount of points (to align the data to xAxis ticks) so the temperature line got "smoothed" since it was the one with the higher amount of points.

I have created a third xAxis, with an offset set to 0 (so it's positioned in the same place as the original xAxis for data) and now we switch wind barbs between xAxis no. 1 (the top one) and xAxis no. 2 (the Axis hidden beneath the original xAxis no. 0).

See HTML <option> values and JS lines 160 - 166.
DEMO: https://jsfiddle.net/BlackLabel/3a9dLrtb/

I hope that you will find this useful!
Kind regards,
Kamil Musiałowski
Highcharts Developer
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: Windbarbs above/below

Hello Kamil,

It had not occurred to me that I actually need a different axis for the WindBarbs anyway when displayed independently from the other data. Using the xAxis 1 and 2 for the WindBarbs and the 0 for my main data is the solution. Using offset 0 for the third xAxis is a most elegant solution.

So YES: this is most useful.

Thank you very much!!

Kind regards,
HansR
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Windbarbs above/below

Hi there,

I'm really glad that you have found this solution useful!

Feel free to contact us anytime in the future,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”