FusionCharts - Combination 2D Chart with dual y-axis in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by ramesh valasa

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>
<!-- Sample for : Combination Charts. Combination charts can plot column, area and line in a single chart. This sample is showing Revenue, Profit and Profit percentage comparison in same canvas area. As Revenue and Profit both are amount related, these two are shown in primary y axis whereas Profit Percentage is plotted on the secondary axis. Chart used: Combination 2D Chart with dual y-axis. -->

JavaScript

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'mscombidy2d',
    renderAt: 'chart-container',
    width: '550',
    height: '300',
    dataFormat: 'json',
    dataSource: {
    "categories": [
        {
            "category": [
                {
                    "label": "CRED"
                },
                {
                    "label": "DEBI"
                },
                {
                    "label": "SERVAM_P"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Amount",
            "color": "20c920",
            "data": [
                {
                    "label": "Amount",
                    "value": "816489.22"
                },
                {
                    "label": "Amount",
                    "value": "280121.99"
                },
                {
                    "label": "Amount",
                    "value": "1096611.21"
                }
            ],
            "renderas": "column"
        },
        {
            "seriesname": "# Total",
            "color": "005fbf",
            "data": [
                {
                    "label": "Amount",
                    "value": "12"
                },
                {
                    "label": "Amount",
                    "value": "23"
                },
                {
                    "label": "Amount",
                    "value": "35"
                }
            ],
            "parentYAxis": "S",
            "renderAs": "column"
        }
    ],
    "styles": [
        {
            "application": [
                {
                    "toobject": "CAPTION",
                    "styles": "caption"
                },
                {
                    "toobject": "SUBCAPTION",
                    "styles": "subcaption"
                },
                {
                    "toobject": "DATAVALUES",
                    "styles": "smallFont"
                },
 ...