A Column, Line and Area Combi Chart

A column, line and area combination chart using the datasource attribute

by Ashok Mandal

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-fusioncharts.js"></script>
<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="app">
    <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
    ></fusioncharts>
</div>

Vue

// register VueFusionCharts plugin
Vue.use(VueFusionCharts, FusionCharts)

var dataSource = {
    "chart": {
        "caption": "Expense Analysis",
        "subCaption": "ACME Inc.",
        "xAxisname": "Region",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fusion"
    },
    "categories": [{
        "category": [{
        "label": "East"
        }, {
        "label": "West"
        }, {
        "label": "South"
        }, {
        "label": "North"
        }]
    }],
    "dataset": [{
        "seriesName": "Actual Expenses",
        "data": [{
        "value": "1441290"
        }, {
        "value": "855912"
        }, {
        "value": "911404"
        }, {
        "value": "648136"
        }]
    }, {
        "seriesName": "Budgeted Expenses",
        "renderAs": "line",
        "data": [{
        "value": "1297430"
        }, {
        "value": "776485"
        }, {
        "value": "685352"
        }, {
        "value": "726791"
        }]
    }, {
        "seriesName": "Unknown liabilities",
        "renderAs": "area",
        "showAnchors" : "0",
        "data": [{
        "value": "143860"
        }, {
        "value": "79427"
        }, {
        "value": "226052"
        }, {
        "value": "78655"
        }]
    }]
}; 

var app = new Vue({
    el: '#app',
    data: {
        type: 'mscombi2d',
        width: '100%',
        height: '400',
        dataFormat: 'json',
        dataSource: dataSource
    }
});