FusionCharts - Column 3D Chart in JavaScript
Created using FusionCharts Suite XT - www.fusioncharts.com
by ramesh valasa
HTML
<script src="http://static.fusioncharts.com/code/3.4.0-alpha1/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/3.4.0-alpha1/fusioncharts.charts.js"></script>
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'column3d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Monthly revenue in last year",
"xAxisName": "Month",
"yAxisName": "Amount",
"numberPrefix": "$",
"paletteColors": "#008ee4",
"showBorder": "1",
"borderAlpha": "20",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"captionpadding": "20",
"divLineAlpha": "50"
},
"data": [{
"label": "Jan",
"value": "420000"
}, {
"label": "Feb",
"value": "810000"
}, {
"label": "Mar",
"value": "720000"
}, {
"label": "Apr",
"value": "550000"
}, {
"label": "May",
"value": "910000"
}, {
"label": "Jun",
"value": "510000"
}, {
"label": "Jul",
"value": "680000"
}, {
"label": "Aug",
"value": "620000"
}, {
"label": "Sep",
"value": "610000"
}, {
"label": "Oct",
"value": "490000"
}, {
"label": "Nov",
"value": "900000"
}, {
"label": "Dec",
"value": "730000"
}]
}
});
revenueChart.render();
});