How to create column chart using Anychart widget with passing data dynamically? Need step by step process.

0
How to create column chart using Anychart widget with passing data dynamically? Need step by step process.
asked
2 answers
0

Hey Vijay, 

 

I would suggest you to go through the following documentation that will help you to set up the anychart widget in your application.

 

https://docs.mendix.com/appstore/modules/any-chart/

https://community.mendix.com/link/space/ui-&-front-end/exchanges/146

 

Here is a sandbox application as well to test:

https://mydemoversion8-sandbox.mxapps.io/p/charts

 

Hope this helps!

 

answered
0

The way to use any charts and populate it dynamically is as follows:

  • You search for an example JSON in the any chart documentation.
[ {
  "x": [ "giraffes", "orangutans", "monkeys" ],
  "y": [ 25, 12, 20 ],
  "type": "bar",
  "orientation": "v",
  "name": "Animals"
} ]
  • Right click > Add other > JSON structure and add that structure to a JSON.

image.png

  • Right click > Add other > Import mapping. Select all elements from the JSON.

image.png

  • Click map automatically. The DB entities will be created automatically. You can now remove the import mapping as you won't need it anymore.
  • Create a microflow to create/populate the automatically mapped entities. 
    • eg. First create Root,
    • Then create JsonObject and associate it with the Root
    • Then create several X objects / Wrapper objects and associate those with the JSON object
    • Do the same for Y / Wrapper_2. 
  • Right click > Add other > export mapping. Use this export mapping to convert the whole structure back into a JSON.
  • Add this export mapping to the microflow. Pass the Root as the parameter. As a result you'll get the JSON as a string
  • The microflow should then return an object with the JSON string. 
  • Create a page and add a dataview to it. Use the previously created microflow as the datasource.
  • Use the JSON attribute on the chart widget (placed inside the dataview).

image.png

 

  • The chart is now using data from the microflow. You can use the "Toggle Editor" to edit the chart's data/layout while developing.

image.png

Regardless of the JSON / type of chart chosen, the process to dynamically fill a chart should be something similar to this.

 

Hope this helps.

answered