We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.

Possibility of switching between grid and charts using Highcharts

Answered
Yegor asked on October 29, 2019

Hi. I'm currently learning how to integrate Highcharts with pivot table and I'd like to simulate the standard behavior of table, with the only condition that standard charts need to be replaced with Highcharts.

When using the pivot table, we initially observe only the table itself, then we can select the desired chart in the toolbar, and it will replace the table. In other words, the table will be hidden, and the graph will be visible. In the same way, we can hide the chart and show the table again by clicking the corresponding button in the toolbar. But in the examples of using Highcharts it can be seen that Highcharts are added only under the table, i.e. the table will always be visible, and the chart switch in the toolbar will not interact with the Highcharts.

My question is, is there an existing solution to replace the built-in charts with Highcharts so that you can use the toolbar to switch between the table and the Highchart, hiding the table and showing the chart and vice versa? And if there is no such solution, could you please give advice on how to implement this?

Thank you.

Attachments:
Untitled.jpg

1 answer

Public
Vera Didenko Vera Didenko Flexmonster October 29, 2019

Hello, Yegor,
 
Thank you for your question.
 
Yes, achieving the described behavior is possible.
 
We kindly suggest the following approach:

  1. Upon showing the desired highchart, hide Flexmonster's container with CSS: https://jsfiddle.net/flexmonster/6nq4mwt9/
  2. Change the needed Toolbar Tabs' behavior to fit your use case. 
    Please keep in mind that Highcharts will not be exported or printed when using Flexmonster API calls or the Toolbar Tabs.
    If you would like to use the Toolbar Tabs, their behavior may need to be overridden. 
    This can be done by customizing the Toolbar.
    Please see our customizing the Toolbar tutorial for guidance: https://www.flexmonster.com/doc/customizing-toolbar/

 
Please let us know if you have any questions.
 
Best Regards,
Vera

Please login or Register to Submit Answer