robert_s
Posts: 5
Joined: Thu Apr 11, 2024 5:50 am

Highcharts Dashboard get chart sync information

Hi,

I'm working on a highcharts dashboard using data pool with sync configuration on. Is there any ways to get the sync (zoom, legend toggle etc) information programmatically?

Thanks,
User avatar
dawid.d
Posts: 904
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboard get chart sync information

Hello,

Welcome to our forum and thanks for contacting us with your question!

So if I understand correctly, you would like to get to the sync options or config for a given component.

In the demo below I show you how you can do this. Note that we distinguish between `syncConfig` and `options.sync`.
- `options.sync` is a raw settings object defined by the user.
- `syncConfig` is a complete synchronization configuration based on default options and user settings.

Demo: https://jsfiddle.net/BlackLabel/08vd45oe/

Let me know if this is what you were looking for!
Best regards
Dawid Draguła
Highcharts Developer
robert_s
Posts: 5
Joined: Thu Apr 11, 2024 5:50 am

Re: Highcharts Dashboard get chart sync information

thanks for your reply. But what I am actually looking for is in Highcharts dashboard, do we have a way to
- detect zoom change and get the zoom values (similar to highcharts getExtremes())
- detect legend click changed and get the selected/deselected legends
- click on a button and programmatically set a pre-defined zoom level/legend selection to the dashboard, which will be applied to all charts sharing the same data pool with sync configuration on.

please let me know if this is doable and thanks in advance!
User avatar
dawid.d
Posts: 904
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboard get chart sync information

Thank you for the explanation!

Yes, it is absolutely possible. Synchronization is based on cursors that send information about the triggered action and can listen to it. Below I am sending a demo in which you can see how easily you can listen for synchronization events for a given data table.

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

You may also be interested in this documentation article: https://www.highcharts.com/docs/dashboa ... ronization

I hope you will find it useful and in case of any other questions, feel free to contact us anytime!
Best regards
Dawid Draguła
Highcharts Developer
robert_s
Posts: 5
Joined: Thu Apr 11, 2024 5:50 am

Re: Highcharts Dashboard get chart sync information

Thanks so much! This is really helpful. One thing i'm still not sure is, given the below xAxis extremes information,

Code: Select all

 
 cursor: {
    column: "Population (mln)",
    row: 8,
    state: "xAxis.extremes.max",
    type: "position"
  },
  cursors: [[circular object Object]],
  event: {
    dataMax: 19,
    dataMin: 0,
    max: 7.947242206235012,
    min: 2.9472422062350123,
    move: 529,
    preventDefault: function(){r.defaultPrevented=!0},
    scale: 11.456043956043956,
    target: { ... },
    trigger: "zoom",
    type: "setExtremes",
    userMax: 5.820143884892087,
    userMin: 5.074340527577938
  }
  
how can I set the board zoom level to it when initially render the chart? or in other words, do we have a way to programmatically set the zoom level similar to highcharts events.setExtremes()?

I'm very new to highcharts dashboard, and really appreciate your help!
User avatar
dawid.d
Posts: 904
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboard get chart sync information

You're welcome! I'm glad I can help!

Everything that could be set in Highcharts options can still be set in chartOptions. In the demo below I present two ways to set the initial zoom. The first one - commented - traditionally in Highcharts on load. The second one, at the very bottom of the demo code, after loading the Dashboards.

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

Let me know if that was what you were looking for!
Best regards
Dawid Draguła
Highcharts Developer
robert_s
Posts: 5
Joined: Thu Apr 11, 2024 5:50 am

Re: Highcharts Dashboard get chart sync information

Thanks so much for your reply! This is exactly what I was looking for! :)

I have another follow up questions regarding it. Would it be doable to save highcharts components' zoom information as part of the dashboard options (so that we can get it using

Code: Select all

board.getOptions()
) to support the example use case below?

For example:
step1:we change the zoom level to [5, 15] and save it to localStorage together with other dashboard options;
step2: we destroy the dashboard;
step 3: we want to get back our saved dashboard with initial zoom level set as [5,15]
User avatar
dawid.d
Posts: 904
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboard get chart sync information

Hi again!

I have prepared a demo for you on how to do this.
Basically, board.getOptions() returns an object of all the things you manually set in the options. Therefore, whatever changes in the core will not be there automatically. If you want to change it, you have to overwrite something.

First, I added some custom zooming options. Additionally, I added a function that, upon initialization, updates the extremes of all charts in all Highcharts Components and adds an event listener to update the options in the board so that they can be overwritten.

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

You can customize this solution for your use case.
Best regards!
Dawid Draguła
Highcharts Developer
robert_s
Posts: 5
Joined: Thu Apr 11, 2024 5:50 am

Re: Highcharts Dashboard get chart sync information

Hi,

Thank you so much! I got the zoom work in my development work using your solution. I was trying to apply the same solution to save and load the legend items. But I got stuck on saving the legend selection.
Here is what i did:
1. I added a customized legendItem attribute in chartOptions.chart.legendItems
2. in

Code: Select all

doAlwaysAfterLoadDashboard()
function, i tried to attach some events on highchart's legendItemClick event, but it did not work as expected.

demo: https://jsfiddle.net/09z6eLfk/

Would you please be able to help point out my mistake or if possible, help with saving and restoring the legend items? Really appreciate your help.

Thanks,
User avatar
dawid.d
Posts: 904
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboard get chart sync information

Hello again!

Series can be disabled using the `visible` option. So there is no need to define a new one. In any case, a good approach! See my proposed solution below.

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

Best regards
Dawid Draguła
Highcharts Developer

Return to “Highcharts Dashboards”