Vue.js FusionChart.js Library Example to Draw Charts Using vue-fusioncharts Component Full Example For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

 

npm i vue-fusioncharts

 

 

 

Usage

There are two ways of adding vue-fusioncharts component in your project

Registering globally as a plugin Import vuevue-fusioncharts and FusionCharts in main app file.

import Vue from `vue`;
import VueFusionCharts from 'vue-fusioncharts';

// import FusionCharts modules and resolve dependency
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

Now, register it as plugin in Vue object

Vue.use(VueFusionCharts, FusionCharts, Charts);

This way is recommended when you want component (vue-fusioncharts ) available from everywhere in your app.

Registering locally in your component Import the chart component from vue-fusioncharts/component package in your component file and use Vue.component to register it locally.

import Vue from `vue`;
import VueFusionChartsComponent from 'vue-fusioncharts/component';

// import FusionCharts modules and resolve dependency
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

const vueFusionCharts = VueFusionChartsComponent(FusionCharts, Charts);

Vue.component('fusioncharts', vueFusionCharts);

This way is recommended when you want component (vue-fusioncharts ) only in specific components of your app.

Click here to view the live example.

Where eventName can be any fusioncharts event. You can find the list of events at fusioncharts devcenter

See also  Vue.js Compile or Convert Pug Template to HTML at Runtime in Browser Using Pug Library Using Javascript Full Example For Beginners

Working with APIs

To call APIs we will need the chart object. To get the chart object from the component we can use ref and retrieve it from this.$refs[refname].chartObj

<fusioncharts
  :type="type"
  :width="width"
  :height="height"
  :dataFormat="dataFormat"
  :dataSource="dataSource"
  @dataPlotRollover="onDataPlotRollover"
  ref="fc"
>
</fusioncharts>

Now, we can access the chart object from this.$refs.fc.chartObj

var app = new Vue({
  el: '#chart',
  data: {
    type: 'Pie2D',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: myDataSource
  },
  methods: {
    onDataPlotRollover: function(e) {
      this.$refs.fc.chartObj.slicePlotItem();
    }
  }
});

This example will slice a Pie2d section when you rollover the chart.

Working with Events

To attach event listeners to FusionCharts, you can use the v-on or @ operator in the vue-fusioncharts component.

<fusioncharts
  :type="type"
  :width="width"
  :height="height"
  :dataFormat="dataFormat"
  :dataSource="dataSource"
  @eventName="eventHandler"
>
</fusioncharts>

Quick Start

Here is a basic sample that shows how to create a chart using vue-fusioncharts:

import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, Charts);

const myDataSource = {
  chart: {
    caption: 'Recommended Portfolio Split',
    subCaption: 'For a net-worth of $1M',
    showValues: '1',
    showPercentInTooltip: '0',
    numberPrefix: '$',
    enableMultiSlicing: '1',
    theme: 'fusion'
  },
  data: [
    {
      label: 'Equity',
      value: '300000'
    },
    {
      label: 'Debt',
      value: '230000'
    },
    {
      label: 'Bullion',
      value: '180000'
    },
    {
      label: 'Real-estate',
      value: '270000'
    },
    {
      label: 'Insurance',
      value: '20000'
    }
  ]
};

const chart = new Vue({
  el: '#app',
  data: {
    type: 'column2d',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: myDataSource
  }
});

Here’s HTML template for the above example:

<div id="app">
  <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
  >
  </fusioncharts>
</div>

Leave a Reply