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: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"forceyaxisvaluedecimals": "1",
"showvalues": "0",
"showlimits": "1",
"showborder": "0",
"bgcolor": "FFFFFF",
"linethickness": "2",
"canvasborderthickness": "0",
"canvasborderalpha": "0",
"showlegend": "0",
"useplotgradientcolor": "0",
"showalternatehgridcolor": "0",
"labeldisplay": "WRAP",
"showalternatevgridcolor": "0",
"setadaptiveymin": "1",
"animation": "0",
"zeroplanethickness": "1",
"staggerlines": "2",
"yaxismaxvalue": "3.2",
"yaxisminvalue": "-0.8",
"numdivlines": "4",
"pyaxisname": "Growth Contribution",
"yaxisname": "Growth Contribution",
"numberscalevalue": "1000,1000,1000",
"snumberscalevalue": "1000,1000,1000",
"yaxisvaluedecimals": "2",
"numbersuffix": "%",
"snumbersuffix": "%",
"syaxisvaluedecimals": "0",
"showdivlinesecondaryvalue": "0",
"showsecondarylimits": "0"
},
"styles": {
"definition": [
{
"name": "Shadow_1",
"type": "Shadow",
"angle": "270",
"color": "#CCCCCC",
"alpha": "100",
"blurx": "0",
"blury": "0",
"strength": "2",
"distance": "1"
},
{
"name": "Shadow_2",
"type": "Shadow",
"angle": "90",
"color": "#CCCCCC",
"alpha": "100",
"blurx": "0",
"blury": "0",
"strength": "2",
"distance": "1"
}
],
"application": [
{
"toobject": "CANVAS",
"styles": "Shadow_1,Shadow_2"
}
]
},
"categories": [
{
"category": [
{
"label": "MAT Oct 2013"
},
{
"label": "MAT Nov 2013"
},
{
"label": "MAT Dec...