I want to display a chart using fusion charts with stacked column chart along with area chart.
Is there an option to create the same? I went through the fusion charts website but did not find that option is combination charts.
Below is my code:
FusionCharts.ready(function () {
var salesAnlysisChart = new FusionCharts({
type: 'mscombi2D',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"categories": [{
"category": [{
"label": "25 Jun - \r\n01 Jul"
},
{
"label": "02 Jul - \r\n08 Jul"
},
{
"label": "09 Jul - \r\n15 Jul"
},
{
"label": "16 Jul - \r\n22 Jul"
}]
}],
"chart": {
"showPlotBorder": "0",
"showValues": "0",
"showToolTip": "1",
"caption": "Line1",
"YAxisName": "Demand",
"showBorder": "0",
"canvasBorderThickness": "1",
"usePlotGradientColor": "0",
"showAlternateHGridColor": "0",
"showToolTipShadow": "1",
"toolTipBgAlpha": "90",
"bgColor": "#ffffff",
"canvasBorderColor": "#f2f2f2",
"xAxisName": "Timeline",
"toolTipBorderColor": "#333333",
"toolTipBgColor": "#ffffff",
"legendBorderThickness": "0",
"divLineColor": "#f2f2f2",
"legendShadow": "0"
},
"dataset": [{
"seriesname": "Five Days",
"color": "#92d3e4",
"data": [{
"value": 4262
},
{
"value": 4524
},
{
"value": 4804
},
{
"value": 4528
}]
},
{
"seriesname": "Overtime (1 Day)",
"color": "#2ea2c0",
"data": [{
"value": 1067
},
{
"value": 619
},
{
"value": 762
},
{
"value": 1009
}]
},
{
"seriesname": "Overtime (2 Days)",
"color": "#366082",
"data": [{
"value": 887
},
{
"value": 910
},
{
"value": 1152
},
{
"value": 1110
}]
},
{
"anchorHoverEffect": "1",
"seriesname": "Demand",
"showValues": "0",
"anchorRadius": "3",
"color": "#e9f057",
"data": [{
"value": 4.9E-323
},
{
"value": 4230
},
{
"value": 4230
},
{
"value": 4230
}],
"anchorHoverRadius": "5",
"parentYAxis": "S",
"renderAs": "line",
"anchorBgColor": "#e9f057"
},
{
"seriesname": "Cum. Capacity",
"color": "#2ea2c0",
"renderAs": "area",
"data": [{
"value": 4262
},
{
"value": 4566
},
{
"value": 5140
},
{
"value": 5438
}]
}],
"trendlines": [{
"line": [{
"displayValue": "5 Day Capacity",
"isTrendZone": "1",
"color": "#da433f",
"thickness": "2",
"valueOnRight": "1",
"startValue": 4468,
"valuePadding": "10",
"tooltext": "5 Day Capacity: 4468.0"
}]
}]
}
}).render();
});
The column charts are not stacked. If i use type='stackedcolumn2dline' then the area chart become stacked too. Is there a way to get this done?
Any help would be appreciated.
Thank You.
