Add drill-down to chart

Use LinkedCharts to quickly add drill-down to charts

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"
    ref="fc"
    ></fusioncharts>
</div>

Vue

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

var dataSource = {
    "chart": {
        "caption": "Sales of top 3 juice flavors last year",
        "subcaption": "Click on a column to see details",
        "xaxisname": "Flavor",
        "yaxisname": "Amount (In USD)",
        "numberprefix": "$",
        "theme": "fusion",
        "rotateValues": "0"
    },
    "data": [
        {
            "label": "Apple",
            "value": "810000",
            "link": "newchart-xml-apple"
        },
        {
            "label": "Cranberry",
            "value": "620000",
            "link": "newchart-xml-cranberry"
        },
        {
            "label": "Grape",
            "value": "350000",
            "link": "newchart-xml-grape"
        }],
        "linkeddata": [
            {
                "id": "apple",
                "linkedchart": {
                "chart": {
                    "caption": "Apple Juice - Quarterly Sales",
                    "subcaption": "Last year",
                    "numberprefix": "$",
                    "theme": "fusion",
                    "rotateValues": "0",
                    "plottooltext": "$label, $dataValue,  $percentValue"
                },
                "data": [{
                    "label": "Q1",
                    "value": "157000",
                    "displayValue": "Q1, $157K"
                }, {
                    "label": "Q2",
                    "value": "172000",
                    "displayValue": "Q2, $172K"
                }, {
                    "label": "Q3",
                    "value": "206000",
                    "displayValue": "Q3, $206K"
                }, {
                    "label": "Q4",
                    "value": "275000",
                    "displayValue": "Q4, $275K"
                }]
                }
            },
            {
                "id": "cranberry",
                "linkedchart": {
                "chart": {
                   ...