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">FusionCharts XT will load here!</div>
<div id="chartContainer2">FusionCharts XT will load here!</div>
<div id="chartContainer3">FusionCharts XT will load here!</div>
<div id="chartContainer4">FusionCharts XT will load here!</div>
<div id="chartContainer5">FusionCharts XT will load here!</div>
<div id="chartContainer6">FusionCharts XT will load here!</div>
<div id="chartContainer7">FusionCharts XT will load here!</div>
<div id="chartContainer8">FusionCharts XT will load here!</div>
<div id="chartContainer9">FusionCharts XT will load here!</div>
<div id="chartContainer10">FusionCharts XT will load here!</div>
<div id="chartContainer11">FusionCharts XT will load here!</div>
<div id="chartContainer12">FusionCharts XT will load here!</div>
<div id="chartContainer13">FusionCharts XT will load here!</div>
<div id="chartContainer14">FusionCharts XT will load here!</div>
<div id="chartContainer15">FusionCharts XT will load here!</div>
<div id="chartContainer16">FusionCharts XT will load here!</div>
<div id="chartContainer17">FusionCharts XT will load here!</div>
<div id="chartContainer18">FusionCharts XT will load here!</div>
<textarea rows="40" cols="80" id="messageWindow"></textarea>
</body>
JavaScript
var tab = [];
var conf = null;
FusionCharts.ready(function() {
conf = {
"type" : "column3d",
//"renderAt": "chartContainer",
"width" : "550",
"height" : "300",
"dataFormat" : "json",
"dataSource" : {
"chart" : {
"caption" : "Revenues and Profits",
"subCaption" : "For last year",
"xAxisname" : "Month",
"YAxisName" : "Amount (In USD)",
"yAxisMaxValue" : "2",
"numdivlines": "1",
"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,
},
"dataset" : [ {
"seriesName" : "Good",
"color" : "#66FF33",
"data" : [ {
"value" : "0"
}, {
"value" : "1"
}, {
"value" : "1"
}
]
} ]
}
};
console.log('started' + new Date());
for (var i = 0; i < 1; i++) {
tab.push(new FusionCharts(conf));
}
console.log(tab.length);
var myEventListener = function(eventObj, eventArgs) {
console.log(eventObj.eventType
+ " was raised by the chart whose ID is "
+ eventObj.sender.id + new...