Percentage Calculation

Hover on a plot to see the percentage value with respect to total

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"
    @dataplotRollover="dataplotRollover"
    @dataplotRollout="dataplotRollout"
    ></fusioncharts>
    <div class='text-style' v-html="displayValue"></div>
</div>

CSS

.text-style {
  padding: 10px;
  background: #f5f2f0;
  text-align: 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,
        message : 'Hover on the plot to see the value along with the label',
        displayValue:''
    },
    created: function () {
        let myData = this.dataSource.data;
        this.displayValue = this.message;
        this.total = myData.reduce((p,c)=>p+Number(c.value), 0);
    },
    methods: {
        // uses the data info of the event 'dataplotrollover' and represents it
        dataplotRollover: function (e) {
            let value = (e.data.value / this.total * 100).toFixed(2);
            this.displayValue =  `<strong>${e.data.categoryLabel}</strong> is <strong>${value}%</strong> of the top 8 oil reserve countries`;
        },
        dataplotRollout: function(e){
						this.displayValue = this.message;
        }
    }
});