FusionCharts - Column2D Chart

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.zune.js"></script>
 <!-- HTML Placeholder for the Chart --> 
<div id="chart-container">FusionCharts will render here</div>

JavaScript

var chartData = [
    {
        "label": "Feb 4 2015",
        "value": "62.01"
    },
    {
        "label": "Mar 1, 2015",
        "value": "66.18"
    },
    {
        "label": "April 2, 2015",
        "value": "66.05"
    },
    {
        "label": "May 1, 2015",
        "value": "69.5"
    },
    {
        "label": "Jun 16, 2015",
        "value": "72.94"
    },
    {
        "label": "Jul 1, 2015",
        "value": "73.38"
    }
];

var chartProperties = {
  "caption": "Price of Petrol in Bangalore",
  "subCaption": "In the last 6 months",
  "xAxisName": "Petrol Price Change Date",
  "yAxisName": "Petrol Price",
  "numberPrefix": "Rs ",
  "rotatevalues": "1",
  "theme": "zune",
  //attribute to activate the border
  "showBorder": "1",
  //color of the border
  "borderColor": "#000000",
  //thickness of the border
  "borderThickness": "3",
  //opacity of the border
  "borderAlpha": "100",
   //hex code of the colors to be used for the background
  "bgColor": "EEEEEE,CCCCCC",

  //opaqueness of each color
  "bgAlpha" : "70,80",

  //contribution of each color to the gradient of the background
  "bgRatio": "60, 40",

  /*
  setting the canvas background as transparent so that the
  chart background is seen through the canvas.
  */
  "canvasBgAlpha": "0",
};

var petrolPriceChart = new FusionCharts({
  type: 'column2d',
  renderAt: 'chart-container',
  width: '550',
  height: '350',
  dataFormat: 'json',
  dataSource: {
    "chart": chartProperties,
    "data": chartData
  }
});


FusionCharts.ready(function () {
  petrolPriceChart.render();
});