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: 'area2d',
      id: "myChart",
      renderAt: 'chart-container',
      width: '500',
      height: '250',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Quarterly Revenue",
          "subCaption": "Last year",
          "xAxisName": "Quarter",
          "yAxisName": "Amount (In USD)",
          "numberPrefix": "$",
          //Canvas padding
          "canvasPadding": "30",
          //Theme
          "theme": "fusion"
        },
        "data": [{
          "label": "First Quarter",
          "value": "420000"
        }, {
          "label": "Second Quarter",
          "value": "810000"
        }, {
          "label": "Third Quarter",
          "value": "720000"
        }, {
          "label": "Fourth Quarter",
          "value": "550000"
        }]
      },
      "events": {
        "beforeRender": function(evtObj, argObj) {
          var radioContainer = document.createElement("div"),
            flag = 1;
          radioContainer.setAttribute("id", "datalabels-radio-container");
          radioContainer.style.cssText = 'margin-top: 10px;width: 500px;text-align: center;';
          radioContainer.innerHTML = '<label style="margin-right:10px;display: inline;"><input type="radio" id="withCP" name="padding" value="withCP" CHECKED > With Padding</label><label style="display: inline;"><input type="radio" id="withoutCP" name="padding" value="withoutCP"> Without Padding</label>';
          argObj.container.appendChild(radioContainer);

          var radElem,
            radio = radioContainer.getElementsByTagName('input');
          for (i = 0; i < radio.length; i++) {
            radElem = radio[i];
            if (radElem.type === 'radio') {
              radElem.onclick = function() {
                val = this.getAttribute('value');
                if (val === "withCP" && flag !== 1) {
                 ...