asked on December 29, 2022
Good morning,
i am integrating amcharts in angular and i am having some problem in managing radar charts, i wanted to ask if you could share an example of managing an amcharts radar in angular ?
A thousand thanks.
⋅ December 30, 2022
Hello, Giuseppe!
Thank you for writing to us.
Our team would like a bit more details about the issue with integrating Flexmonster together with amCharts in Angular. Could you please describe the behavior you are facing and provide screenshots of possible errors in the browser's console and server running the Angular app?
We also prepared an example project using Radar Chart with Flexmonster in Angular. You are welcome to look through the sample by downloading this archive: https://www.flexmonster.com/uploads/2022/12/ng-fm-amcharts.zip
Use the following commands from the project's root to run it:
npm install
ng serve
Please let us know if the sample project helped to get everything working on your end.
Looking forward to hearing from you.
Best Regards,
Maksym
⋅ January 10, 2023
Hi, Giuseppe!
Hope you are doing well.
We would like to know if you had time to test the provided sample project using Amcharts Radar Chart in Angular.
Please let us know if it was helpful.
Best Regards,
Maksym
⋅ January 17, 2023
Hello, Giuseppe!
Our team is wondering if you had time to look at the provided example.
We will be glad to hear your feedback.
Best Regards,
Maksym
⋅ January 17, 2023
Good morning, Thanks a lot for your reply, I've looked at the example provided and it works perfectly. Thank you
⋅ January 17, 2023
Hello, Giuseppe!
Thank you for your feedback.
We are glad that the example project with Amcharts Radar Chart in Angular helped you.
Feel free to contact us if any other questions arise.
Best Regards,
Maksym
⋅ January 18, 2023
Good morning, I wanted to ask you if: 1) it was possible to manage the graphs from external libraries (such as the radar) as if it were an internal graph (bar, pie, etc.) with the possibility of making the choice from the graph menu, filter management and also the possibility of clicking on the graph to get the detail in the table. 2) in addition to the amchart4 radar I can also integrate the amchart5 radars (there are examples of Radar Chart Visualizing Yearly Activities) and make them navigable. Looking forward to your reply Best regards
⋅ January 20, 2023
Hi, Giuseppe!
Thank you for your questions. You are welcome to see the answers below:
If we understood you correctly, you want to use the controls from Flexmonster Pivot Charts with amCharts. Part of this functionality is possible to implement (check this example). The general implementation steps explaining the code are described below:
Display amCharts over Flexmonster container
It is not possible to replace the Flexmonster charts container entirely, so instead, the amCharts container is placed in front of Flexmonster using CSS. Next, the afterchartdraw event is used for handling the event when users open a chart. On afterchartdraw, the z-index value for the amCharts container and the container's size and coordinates are calculated to fit into the #pivot-container div (see lines 14-22).
Filtering the chart
Since the filter controls from Flexmonster Pivot Charts apply filters on the whole component, any filter changes will trigger the update callback handler of the getData function. If the amCharts instance is redrawn on updates, then chart filters will work without any modifications.
Navigation between grid and charts via the Toolbar
Flexmonster allows customizing the Toolbar by subscribing to the beforetoolbarcreated event. In this event handler, you can create new buttons for opening new chart types (lines 55-66). Also, you would have to modify the function that switches the component to a grid view so that it hides the amCharts container (lines 47-52).
For more information about toolbar customization, see the following guide: https://www.flexmonster.com/doc/customizing-toolbar/
Implementing the drill-through view for amCharts
Using Flexmonster's built-in drill-through view with amCharts would not be possible. However, you can create a custom drill-through view. The general idea is the following:
1) Use the on click/double-click amCharts events to retrieve the data from the chart element.
2) Display the raw data records in your own pop-up over the amCharts chart. Chart element data can be used for filtering the dataset and showing only the data necessary for drill-through. As an idea, you can display the data records inside a new Flexmonster instance using the flat grid layout.
It is also worth mentioning that the provided example uses amCharts 5. Since the input data format and data formatters remained the same for both amCharts 4 and amCharts 5, the Flexmonster amCharts connector is fully compatible with both amCharts versions.
Please let us know if the provided solution would work for you.
Best Regards,
Maksym
⋅ January 31, 2023
Hi, Giuseppe!
Hope you are doing well.
We are wondering if you had time to check the provided example, which uses Flexmonster Pivot Charts controls with amCharts.
Please let us know if such a solution would work for you.
Best Regards,
Maksym
⋅ February 7, 2023
Hi, Giuseppe!
Our team would like to know if you tested the provided approach for using amCharts with Flexmonster.
We will be glad to hear your feedback.
Best Regards,
Maksym
