FusionCharts - 243606_stacked Area with line
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>
<body>
<button onclick = "reload()">Reload</button>
<div id="chartContainer0"></div>
<div id="chartContainer1"></div>
<div id="chartContainer2"></div>
<div id="chartContainer3"></div>
<div id="chartContainer4"></div>
</body>
JavaScript
var tab = [];
var conf = null;
FusionCharts.ready(function() {
conf = {
"type" : "stackedcolumn3dlinedy",
"dataLoadStartMessage": "Fetching data",
//"renderAt": "chartContainer",
"width" : "550",
"height" : "300",
"dataFormat" : "json",
"dataSource" : {
"chart" : {
"caption" : "Revenues and Profits",
"subCaption" : "For last year",
"xAxisname" : "Month",
"pYAxisName" : "Amount (In USD)",
"sYAxisName" : "Profit %",
"numberSuffix" : "%",
"sNumberSuffix" : "%",
"sYAxisMaxValue" : "50",
"paletteColors" : "#0075c2,#1aaf5d,#f2c500",
"baseFontColor" : "#333333",
"baseFont" : "Helvetica Neue,Arial",
"captionFontSize" : "14",
"subcaptionFontSize" : "14",
"subcaptionFontBold" : "0",
"showBorder" : "0",
"bgColor" : "#ffffff",
"showShadow" : "0",
"canvasBgColor" : "#ffffff",
"canvasBorderAlpha" : "0",
"divlineAlpha" : "100",
"divlineColor" : "#999999",
"divlineThickness" : "1",
"divLineIsDashed" : "1",
"divLineDashLen" : "1",
"divLineGapLen" : "1",
"usePlotGradientColor" : "0",
"showplotborder" : "0",
"showXAxisLine" : "1",
"xAxisLineThickness" : "1",
"xAxisLineColor" : "#999999",
"showAlternateHGridColor" : "0",
"showAlternateVGridColor" : "0",
"legendBgAlpha" : "0",
"legendBorderAlpha" : "0",
"legendShadow" : "0",
"legendItemFontSize" : "10",
"legendItemFontColor" : "#666666",
"showValues" : "1",
"alpha" : 0,
},
"categories" : [ {
"category" : [ {
"label" : "Jan"
}, {
"label" : "Feb"
}, {
"label" : "Mar"
}, {
"label" : "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label":...