FusionCharts - Column 2D Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by sanjuktamukherjee

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!--
    A simple Column 2D chart showing monthly revenue of Harry's SuperMart for last year.
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'mscolumn2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
  "chart": {
    "showvalues": "0",
    "showborder": "1",
    "bgcolor": "",
    "bold": "1",
    "basefont": "Arial",
    "basefontsize": "11",
    "basefontcolor": "",
    "animation": "0",
    "palettecolors": "",
    "formatpercentscale": "0",
    "stack100percent": "1",
    "canvasbgalpha": "60",
    "divlinecolor": ""
  },
  "categories": [
    {}
  ],
  "dataset": [
    {
      "seriesname": "Closed"
    },
    {
      "seriesname": "Closed Late"
    },
    {
      "seriesname": "On-track"
    },
    {
      "seriesname": "Due 2 wks"
    },
    {
      "seriesname": "Late"
    },
    {
      "seriesname": "No Data"
    }
  ],
  "styles": {
    "definition": [
      {
        "name": "myToolTipFont",
        "type": "font",
        "font": "Arial",
        "size": "10",
        "color": "000000"
      },
      {
        "name": "myLegendFont",
        "type": "font",
        "font": "Arial",
        "size": "9"
      },
      {
        "name": "myBevel",
        "type": "bevel",
        "distance": "3"
      },
      {
        "name": "myShadow",
        "type": "shadow",
        "angle": "45",
        "distance": "3"
      }
    ],
    "application": [
      {
        "toobject": "ToolTip",
        "styles": "myToolTipFont"
      },
      {
        "toobject": "Legend",
        "styles": "myLegendFont"
      },
      {
        "toobject": "DATAPLOT",
        "styles": "myBevel, myShadow"
      }
    ]
  }
}
    });
    revenueChart.render();
});