Is it possible to swap out toolbar calling native fm charts to another charting library?

Answered
Chern Yu Zi asked on November 21, 2024

Hi,

Would like to inquire if it is possible for the toolbar 'Charts' button to list a menu of charts that on which any are selected, render amcharts charts into the space below the toolbar, instead of the native FM charts? 

Thanks!

 

1 answer

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster November 21, 2024

Hello,

Thank you for contacting us.

We recommend using the beforetoolbarcreated event to customize the Toolbar.

Firstly, you should find the index of the Chart tab in the tabs array. Knowing the necessary index, you can replace the tab containing the default Flexmonster Charts with your custom tab. For example:

let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
beforetoolbarcreated: customizeToolbar
});
function customizeToolbar(toolbar) {
let tabs = toolbar.getTabs();
toolbar.getTabs = function() {
let indexOfChartTab = tabs.findIndex(tab => tab.id == "fm-tab-charts");
tabs[indexOfChartTab] = {
id: "fm-tab-charts",
title: "amCharts",
icon: this.icons.charts,
menu: [
{
args: "column",
handler: <your-function-createAmChartsColumn>,
icon: <your-icon>,
title: "column"
},
{
args: "bar",
handler: <your-function-createAmChartsBar>,
icon: this.icons.charts,
title: <your-icon>
}]
};
return tabs;
}
}

You can find more details on customizing the toolbar in our documentation: http://flexmonster.com/doc/customizing-toolbar/.

Also, please check the example of positioning charts: https://jsfiddle.net/flexmonster/uqwxdpoy/. As you can see, the Highcharts chart is placed in the same position as the original Flexmonster Charts. You are welcome to use the same approach for amCharts.

Regarding the integration with amChart, we have Flexmonster Connector for amCharts that provides the necessary methods for integration. The detailed tutorial you can find in our documentation: https://www.flexmonster.com/doc/integration-with-amcharts/. Feel free to check some ready-to-use examples of integration with amCharts: https://www.flexmonster.com/examples/#amcharts.

Please let us know if it works for you. Looking forward to hearing from you.

Kind regards,
Nadia

Please login or Register to Submit Answer