FusionCharts - Error Line Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

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>
<!-- ErrorLine chart: Showing estimated Procurement from Top 2 Suppliers.
 
Here we show an estimated percentage of supplies in different categories for suppliers in coming year with a possible deviation as error values.

     Deviation from theme :
        # showvalues - Set to 0
        # halferrorbar - Set to 0
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var estProcChart = new FusionCharts({
    type: 'errorline',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "xaxisname": "Category",
        "yaxisname": "Item (%)",
        "numberSuffix": "%",
        "caption": "Estimated Procurement from Top 2 Suppliers",
        "subcaption": "(Next Year)",
        "showvalues": "0",
        "halferrorbar": "0",
        "plottooltext": "$seriesname, $label: $value%"
      },
      "categories": [{
        "category": [{
            "label": "Food & Beverage"
          },
          {
            "label": "Apparel"
          },
          {
            "label": "Electronics"
          },
          {
            "label": "Baby Products"
          }
        ]
      }],
      "dataset": [{
        "seriesname": "MB Suppliers",
        "data": [{
            "value": "28",
            "errorvalue": "2"
          },
          {
            "value": "16",
            "errorvalue": "2"
          },
          {
            "value": "24",
            "errorvalue": "3"
          },
          {
            "value": "32",
            "errorvalue": "2"
          }
        ]
      }, {
        "seriesname": "VST Group Co Ltd ",
        "data": [{
            "value": "12",
            "errorvalue": "2"
          },
          {
            "value": "30",
            "errorvalue": "4"
          },
          {
            "value": "35",
            "errorvalue": "5"
          },
          {
            "value": "14",
            "errorvalue": "2"
          }
        ]
      }]
    }
  }).render();

});