FusionCharts - Gallery Example - Doughnut 2D Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Gagan Sikri

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<!-- Doughnut chart example with: 
# Center label in 2D chart 
# Disabled tool-tips are disabled, but extended center label info on hover

-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "paletteColors": "#f15c80,#8085e9,#f7a35c,#90ed7d,#434348,#7cb5ec",
        "plotToolText": "<div>$label<br/> Browser Share: <b>$value%</b></div>",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "use3DLighting": "0",
        "showShadow": "1",
        "enableSmartLabels": "0",
        "startingAngle": "0",
        "showLabels": "0",
        "enablerotation": "0",
        "showvalues": "0",
        "centerLabelBold": "0",
        "showHoverEffect": "1",
        "showTooltip": "1",
        "tooltipbgalpha": "90",
        "toolTipPadding": "7",
        "toolTipBorderColor": "595959",
        "toolTipBorderRadius": "3",
        "showToolTipShadow": "1"
      },
      "annotations": {
        "width": "50",
        "height": "30",
        "autoScale": "1",
        "showbelow": "0",
        "groups": [{
          "id": "user-images",
          "items": [{
            "id": "dyn-label",
            "type": "text",
            "fillcolor": "#ffffff",
            "fontsize": "11.5",
            "bold": "1",
            "text": "Firefox",
            "x": "$chartcenterX + 50",
            "y": "$chartcenterX - 15"
          }, {
            "id": "dyn-label",
            "type": "text",
            "fillcolor": "#ffffff",
            "fontsize": "11.5",
            "bold": "1",
            "text": "IE",
            "x": "$chartcenterX - 10",
            "y": "$chartcenterX - 10"
          }, {
            "id": "dyn-label",
            "type": "text",
            "fillcolor": "#ffffff",
            "fontsize": "11.5",
            "bold": "1",
            "text": "Chrome",
            "x": "$chartcenterX - 35",
            "y": "$chartcenterX - 110"
          }, {
            "id": "dyn-label",
            "type": "text",
          ...