Special Events

Drag a column column to see its change.

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

CSS

.text-style {
  padding: 10px;
  background: #f5f2f0;
  text-align: center;
}

Vue

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

var dataSource = {
      "chart": {
        "caption": "Android and iOS Devices Sales Projections",
        "subCaption": "Drag the top of columns to adjust projections for 2017 & 2018",
        "numberPrefix": "$",
        "numberSuffix": "M",
        "yaxismaxvalue": "200",
        "theme": "fusion",
        "plotToolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
      },
      "categories": [{
        "category": [{
          "label": "2014",
          "fontItalic": "0"
        }, {
          "label": "2015",
          "fontItalic": "0"
        }, {
          "label": "2016",
          "fontItalic": "0"
        }, {
          "label": "2017 (Projected)"
        }, {
          "label": "2018 (Projected)"
        }]
      }],
      "dataset": [{
        "seriesname": "Android Devices",
        "data": [{
          "value": "73",
          "alpha": "100",
          "allowDrag": "0"
        }, {
          "value": "80",
          "alpha": "100",
          "allowDrag": "0"
        }, {
          "value": "97",
          "alpha": "100",
          "allowDrag": "0"
        }, {
          "value": "110",
          "toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
        }, {
          "value": "180",
          "toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
        }]
      }, {
        "seriesname": "iOS Devices",
        "data": [{
          "value": "63.2",
          "alpha": "100",
          "allowDrag": "0"
        }, {
          "value": "68",
          "alpha": "100",
          "allowDrag": "0"
        }, {
          "value": "82",
          "alpha": "100",
          "allowDrag": "0"
        }, {
          "value": "99",
          "toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
        }, {
          "value": "150",
          "toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
        }]
      }]
    };

var app = new Vue({
   ...