FusionCharts - Gallery Example - Doughnut 2D Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<html style="height:100%">

  <body style="height:100%">
    <div id="chart-container" style="height:100%">FusionCharts will render here</div>
  </body>

</html>

JavaScript

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'angulargauge',
    renderAt: 'chart-container',
    width: '100%',
    height: '100%',
    dataFormat: 'json',
    dataSource: {
        chart: {
          //origw: "500",
          //origh: "272",
          manageResize: "1",
          caption: "Caption",
          // subcaption: 'Last week',
          bgColor: "#ffffff",
          usePlotGradientColor: "1",
          pivotRadius: "10",
          pivotFillColor: "#5599CC",
          pivotFillAlpha: "100",
          pivotFillMix: " ",
          valueFontSize: "35",
          valueBorderColor: "#793DC0",
          valueFontColor: "#3F903E",
          valueBorderRadius: "3",
          lowerLimit: "0",
          upperLimit: "1",
          lowerLimitDisplay: "0",
          upperLimitDisplay: "1",
          showValue: "0.35",
          valueBelowPivot: "1",
          theme: "fusion"
        },
        colorRange: {
          color: [
            {
              gradient: "1",
              minValue: "0",
              maxValue: "0.35",
              code: "356634, 45AD44"
            },
            {
              minValue: "0.35",
              maxValue: "0.5",
              code: "B5820D, F7AB01"
            },
            {
              minValue: "0.5",
              maxValue: "1",
              code: "D50000, 851211"
            }
          ]
        },
        dials: {
          dial: [
            {
              value: "0.35",
              bgColor: "#793DC0"
            }
          ]
        }
      }
  }).render();
});