Usage of FusionCharts methods (API)

Change a chart attribute by calling FusionCharts setChartAttribute API

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 class="buttons">
        <button class='btn btn-outline-secondary btn-sm' @click="changeCaption">Change Caption: Test Caption</button>
        <button class='btn btn-outline-secondary btn-sm' @click="changeXAxisName">Change X-Axis Name: Test X-AXIS</button>
        <button class='btn btn-outline-secondary btn-sm' @click="changeYAxisName">Change Y-Axis Name: Test Y-AXIS</button>
        <button class='btn btn-outline-secondary btn-sm' @click="resetAttr">Reset</button>
    </div>
</div>

CSS

.btn {
    display: inline-block;
    outline:none;
    line-height: 1;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.65;
    border-radius: .5rem;
    transition: all .35s ease;
    margin: 3px;
}

.btn-outline-secondary {
    color: #6957da;
    background-color: transparent;
    background-image: none;
    border-color: #6957da;
}

.btn-sm {
    font-size: 13px;
    font-size: 0.7rem;
    padding: 3px 12px;
    border-radius: .2rem;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6957da;
    border-color: #6957da;
}
.buttons {
  display: flex;
  justify-content: center;
}

Vue

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

var dataSource = {
    "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion"
    },
    "data": [{
        "label": "Venezuela",
        "value": "290"
    }, {
        "label": "Saudi",
        "value": "260"
    }, {
        "label": "Canada",
        "value": "180"
    }, {
        "label": "Iran",
        "value": "140"
    }, {
        "label": "Russia",
        "value": "115"
    }, {
        "label": "UAE",
        "value": "100"
    }, {
        "label": "US",
        "value": "30"
    }, {
        "label": "China",
        "value": "30"
    }]
}; 

var app = new Vue({
    el: '#app',
    data: {
        width: '100%',
        height: '400',
        type: 'column2d',
        dataFormat: 'json',
        dataSource: dataSource
    },
    methods:{
        // chnages caption text
        changeCaption: function () {
            const chart = this.$refs.fc.chartObj;
            chart.setChartAttribute('caption', 'CAPTION');
        },
        // changes x axis name
        changeXAxisName: function () {
            const chart = this.$refs.fc.chartObj;
            chart.setChartAttribute('xAxisName', 'Test X-Axis');
        },
        // changes y axis name
        changeYAxisName: function () {
            const chart = this.$refs.fc.chartObj;
            chart.setChartAttribute('yAxisName', 'Test Y-Axis');
        },
        // resets all chart attributes to default
        resetAttr: function () {
            const chart = this.$refs.fc.chartObj;
            Object.entries(this.dataSource.chart).forEach(el => chart.setChartAttribute(el[0], el[1]));
        }
    }
});