#8139

by amcharts

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>

CSS

#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

AmCharts.easeInOutExpo = function (x, t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
}

var chart;
var legend;
var selected;

var types = [{
    type: "Fossil Energy",
    percent: 70, 
    color: "#ff9e01",
    subs: [
        { type: "Oil", percent: 15 },
        { type: "Coal", percent: 35 },
        { type: "Nuclear", percent: 20 }
    ]},
{
    type: "Green Energy",
    percent: 30,
    color: "#b0de09",
    subs: [
        { type: "Hydro", percent: 15 },
        { type: "Wind", percent: 10 },
        { type: "Other", percent: 5 }
    ]}
];

function generateChartData () {
    var chartData = [];
    for (var i = 0; i < types.length; i++) {
        if (i == selected) {
            for (var x = 0; x < types[i].subs.length; x++) {
                chartData.push({
                    type: types[i].subs[x].type,
                    percent: types[i].subs[x].percent,
                    color: types[i].color,
                    pulled: true
                });
            }
        }
        else {
            chartData.push({
                type: types[i].type,
                percent: types[i].percent,
                color: types[i].color,
                id: i
            });
        }
    }
    return chartData;
}

AmCharts.ready(function() {
    // PIE CHART
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = generateChartData();
    chart.startEffect = "easeInOutExpo";
    chart.titleField = "type";
    chart.valueField = "percent";
    chart.outlineColor = "#FFFFFF";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;
    chart.colorField = "color";
    chart.pulledField = "pulled";
    
    // ADD TITLE
    chart.addTitle("Click a slice to see the details");
    
    // AN EVENT TO HANDLE SLICE CLICKS
    chart.addListener("clickSlice", function (event) {
        if (event.dataItem.dataContext.id !=...