FusionCharts - Gallery Example - Multi-Series Column 2D 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>
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'hled',
      renderAt: 'chart-container',
      id: 'myChart',
      width: '500',
      height: '150',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Harry's Supermart - Bakersfield Central",
          "subCaption": "Footfall vs Conversion ratio",
          "tickValueStep": "2", //n-th value gets displayed
          "numberSuffix": "%",
          "showTickMarks": "1",
          "showTickValues": "1",
          "theme": "fusion"
        },
        "colorrange": {
          "color": [{
            "minvalue": "100",
            "maxvalue": "76",
            "label": "Bad",
            "code": "#00FF00"
          }, {
            "minvalue": "75",
            "maxvalue": "36",
            "label": "Average",
            "code": "#FFFF00"
          }, {
            "minvalue": "0",
            "maxvalue": "35",
            "label": "Good",
            "code": "#FF0000"
          }]
        },
        "value": "62"
      }
    })
    .render();
});