FusionCharts - Stacked 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>
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn3dline',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'xml',
dataSource: '<chart caption="Cost Analysis" subcaption="Last Year" numberprefix="$" xaxisname="Quarter" yaxisname="Cost" theme="fusion">\
<categories>\
<category label="Quarter 1" />\
<category label="Quarter 2" />\
<category label="Quarter 3" />\
<category label="Quarter 4" />\
</categories>\
<dataset seriesname="Fixed Cost">\
<set value="235000" />\
<set value="225100" />\
<set value="222000" />\
<set value="230500" />\
</dataset>\
<dataset seriesname="Variable Cost">\
<set value="230000" />\
<set value="143000" />\
<set value="198000" />\
<set value="327600" />\
</dataset>\
<dataset seriesname="Budgeted cost" renderas="Line" showvalues="0">\
<set value="455000" />\
<set value="334000" />\
<set value="426000" />\
<set value="403000" />\
</dataset>\
</chart>'
}).render();
});