asked on November 9, 2020
Hi ya Support,
We are trying to integrate Highcharts with Flexmonster and we are running into problem in the drilldown view. It seems it doesn't change the y-axis label when drilling down so viewers of just the graph aren't sure what dimension they are seeing.
From your example:
Anyway to fix this?
Thanks,
Patrick
⋅ November 10, 2020
Hello, Patrick,
Thank you for writing to us.
We kindly suggest using the Highcharts setTitle method together with Highcharts drilldown and drillup events.
For instance:
function createAndUpdateChart(chartConfig) {
let defaultTitleXAxis = "Color";
let drilldownTitleXAxis = "Region";
chartConfig.title.text = "With Drilldown";
chartConfig.chart.events = {
drilldown: function(e) {
this.xAxis[0].setTitle({ text: drilldownTitleXAxis });
},
drillup: function(e) {
this.xAxis[0].setTitle({ text: defaultTitleXAxis });
}
};
Highcharts.chart('highcharts-container', chartConfig);
}
We have modified the provided JSFiddle to illustrate this approach: https://jsfiddle.net/flexmonster/93kcqabv/
Please let us know if this helps.
Kind regards,
Vera
⋅ December 20, 2020
Sorry, got pulled off onto something else.
Thank you for the code example. However, we are letting our users select charts arbitrarily and we'd rather not code this ourselves manually since we are already selecting data from flexmonster.
I looked in the chartConfig object, and it has "Region" and "Count of Business Type" available, but it doesn't have the column name "Business Type". Is this omission perhaps a bug? It would be nice if we could get at it within the chartConfig or if it was populated correctly during drilldown in highcharts to begin with that would be best!
I've updated the fiddle so that it responds to the pivot table above rather than having its own config. I've also included a console.log to show chartConfig state with missing "Business Type" value.
https://jsfiddle.net/hdtL4f31/10/
Thanks,
Patrick
⋅ December 21, 2020
Hello, Patrick,
Thank you for your response.
Regarding "Business Type" not being displayed in the chart configuration:
We would like to kindly explain that this is expected: the chart configuration returned by the Highcharts connector corresponds to the Highcharts documentation.
Our team has prepared a quick fix for the issue with the Y-axis label not changing when drilling down.
Please see the sample project in the attachments "flexmonster-highcharts-drilldown-fix.zip".
The project contains the following:
flexmonster.highcharts.js - the fixed version of Flexmonster Highcharts connector.index.html - a Flexmonster and Highcharts example with drilldown using the updated flexmonster.highcharts.js file.
Could you please let us know if this works fine for you?
If so, our team will add this fix to the upcoming minor release of Flexmonster with the ETA 28th of December.
Looking forward to your feedback.
Kind regards,
Vera
⋅ December 24, 2020
Looks great, thanks so much!
Patrick
⋅ December 30, 2020
Hello, Patrick,
We are happy to inform you that our team has added the fix to the latest version of Flexmonster.
Should any questions arise, please feel free to reach out.
Kind regards,
Vera