FusionCharts - Gallery Example - Bar 2D Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var topStores = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top 5 Stores by Sales",
"subCaption": "Last month",
"yAxisName": "Sales (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placeValuesInside": "1",
"valueFontColor": "#ffffff",
"showAxisLines": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"alignCaptionWithCanvas": "0",
"showAlternateVGridColor": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
//attributes use to set the yaxis limits
"yAxisMinValue":"0",
"yAxisMaxvalue":"110",
},
"data": [{
"label": "Bakersfield Central",
"value": "88"
}, {
"label": "Garden Groove harbour",
"value": "73"
}, {
"label": "Los Angeles Topanga",
"value": "59"
}, {
"label": "Compton-Rancho Dom",
"value": "52"
}, {
"label": "Daly City Serramonte",
"value": "33"
}]
}
})
.render();
});