FusionCharts.ready(function() {
var salesChart = new FusionCharts({
type: 'msspline',
renderAt: 'chart-container2',
width: '800',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "cost",
"subcaption": "",
"xAxisName": "Date",
"yAxisName": "Cumulative",
"linethickness": "",
"labelstep":"2",
"showvalues": "0",
"formatnumberscale": "1",
"drawanchors":"1",
"divLineAlpha": "40",
"anchoralpha": "0",
"animation": "1",
"legendborderalpha": "20",
"drawCrossLine": "1",
"crossLineColor": "#0d0d0d",
"crossLineAlpha": "100",
"tooltipGrayOutColor": "#80bfff",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "1 Jan-2017"
}, {
"label": "10 Jan-2017"
}, {
"label": "20 Jan-2017"
}, {
"label": "1 Feb-2017"
}, {
"label": "10 Feb-2017"
}, {
"label": "20 Feb-2017"
}, {
"label": "1 March-2017"
}, {
"label": "10 March-2017"
}, {
"label": "20 March-2017"
}, {
"label": "1 April-2017"
}, {
"label": "10 April-2017"
}, {
"label": "20 April-2017"
}, {
"label": "1 May-2017"
}, {
"label": "10 May-2017"
}, {
"label": "20 May-2017"
}]
}],
"dataset": [{
"seriesname": "Revised Baseline",
"data": [{
"value": "0"
}, {
"value": "3600"
}, {
"value": "3200"
}, {
"value": "3900"
}, {
"value": "4500"
}, {
"value": "6180"
}, {
"value": "6225"
}, {
"value": "6245"
},{
"value": "6512"
},
{
"value": "7423"
},
{
"value": "7557"
},
{
"value": "7910"
},
{
"value": "9559"
},
{
"value": "9080"
},
{
"value": "9320"
}]
}, {
"seriesname": "Earned Cost",
"data": [{
"value": "0"
}, {
"value": "2600"
}, {
"value": "2900"
}, {
"value": "2700"
}, {
"value": "4300"
}, {
"value": "3180"
}, {
"value": "4225"
}, {
"value": "5245"
},{
"value": "5512"
},
{
"value": "6423"
},
{
"value": "6557"
},
]
},
{
"seriesname": "Commitments Cost",
"data": [{
"value": "0"
}, {
"value": "3600"
}, {
"value": "3900"
}, {
"value": "4700"
}, {
"value": "4500"
}, {
"value": "7180"
}, {
"value": "7225"
}, {
"value": "7345"
},{
"value": "8512"
},
{
"value": "8223"
},
{
"value": "9557"
},
]
}]
}
})
.render();
});
FusionCharts.ready(function() {
var salesChart = new FusionCharts({
type: 'msline',
renderAt: 'chart-container',
width: '800',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Scope",
"subcaption": "",
"xAxisName": "Scope",
"yAxisName": "Story Points",
"linethickness": "2",
"numberPrefix": "",
"showvalues": "0",
//"formatnumberscale": "1",
"drawanchors":"1",
"divLineAlpha": "40",
//"anchoralpha": "0",
"animation": "1",
"legendborderalpha": "20",
"drawCrossLine": "1",
"crossLineColor": "#0d0d0d",
"crossLineAlpha": "100",
"tooltipGrayOutColor": "#80bfff",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "1"
}, {
"label": "2"
}, {
"label": "3"
}, {
"label": "4"
}, {
"label": "5"
}, {
"label": "6"
}, {
"label": "7"
}, {
"label": "8"
}, {
"label": "9"
}, {
"label": "10"
}, {
"label": "11"
}, {
"label": "12"
}, {
"label": "13"
}, {
"label": "14"
}, {
"label": "15"
}, {
"label": "16"
}, {
"label": "17"
}, {
"label": "18"
}, {
"label": "19"
}, {
"label": "20"
}]
}],
"dataset": [{
"seriesname": "Estimation at completion",
"data": [{
"value": "0"
}, {
"value": "20"
}, {
"value": "36"
}, {
"value": "74"
}, {
"value": "126"
}, {
"value": "180"
}, {
"value": "225"
}, {
"value": "245"
}, {
"value": "300"
}, {
"value": "340"
}, {
"value": "390"
}, {
"value": "410"
}, {
"value": "460"
}, {
"value": "520"
}, {
"value": "550"
}, {
"value": "610"
}, {
"value": "660"
}, {
"value": "690"
}, {
"value": "740"
}, {
"value": "790"
}]
}, {
"seriesname": "Scope",
"data": [{
"value": "719 "
}, {
"value": "688"
}, {
"value": "730"
}, {
"value": "735"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}, {
"value": "816"
}]
},
{
"seriesname": "Actual",
"data": [{
"value": "0 "
}, {
"value": "20"
}, {
"value": "36"
}, {
"value": "74"
}, ]
},{
"seriesname": "Original Plan",
"data": [{
"value": "0"
}, {
"value": "40"
}, {
"value": "56"
}, {
"value": "94"
}, {
"value": "156"
}, {
"value": "200"
}, {
"value": "245"
}, {
"value": "265"
}, {
"value": "320"
}, {
"value": "360"
}, {
"value": "410"
}, {
"value": "430"
}, {
"value": "490"
}, {
"value": "550"
}, {
"value": "580"
}, {
"value": "640"
}, {
"value": "690"
}, {
"value": "720"
}, {
"value": "770"
}, {
"value": "845"
}]
}]
}
})
.render();
});
<div id="main">
<div id="chart-container">FusionCharts will render here</div>
<div id="chart-container2">FusionCharts will render here</div>
</div>
#main {
width: 1300px;
}
#chart-container {
width: 800px;
float: left;
}
#chart-container2 {
width: 500px;
float: right;
}