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: 'msstackedcolumn2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Total Cost",
"xaxisname": "Utility",
"pyaxisname": "Cost($)",
"syaxisname": "",
"palette": "3",
"showalternatevgridcolor": "1",
"useroundedges": "0",
"bgalpha": "0",
"showvalues": "0",
"showborder": "0",
"pyaxismaxvalue": "1000000",
"pyaxisminvalue": "1",
"bgcolor": "FFFFFF",
"adjustvdiv": "0",
"numdivlines": "9",
"formatnumberscale": "0",
"basefontcolor": "555555",
"outcnvbasefontcolor": "555555",
"showsum": "0",
"syaxismaxvalue": "0",
"syaxisminvalue": "0",
"showdivlinesecondaryvalue": "0",
"showsecondarylimits": "0",
"showlegend": "1",
"exportenabled": "1",
"exportatclient": "0",
"showexportdialog": "0",
"exportshowmenuitem": "0"
},
"categories": [
{
"size": "9",
"font": "Verdana",
"category": [
{
"label": "Electricity"
},
{
"label": "Natural Gas"
},
{
"label": "Other Fuels"
},
{
"label": "Waste"
},
{
"label": "Water"
}
]
...