Updating pie chart via form data
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<input type="text" id="title-0" value="" placeholder="Slice #1 title" />
<input type="text" id="value-0" value="" placeholder="Slice #1 value" /><br />
<input type="text" id="title-1" value="" placeholder="Slice #2 title" />
<input type="text" id="value-1" value="" placeholder="Slice #2 value" /><br />
<input type="text" id="title-2" value="" placeholder="Slice #3 title" />
<input type="text" id="value-2" value="" placeholder="Slice #3 value" /><br />
<input type="text" id="title-3" value="" placeholder="Slice #4 title" />
<input type="text" id="value-3" value="" placeholder="Slice #4 value" /><br />
<input type="text" id="title-4" value="" placeholder="Slice #5 title" />
<input type="text" id="value-4" value="" placeholder="Slice #5 value" /><br />
<input type="button" value="Update chart" onclick="updateChart();" />
CSS
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"dataProvider": [
{
"country": "Lithuania",
"litres":500.10
},
{
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
}],
"valueField": "litres",
"titleField": "country",
"exportConfig":{
menuItems: [{
icon: '/lib/3/images/export.png',
format: 'png'
}]
}
});
function updateChart () {
chart.dataProvider = [];
for (var i = 0; i <= 4; i++) {
if (Number(document.getElementById('value-'+i).value)) {
chart.dataProvider.push({
"country": document.getElementById('title-'+i).value,
"litres": Number(document.getElementById('value-'+i).value)
})
}
}
console.log(chart.dataProvider);
chart.validateData();
}