FusionCharts - Gallery Example - Scroll Column 2D Chart in JavaScript
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!--
A Scroll Column 2D Chart showing sales trend for last two years.
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'scrollColumn2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"baseFont": "\"Source Sans Pro\", sans-serif",
"decimalSeparator": ",",
"thousandSeparator": " ",
"decimals": 2,
"baseFontSize": 14,
"borderThickness": 0,
"plotBorderThickness": 0,
"canvasBorderThickness": 0,
"caption": "",
"showAlternateHGridColor": 0,
"zeroPlaneThickness": 1,
//"labelDisplay": "none",
//"labelStep": 1,
//"labelBinSize": 0,
"flatScrollBars": 1,
"numVisiblePlot": "5",
//"scrollheight": 15,
"bgColor": "#FFFFFF",
"canvasBgColor": "#FFFFFF",
"bgAlpha": 0,
"canvasBgAlpha": 0,
"numberScaleValue": "1000,1000,1000",
"numberScaleUnit": "k,M,G",
"use3DLighting": false,
"legendPosition": "bottom",
"legendItemFontSize": 12,
"legendBorderAlpha": 0,
"legendShadow": 0,
"showShadow": false,
"enableSlicing": false,
"slicingDistance": 0,
"enableMultiSlicing": false,
"numbersuffix": "€",
"showLegend": false,
"showValues": false,
//"scrollPadding": 10,
"usePlotGradientColor": false,
"setAdaptiveYMin": true,
"yAxisValuesPadding": 10,
"labelPadding": 10,
"canvasPadding": 25,
"paletteColors": "#7B68EE"
},
"categories": [{
"category": [{
"label": "JUIN"
},
{
"label": "JUIL"
},
{
"label": "AOÛT"
},
{
"label": "SEPT"
},
{
"label": "OCT"
},
{
"label": "NOV"
},
{
"label": "DÉC"
},
...