Update Chart Attribute from Component

Change a parameter in the components variable and see it automatically update the chart

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 class="buttons">
      <button class='btn btn-outline-secondary btn-sm' @click="changeBackground">Change Chart Background</button>
      <button class='btn btn-outline-secondary btn-sm' @click="makeCaptionLeft">Make Caption text left-aligned</button>
      <button class='btn btn-outline-secondary btn-sm'           @click="resetAttr">Reset Attributes</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 plugin
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
    },
    created: function(){
        this.originalData = JSON.parse(JSON.stringify(this.dataSource)); //for deep copy
    },
    methods:{
        // Changes chart background
        changeBackground: function(){
            const data = Object.assign({}, this.dataSource); //copy of object
            data.chart.bgColor = '#efefef';
            this.dataSource = data;
        },
        // Resets all the chart data to it's initial verison
        resetAttr: function(){
            this.dataSource = JSON.parse(JSON.stringify(this.originalData));
        },
        // Makes the caption text left aligned
        makeCaptionLeft: function(){
            const data = Object.assign({}, this.dataSource);
            data.chart.captionAlignment = 'left';
            this.dataSource = data;
        }
    }
});