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

FlexMonster & HighCharts Integration - Chart Dropdown

Answered
Michael Jaworski asked on July 28, 2024

We have integrated HighCharts and FlexMonster to use (initially) only one chart from HighCharts - Funnel. This works, but our product team wants us to make the Chart Measures Selection dropdown in the top-left (see picture) change the chart.

We know how to read the list from flexMonster.getMeasures() to get the whole list, but we do not know how to read the selection from the chart dropdown and also watch when the dropdown changes.

Should we just use jQuery to watch that dropdown? We thought there may be a better API through FlexMonster.

Thank you.

3 answers

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster July 30, 2024

Hello, Michael!

Thank you for reaching out to us.

Kindly note that control to select an active measure for charts was intended to work with our Flexmonster Pivot Charts, and there is no API call to customize it for the 3rd party charting libraries.

For the described case with Highcharts, our team recommends adding a mutation observer for the dropdown. Knowing when a new active measure is selected, it is possible to pass the slice with the new measure from flexmonster.getOptions().chart.activeMeasure to the getData() function and redraw the chart.
We have prepared a JSFIddle example to illustrate the idea: https://jsfiddle.net/flexmonster/a0f7xm4b/.

Hope you will find our answer helpful.
Looking forward to hearing from you.

Kind regards,
Solomiia

Public
Michael Jaworski July 30, 2024

Solomiia,

Thank you! This works for us. Really appreciate the solution.

Best, Michael

Public
Solomiia Andrusiv Solomiia Andrusiv Flexmonster July 31, 2024

Hello, Michael!

Thank you for your feedback.

We are happy to hear our solution was helpful.

Feel free to reach out to us in case of any other questions.

Kind regards,
Solomiia

Please login or Register to Submit Answer