V3: Two pie chats sharing a legend
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/pie.js" type="text/javascript"></script>
<div id="chartdiv1" style="width: 49%; height: 362px; float: left;"></div>
<div id="chartdiv2" style="width: 49%; height: 362px;"></div>
<div id="legenddiv" style=""></div>
JavaScript
var chart, chart2;
var legend;
var chartData1 = [
{
"country": "Czech Republic",
"litres": 301.9
},
{
"country": "Ireland",
"litres": 201.1
},
{
"country": "Germany",
"litres": 165.8
}
];
var chartData2 = [
{
"country": "Czech Republic",
"litres": 201
},
{
"country": "Ireland",
"litres": 90
},
{
"country": "Germany",
"litres": 240
}
];
AmCharts.ready(function () {
// PIE CHART 1
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData1;
chart.titleField = "country";
chart.valueField = "litres";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;
chart.labelText = "";
chart.margins = 0;
var legend = new AmCharts.AmLegend();
legend.valueText = "";
chart.addLegend(legend);
chart.write("chartdiv1");
// PIE CHART 2
chart2 = new AmCharts.AmPieChart();
chart2.dataProvider = chartData2;
chart2.titleField = "country";
chart2.valueField = "litres";
chart2.outlineColor = "#FFFFFF";
chart2.outlineAlpha = 0.8;
chart2.outlineThickness = 2;
chart2.labelText = "";
chart2.write("chartdiv2");
});