Model: pieChartAM.zip

How to Make Your Own

Start by dragging out AM|Charts from the components menu
Resize it to the desired size
Drag out another component nearby (in the example we are using a button)
Select the AM|Chart and the other component and right click, and create group
Delete the other component, so it is just the AM|Chart in the group
Tag the group (ex. pieChartAM)

Next we will add the Program

Go to programs in the left menu
Click the plus to add a new program, and it will pull up the program editor
In the Program Target Filter type the tag applied to your group (our example above was pieChartAM)
Click the three dots in the top right corner, and select variables
Click the + icon to add a new Variable
Click the gear that appears as you hover over the new variable
On the first line type point, and on the second line type id==$virtualPointRef
Click the gray save button
Copy and paste the code below into the main section
Click the blue save

finstack.eval(point.query, function(data){
queryData=data.result.toObj();
queryData.forEach(function (item)
{
    item.curValPretty   = GetPrettyValue(item);   
});
function handleZoom(ev){
var myPointId = ev.dataItem.dataContext.id;
top.app.ShowRelatedBubbles(myPointId,myPointId,false);
}
var chart = AmCharts.makeChart(Chart.view, {
"type": "pie",
"theme": "light",
"dataProvider": queryData,
"valueField": "curVal",
"titleField": "navName",
"balloonText": "[[navName]]: <b>[[curValPretty]]</b>",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
},
"listeners": [ {
"event": "clickSlice",
"method": handleZoom
}]
} );
});

Set the Query

Under Properties → advanced

Add string tag query (to group/model) with value set to the query

Call the tag query and set the value to the query

Using this Chart with Ractive

Start by dragging an AM Chart into the workspace. Next right click and select show/hide so that you will no longer be able to see it

Next drag out Ractive and properties menu with Ractive selected, click Open Editor

In the Ractive Editor copy and paste these lines of code below into the template section and init section and hit save

Template

<div id="pieChart" style="width:100%; height:100%;"></div>

Init

this.ractive.fire("obtainData");

Next were going to add the query

Under Properties and advanced add a tag with the value set to the desired query

Next were going to add the program shown above.

Start by going to Programs in the left menu and clicking the + icon.
Under Program Name, name the program
Under Program Target Filter type in stackRactive
Click the three dots in the top right corner and select variables
Click on the gear that appears as you hover over the word this
Turn on invokes the function and change the dropdown to custom event
In the box below type in obtainData and click the gray save button
Then click the + icon to add a new variable and call it point and in the box under type in id==$virtualPointRef
Turn on invokes the function and change the dropdown to tag change
In the box below type in curVal and click the gray save button
Next copy and paste the code below into the main part of the program.

var template = this;
var queryData = query("stackRactive");
finstack.eval(point.query, function(data){
queryData=data.result.toObj();
var test = template.view.querySelector("#pieChart");
function handleZoom(ev){
var myPointId = ev.dataItem.dataContext.id;
top.app.ShowRelatedBubbles(myPointId,myPointId,false);
}
var chart = AmCharts.makeChart(test, {
"type": "pie",
"theme": "light",
"dataProvider": queryData,
"valueField": "curVal",
"titleField": "navName",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
},
"listeners": [ {
"event": "clickSlice",
"method": handleZoom
}]
} );
});

Click the blue save button and your done!

Simple Pie Chart

How to Make Your Own

Using this Chart with Ractive