FusionCharts - Gallery Example - Column2D Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
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>
<!-- Column 2D chart showing Monthly revenues for last year -->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"canvasPadding": "30",
"caption": "New Graph",
"captionFont": "Arial",
"captionFontColor": "#000000",
"captionFontSize": "14",
"exportAction": "download",
"exportAtClient": "1",
"exportEnabled": "1",
"exportHandler": "https://cluster.apri...rtfusionchart/",
"exportTargetWindow": "_self",
"exportfilename": "New Graph",
"exportparameters": "exportTargetWindow=_self",
"labelFont": "Arial",
"labelFontColor": "#333333",
"labelFontSize": "12",
"legendAllowDrag": "1",
"lineColor": "FF9900",
"outCnvBaseFont": "Arial",
"outCnvBaseFontColor": "#333333",
"outCnvBaseFontSize": "12",
"plotFillColor": "FF9900",
"theme": "standard",
"toolbarX": 801,
"valueFont": "Helvetica",
"valueFontColor": "#333333",
"valueFontSize": "12",
"showLabels": "1"
},
"data": [{
"label": "1284",
"value": "2"
}, {
"label": "3085",
"value": "1"
}, {
"label": "3917",
"value": "2"
}, {
"label": "4398",
"value": "1"
}, {
"label": "4402",
"value": "1"
}, {
"label": "4406",
"value": "1"
}, {
"label": "4409",
"value": "1"
}, {
"label": "4411",
"value": "1"
...