Update Chart Data from Component

Change the data dynamically in the component and watch the chart update automatically

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>
    <button class='btn btn-outline-secondary btn-sm' @click="updateData">Click to Update Data</button>
</div>

CSS

.btn {
    display: 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:auto;
}

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

.btn-sm {
    font-size: 13px;
    font-size: 0.75rem;
    padding: 5px 15px;
    border-radius: .2rem;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6957da;
    border-color: #6957da;
}

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",
    "updateAnimDuration": "0.4"
  },
  "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: {
    type: 'column2d',
    width: '100%',
    height: '400',
    dataFormat: 'json',
    dataSource: dataSource
  },
  methods: {
    // Updates the chart data
    updateData: function () {
      const data = Object.assign({}, this.dataSource); //clones data
      data.data[2].value = this.getRandomNumber();
      data.data[3].value = this.getRandomNumber();
      this.dataSource = data;
     },
    // Generates a random number between min and max
    getRandomNumber: function () {
      var max = 300,
        min = 50;
      return Math.round(((max - min) * Math.random()) + min);
    }
  },
});