Table of Contents

Description

This Pie Chart can be customized to show data based on any axon query defined by the integrator.

This also allows for the user to click on any slice and call open the relative bubbles. 

Completed Model (Basic)

Download: PieChart_DynamicExample.zip

1. To upload go to Folio app and select "restore". 
   
   
   
2. For pie chart to populate you need to add a 'query' string tag to the model and plug in your axon query as the value.
   

Video Tutorial

Example: VIDEO

Model Tags (Group)

myPieChart (marker) - this allows the program to recognize what its running on

...

*Note: If you want to just use the amChart and not include any other components, then apply the above tags to the amChart itself. If you decide afterwards to add labels or other compoents, then you'll need to group them together. Then remove the tags on the amChart and apply to the group instead.

Example Program Code

Program Target: myPieChart 

...

• in the program, the line that says the following: "var chart = AmCharts.makeChart( Chart.view, { " please note that the "Chart.view" is based on whatever the name of your chart is. So if you renamed yoru original amChart, please make sure to update that in the code. .

How To Make your Own

1. bring out an amChart & and extra component (extra component will be for step 3 only..any component is fine)
2. Select chart & extra component 
3. Right click and select "create group" so a group is made with the amChart & the extra component
4. Go to your layers panel and delete the etxra component
5. on the group add a myPieChart tag (this is an arbitrary tag, you may change this to be whatever you'd like)
6. create a new program
7. have the program run on myPieChart (or whatever unique tag you added to the model group)
8. create a variable on the variable menu that is called "point" and query for '  id==$virtualPointRef  ', have it be invoked by a "Tag Change" function which should be 'curVal'
9. copy the code above
10. Select group, go to basic properties panel & change the Width & Height from 'px' to '%' percent and make it 100% on both the group, and the chart component. (use the layers panel to select the am chart within the group)
11. You can test your pie chart model's code by adding a 'query' string tag and plugging in your axon query as the value. Go to preview to ensure it works. Delete query tag before saving it as a model
12. save your model
13. Now every time you bring out your pie chart model you can simply add a "query" string tag and fill out the value with your axon query which will then populate the data onto the pie chart.

...

*Note: If followed exact steps above and not working, then you may have an issue with your axon query or your set up may be wrong. Contact support@j2inn.com if you need help troubleshooting your chart. 

Try This!

3D Pie Chart

Add the following code to your program to make the chart 3d!

...