Using multiple amcharts in a single sammy js view - json

Question

Using the following Sammy JS view, AmCharts and JSON, I'm trying to load more than one graph into the "insights" view:
this.get('#/insights', function (context) {
context.$element().html("<div id='chartdiv'></div>");
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"titles": [{
"text": "Header Text",
"size": 16
}],
"dataProvider": [{
"product": "Product 1",
"value": 23
}, {
"product": "Product 2",
"value": 56
}, {
"product": "Product 3",
"value": 21
}],
"titleField": "product",
"valueField": "value",
"labelRadius": 5,
"startEffect": "bounce",
"startDuration": 2,
"labelRadius": 15,
"radius": "22%",
"innerRadius": "60%",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>"
//"labelText": "[[title]]"
});
});
I tried adding another div into:
context.$element().html("<div id='chartdiv'></div><div id='chartdiv2'></div>");
with associated amcharts data:
var chart = AmCharts.makeChart("chartdiv2", {
"type": "pie",
"theme": "none",
"titles": [{
"text": "Header Text",
"size": 16
}],
"dataProvider": [{
"product": "Product 1",
"value": 23
}, {
"product": "Product 2",
"value": 56
}, {
"product": "Product 3",
"value": 21
}],
"titleField": "product",
"valueField": "value",
"labelRadius": 5,
"startEffect": "bounce",
"startDuration": 2,
"labelRadius": 15,
"radius": "22%",
"innerRadius": "60%",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>"
//"labelText": "[[title]]"
});
});
I can't seem to get the second graph to display.

Answer 1

I have used multiple piecharts this way, you can refer to my code below:-
/*
This code block i have used in php for dynamic data, you can ignore this block.
This is just to give you an idea about i am using data to populate the chart.
*/
$return['chartdata'] = $dataset;
$return['titlefield'] = $_POST['display_field'];
$return['valuefield'][] = 'count';
$return['valuefield'][] = 'value';
echo json_encode($return);
/*
Ends Here.
*/
/* Below code is what will help you. */
for (var i = 0; i < result.valuefield.length; i++) {
$('#charts_div').append("<div class='col-md-6'><div id='chartdiv"+(i+1)+"' style='width: 640px; height: 400px;'></div></div>");
var chart = new AmCharts.AmPieChart();
chart.pathToImages = gbl_js+"amcharts/images/";
chart.dataProvider = result.chartdata;
chart.titleField = result.titlefield;
chart.valueField = result.valuefield[i];
chart.legend = {
"markerType": "circle",
"position": "bottom",
"marginRight": 80,
"autoMargins": false,
"valueText": ""
};
chart.exportConfig = {
"menuTop": 0,
"menuItems": [{
"icon": gbl_js+'amcharts/images/export.png',
"items": [{
"title": 'JPG',
"format": 'jpg'
}, {
"title": 'PNG',
"format": 'png'
}, {
"title": 'SVG',
"format": 'svg'
}, {
"title": 'PDF',
"format": 'pdf'
}]
}
};
chart.write('chartdiv'+(i+1));
};