Dynamically add chart event listener

Clicking the button adds an event to the chart to track 'dataplotClick'.

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"
    @disposed="disposed"
    ></fusioncharts>
    <div class="text-style button" v-html="message" ></div>
    <br>
    <div class="button">
            <button class='btn btn-outline-secondary btn-sm' v-bind:class="{disable: listen}" @click="attachHandler">Listen to data plot click event</button>
            <button class= 'btn btn-outline-secondary btn-sm' v-bind:class="{disable: remove}" @click="removeHandler">Remove data plot click event</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;
}

.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;
}
.text-style {
  padding: 10px;
  background: #f5f2f0;
}
.negitive-btn {
    border-color: #ff0000;
    color: #ff0000;
}
.button {
  text-align: center
}
.disable, .disable:hover, .disable:focus {
  border-color: #d3d3d3;
  color: #d3d3d3;
  background: none;
}

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 handler = function (e) {
        this.message = `You have clicked plot <b>${e.data.categoryLabel}</b> which has a value of <b>${e.data.displayValue}</b>.`
     },
    attached = false,
    defaultMessage = 'Click the below buttons to add an event dynamically to the chart.';

var app = new Vue({
    el: '#app',
    data: {
        width: '100%',
        height: '400',
        type: 'column2d',
        dataFormat: 'json',
        dataSource: dataSource,
        listen: false,
        remove: true,
        message: defaultMessage
    },
    methods: {
        // attach event handler to 'dataPlotClick' event once 
        attachHandler: function () {
            if (attached) return;
            attached = true;
            this.listen = true;
            this.remove = false;
            handler = handler.bind(this);
            this.message = 'Click on a plot to see the value along with the label'
            FusionCharts.addEventListener('dataPlotClick', handler);
      ...