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",
//overriding default color and transparency values
"color": "#8e0000",
"alpha": "100"
},
{
"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"
};
var petrolPriceChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat:...