asked on February 4, 2021
Hi,
I've gotten the Flexmonster tool working with Chart.js to display a basic bar chart in a div below the grid as you guys do in most of your demos like here: https://jsfiddle.net/flexmonster/qf73smhf/. However, what we are looking to do is to have the Chart.js charts appear in place of the standard chart offerings that you guys have. So when we go to the menu Charts -> Bar (for example) I'd like to display my Chart.js chart in place of the grid instead of it being in some other div below or to the right. When I go to Charts->Pie I'd like to see the Charts.js pie chart, etc. etc. So basically we'd like the same default charting functionality and UI that you guys have available but with different charts.
Maintaining the ability to Export the charts via all of the default options is important and being able to have the chart filters and ability to select measures for certain charts like you guys already have would also be preferred. I've looked at some of the code in the flexmonster.toolbar.js file and tracing the menu code leads me to a pivot.showCharts call each time any of the chart menu items is clicked but I can't tell what showCharts() is doing internally to render the charts in that area of the UI that you guys have them in.
Any help on how to achieve this would be much appreciated!
⋅ February 4, 2021
Hi Darius,
Thank you for posting your question.
This can be achieved with Flexmonster toolbar customization and the getData API call.
More specifically, you can use the beforetoolbarcreated event handler to modify the handler functions for tabs in the toolbar and link them to the charting library of your choice.
You would also need to define the corresponding methods with the getData() function, which would display different chart types when necessary.
We've prepared a quick JSFiddle sample illustrating this approach – feel free to check it out: https://jsfiddle.net/flexmonster/zLj2aw38/.
Please let us know if this helps.
Best regards,
Mykhailo
⋅ February 4, 2021
Darius,
Regarding your requirement to display the charts in the same container as the grid, please refer to the following forum thread where my colleague Illia explains the solution in detail: https://www.flexmonster.com/question/add-new-chart-type/.
Mykhailo
⋅ February 11, 2021
Hi Darius,
Hope you're doing well!
Just checking in to ask if you've had a chance to look through our response. Have you found it helpful?
We would be happy to hear your feedback.
Best regards,
Mykhailo
⋅ February 15, 2021
Hi Mykhailo,
Thank you for the response. It was definitely helpful and lead me in the right direction. I ran into a few additional challenges with the Chart.JS implementation in particular as it uses a canvas instead of just a div but I think I've gotten through most of that.
Regarding the Export functionality, I did still want to explore being able to print the charts, export to PDF and all of the other export options that you have available for your default charts. Would you be able to provide me with some direction on how to do that? None of the fiddles seem to have anything like that implemented.
⋅ February 16, 2021
Hi Darius,
It is good to hear you've had some progress with your integration!
Native exporting for custom use cases like this is not often requested, therefore we don't have any ready-to-use samples for that.
Nevertheless, you could try implementing something similar with the help of html2canvas and jsPDF libraries, which are used by Flexmonster for image and PDF exporting respectively.
As for printing and HTML exporting, vanilla JavaScript is used by Flexmonster, so it would probably be even simpler to implement these types of export.
As a side note, here's a Stack Overflow thread discussing Chart.js PDF exporting with jsPDF, in case this helps: https://stackoverflow.com/questions/43140467/page-with-multiple-chart-js-charts-to-pdf.
Kind regards,
Mykhailo
⋅ February 16, 2021
This information was very helpful. Thank you for your assistance Mykhailo! I'll post again if any more help is needed.
Thanks,
Darius
