mcombi line chart
Created using FusionCharts Suite XT - www.fusioncharts.com
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>
<!-- Configuring background color in Column2D chart using: Attribute: # bgColor - Set to #DDDDDD # bgAlpha - Set to 50 Deviation from theme: # canvasBgAlpha - Set to 0 as the purpose of the chart to show background cosmetics. -->
<div id="chart-container">FusionCharts will render here</div>
CSS
body {
padding: 10px;
}
JavaScript
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'scrollcombidy2d',
renderAt: 'chart-container',
width: '500',
height: '430',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenues and Profits",
"subcaption": "(FY 2012 to FY 2013)",
"captionfontsize": "14",
"subcaptionfontsize": "14",
"subcaptionfontbold": "0",
"xaxisname": "Month",
"pyaxisname": "Amount (In USD)",
"syaxisname": "Profit %",
"numberprefix": "$",
"snumbersuffix": "%",
"syaxismaxvalue": "50",
"palettecolors": "#0075c2,#1aaf5d,#f2c500",
"showalternatehgridcolor": "0",
"showplotborder": "0",
"useplotgradientcolor": "0",
"basefontcolor": "#333333",
"basefont": "Helvetica Neue,Arial",
"showborder": "0",
"bgcolor": "#ffffff",
"showshadow": "0",
"canvasbgcolor": "#ffffff",
"showcanvasborder": "1",
"legendborderalpha": "0",
"legendshadow": "0",
"showvalues": "1",
"divlinealpha": "100",
"divlinecolor": "#999999",
"divlinethickness": "1",
"divlinedashed": "1",
"divlinedashlen": "1",
"divlinegaplen": "1",
"numvisibleplot": "12",
"flatscrollbars": "1",
"scrollheight": "10",
"pyaxismaxvalue": "26000"
},
"categories": [{
"category": [ {
"label": "Jan 2012"
...