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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h3>Chart Rendered by using Chart properties</h3>
        <!-- Column 2D chart showing variation of price of petrol in the last six months -->
        <div id="chart-container">FusionCharts will render here</div>

      </div>
      <div class="col-md-6">
        <h3>Chart Rendered by using APIs</h3>
        <div id="api-chart-container">FusionCharts will render here</div>
        <input type="button" id="background-btn" class="btn btn-primary" value="Modify Background"/>
        <input type="button" id="canvas-btn" class="btn btn-primary" value="Modify Canvas"/>
        <input type="button" id="dataplot-btn" class="btn btn-primary" value="Modify Data Plot"/>

      </div>
    </div>
    <!-- Displaying the values of the properties applied -->
    <div class="row">
      <div class="col-md-offset-6 col-md-6">
        <br/>
        <span id="chartAttributeValues"></span>
    </div>

  </div>

JavaScript

var chartData = [
    {
        "label": "Feb 4 2015",
        "value": "62.01"
    },
    {
        "label": "Mar 1, 2015",
        "value": "66.18",
        //overriding default color and transparency values
    	"color": "#8e0000",
    	"alpha": "100",
         //properties to override individual plot border
	    "dashed":0
    },
    {
        "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",
  //background color of the canvas
  "canvasBgColor":"#1790e1",

  //transparency of the canvas background
  "canvasBgAlpha":"10",
  //properties for defining canvas border
  "showCanvasBorder": "1",
  "canvasBorderColor":"#666666",
  "canvasBorderThickness": "4",
  "canvasBorderAlpha": "80",
   //properties for customizing data plot background
  "paletteColors": "#008ee4, #9b59b6, #6baa01, #e44a00",
  "usePlotGradientColor" : 1,
  "plotGradientColor":"#ffffff",
   //properties to configure plot border
  "showPlotBorder": "1",
 ...