ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

The opposite X aXis series is not showed in the navigator

Hi!

I have a problem.
My graphic has 6 series, of which 3 belong to the lower X axis and the other 3 to the upper one. The problem is that the series belonging to the upper X axis are not displayed in the navigator. This causes that when modifying the range these series "break". Here the evidence:

http://jsfiddle.net/6gqbj8sk/9/


Also, I would like the points of the 2 axes to be aligned (the number of points in each series is the same).

Thanks!

Edit: To be more clear, I want the navigator to control the 2 X axis. Is that possible?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: The opposite X aXis series is not showed in the navigato

Hi, ZottoSL!

It is impossible to connect a few series with different x data to the same navigator and synchronize them. Could you describe to me what exactly do you want to achieve? Maybe I would be able to find a different approach. Do you need to have different x data (shifted by 24h)? Maybe you could change your data to have the same x and connect them to the same x-axis but we would format and synchronize top x-axis labels so they will be shifter for 24 hours?

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: The opposite X aXis series is not showed in the navigato

rafalS, thanks for the reply.

I am developing a graph in which the user can select a range of dates (1 or more days) and the data corresponding to this date will be compared with other data of different date but equal range. Example: The user selects from November 4 to November 6, and data from this date will be compared with those from November 1 to November 3. The amount of data of each series will always be the same and they will correspond to the same hour and minute, they will only differ in the day.

Also, since the amount of data is a lot, I need to have the possibility to zoom in on the graph.

Thanks for the help and sorry for my English.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: The opposite X aXis series is not showed in the navigato

ZottoSL,

You can get extremes from the bottom axis and set the same extremes for the top one (shifted by one day - 86400000 milliseconds). Hopefully, it will manage ticks positions and zooming at once:

Code: Select all

xAxis: [{
    type: 'datetime',
    events: {
      afterSetExtremes() {
        let bottomAxis = this,
          topAxis = this.chart.xAxis[1];
        topAxis.setExtremes(bottomAxis.min - 86400000, bottomAxis.max - 86400000, true)
      }
    }
  }, {
    type: 'datetime',
    opposite: true
  }],
Let me know if this is what you wanted ;)

jsFiddle: http://jsfiddle.net/BlackLabel/k8syzf1e/

API Reference: https://api.highcharts.com/highcharts/x ... etExtremes
https://api.highcharts.com/class-refere ... etExtremes

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: The opposite X aXis series is not showed in the navigato

Oh men, you are the best!!!

The only problem is that the time ranges will be selected by the user, that is, it will not always be fixed for one day. Is there a way to take this value dynamically?

Thanks again!

EDIT:
Using your logic, I was able to solve the problem by setting the values ​​in a variable way:

Code: Select all

  xAxis: [{
    type: 'datetime',
    events: {
      afterSetExtremes() {
        let bottomAxis = this,
          topAxis = this.chart.xAxis[1],
          diferenciaMin = Math.abs(bottomAxis.dataMin - bottomAxis.min),
          diferenciaMax = Math.abs(bottomAxis.dataMax - bottomAxis.max);
        topAxis.setExtremes(topAxis.dataMin + diferenciaMin, topAxis.dataMax - diferenciaMax, true)
      }
    }
  }, {
    type: 'datetime',
    opposite: true,
  }],
But I have another problem. The lower and upper axes are somewhat outdated. The idea would be that in the same line I show the values ​​of the 6 series for the same schedule. It is understood?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: The opposite X aXis series is not showed in the navigato

Could you prepare for me a chart with sample data and the ability to select range so I can see how exactly will it be working and then fit the solution? Getting correct values dynamically should be easy, but for this moment I don't know where exactly user will define them and from where I can get them.
Rafal Sebestjanski,
Highcharts Team Lead
ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: The opposite X aXis series is not showed in the navigato

Friend!
I think you have read my message before it is edited. I could already solve the issue of dynamic values, as explained in my previous message.
The only thing left to solve is to be able to align the values ​​of the 2 X axis:
ZottoSL wrote:
But I have another problem. The lower and upper axes are somewhat outdated. The idea would be that in the same line I show the values ​​of the 6 series for the same schedule. It is understood?
Thanks!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: The opposite X aXis series is not showed in the navigato

ZottoSL,

I have read your whole post and I wrote a long answer, but I decided to delete it because it didn't bring anything valuable - only speculations. That's why I decided to ask you for a specific chart ;)

When it comes to your idea - I am not sure why it's a little shifted - please check a few cases. The best would be if you simplified your chart to low and easy to read data.
Rafal Sebestjanski,
Highcharts Team Lead
ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: The opposite X aXis series is not showed in the navigato

I can not completely understand the message, because my English is not very good.

I have tried the modification of X axis that I made and it works correctly in all cases.

My only remaining query, is how to align each point of the 2 X axis, so that all the points of the series are aligned. For example:

http://jsfiddle.net/6gqbj8sk/22/

I need the "Oct 23, 00:15" (Axis Top), to be aligned with "Oct 24, 00:15 (Axis bottom), and so for each point.

Thank you very much!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: The opposite X aXis series is not showed in the navigato

ZottoSL,

I suggested you to try a few approaches on a simplified chart and simplified data to find what you need to improve with your approach.

For this moment I am not able to find a solution for you because you didn't provide a chart with data the user will use.
You gave me a demo of your chart (the first one) and I found a working solution. Then you told me that you need a different solution because the user will able to select the time ranges - so I asked you for a simplified chart with a sample data so I can reproduce the user's environment and fit new solution.
Rafal Sebestjanski,
Highcharts Team Lead
ZottoSL
Posts: 17
Joined: Wed Oct 31, 2018 3:37 pm

Re: The opposite X aXis series is not showed in the navigato

Friend.
Finally, for a better visualization, I decided to use all line type series. In these cases, the axes are automatically aligned.

Thanks for your help!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: The opposite X aXis series is not showed in the navigato

You're welcome and good luck with your chart! ;)
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Stock”