FusionCharts - Gallery Example - Pie 2D Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<!-- Basic sample for Pie 2D chart -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {

  var myDataSource = {
    "chart": {
      "caption": "Split of Visitors by Age Group",
      "subCaption": "Last year",
      "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
      "bgColor": "#ffffff",
      "showBorder": "0",
      "use3DLighting": "0",
      "showShadow": "0",
      "enableSmartLabels": "0",
      "startingAngle": "0",
      "showPercentValues": "1",
      "showPercentInTooltip": "0",
      "decimals": "1",
      "captionFontSize": "14",
      "subcaptionFontSize": "14",
      "subcaptionFontBold": "0",
      "toolTipColor": "#ffffff",
      "toolTipBorderThickness": "0",
      "toolTipBgColor": "#000000",
      "toolTipBgAlpha": "80",
      "toolTipBorderRadius": "2",
      "toolTipPadding": "5",
      "showHoverEffect": "1",
      "showLegend": "1",
      "legendBgColor": "#ffffff",
      "legendBorderAlpha": '0',
      "legendShadow": '0',
      "legendItemFontSize": '10',
      "legendItemFontColor": '#666666'
    },
    "data": [{
      "label": "Teenage",
      "value": "1250400"
    }, {
      "label": "Adult",
      "value": "1463300"
    }, {
      "label": "Mid-age",
      "value": "1050700"
    }, {
      "label": "Senior",
      "value": "491000"
    }]
  };

  var ageGroupChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: myDataSource,
    events: {
      "rendered": function(evt, arg) {
        var sum = 0;
        
        //Calculate the total values
        for (i = 0; i < myDataSource.data.length; i++) {
          //console.log(myDataSource.data[i].value);
          sum += parseInt(myDataSource.data[i].value);
        }
        
        //Find the percentage of each data object and assign to "displayValue" attribute
        for (i = 0; i < myDataSource.data.length; i++) {
          
          percent = (Math.round((myDataSource.data[i].value / sum * 100) * 10) / 10);

         ...