Switching chart type on the fly between Serial and Pie
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/serial.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 class="type-selector">
Select chart type:
<label><input type="radio" name="type" value="line" onclick="setType(this.value);" checked="checked" /> Line</label>
<label><input type="radio" name="type" value="area" onclick="setType(this.value);" /> Area</label>
<label><input type="radio" name="type" value="column" onclick="setType(this.value);" /> Column</label>
<label><input type="radio" name="type" value="pie" onclick="setType(this.value);" /> Pie</label>
</div>
<div id="chartdiv" class="chartdiv" style="display: block;"></div>
<div id="chartdiv2" class="chartdiv" style="display: none;"></div>
CSS
body {
font-family: Verdana;
}
.chartdiv {
width : 100%;
height : 300px;
font-size : 11px;
}
.type-selector {
padding: 10px;
background: #ddd;
}
.type-selector label {
margin: 0px 10px;
cursor: pointer;
}
JavaScript
// set chart data
var chartData = [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}];
// create serial chart
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": chartData,
"startDuration": 1,
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"lineAlpha": 1,
"lineThickness": 2,
"type": "line",
"valueField": "visits"
}],
"categoryField": "country"
});
// create pie chart
var chart2 = AmCharts.makeChart("chartdiv2", {
"type": "pie",
"dataProvider": chartData,
"startDuration": 1,
"valueField": "visits",
"titleField": "country"
});
function setType (type) {
switch(type) {
case 'line':
chart.graphs[0].type = 'line';
chart.graphs[0].lineAlpha = 1;
chart.graphs[0].fillAlphas = 0;
chart.validateNow();
break;
case 'area':
chart.graphs[0].type = 'line';
chart.graphs[0].lineAlpha = 1;
chart.graphs[0].fillAlphas = 0.3;
chart.validateNow();
break;
case 'column':
chart.graphs[0].type = 'column';
chart.graphs[0].lineAlpha = 0;
chart.graphs[0].fillAlphas = 0.5;
chart.validateNow();
break;
case 'pie':
document.getElementById('chartdiv').style.display = 'none';
document.getElementById('chartdiv2').style.display = 'block';
chart2.invalidateSize();
chart2.animateAgain();
return;
}
...