FusionCharts - Gallery Example - Bar 2D Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
by Moonmi Sonowal
January 07, 2015
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<!-- Simple implementation of the Bar 2D chart -->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var topStores = new FusionCharts({
type: 'bar2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top 5 Stores by Sales today is a new day to storage in some cow field",
"alignCaptionWithCanvas": "1",
// "labelDisplay":'wrap',
"maxLabelWidthPercent":'15',
"useEllipsesWhenOverflow":'1',
"baseFont" : 'Open Sans',
"baseFontSize" : '10',
"captionFontSize":"10",
"showPlotBorder" : '0',
"paletteColors" : '6CAEC7',
"usePlotGradientColor" : '0',
"showYAxisValues" : '0',
"showLegend" : "0",
"bgAlpha" : "0",
"bgColor" : "647881",
"showBorder" : "0",
"showCanvasBorder" : "0",
"showAlternateHGridColor" : '0',
"numDivLines" : "0",
"showAlternateVGridColor" : '0',
"showLabels" : "1",
"showValues" : "1",
"showPercentValues" : '1',
"legendBgAlpha" : "0",
"legendShadow" : "0",
"legendIconScale" :"2",
"legendBorderAlpha" : "0",
//"enableSmartLabels" : "1",
//"manageLabelOverflow" : "1",
"use3DLighting" : "0"
},
"data": [
{
"label": "Bakersfield Central Bakersfield Central Bakersfield Central",
"value": "880000"
},
{
"label": "Garden Groove harbour",
"value": "730000"
},
{
...