Vue-FusionCharts Plugin Examples

Vue-FusionCharts

An easy-to-use, lightweight Vue component for the FusionCharts JavaScript Charting Library

The Vue-FusionCharts component lets you easily include FusionCharts in your Vue projects and add interactive charts to your Vue applications.

Features

Adds a chart using just a single component.
Auto-updates the chart object when the data source is modified.
Adds a chart from a JSON URL, from a XML URL, or using Props Array Binding.

Allows to include interactivity between javascript charts.
Offers advanced control by giving you access to the complete FusionCharts object (that contains the chart configuration).

Quick Demo:

A Simple Chart

A simple chart with all data embedded into the directive

A Simple TimeSeries Chart

FusionTime

A simple time-series chart with a single series plotted as line

Column chart with time axis

FusionTime

Time-series chart with series plotted as column.

Area chart with time axis

FusionTime

Time-series chart with series plotted as area.

A 3D Pie Chart

A 3D pie chart using the datasource attribute from components scope

A simple gauge

A simple gauge to show customer satisfaction score

A Column, Line and Area Combi Chart

A combination chart of column, line and area

Column and line combination on time axis

FusionTime

Two series of data plotted as a combination of column & line on the same y-axis

Plotting multiple series on time axis

FusionTime

A multi-series chart with 2 variables plotted as line on the same y-axis.

Plotting two variables (measures)

FusionTime

Plotting 2 different variables in 2 different vertically stacked canvases

Fetch data from JSON URL

Fetch data remotely from a JSON file or URL

Fetch data from XML URL

Fetch data remotely from an XML file or URL

Update chart data

Change the data dynamically and watch the chart update automatically

Update chart attribute

Update the chart with new attributes

Listen to events from chart

Bind event listener to the chart and get the related event data

Percentage Calculation

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

Add drill-down to chart

Use LinkedCharts to quickly add drill-down to charts

Adding a reference line

FusionTime

Adding a static reference line (by value) to indicate targets or threshold.

Annotating single data point

FusionTime

Annotating specific data point using data markers on line series

Single event overlay

FusionTime

Plotting an event marker to indicate an event for a specific date.

Date range event overlay

FusionTime

Plotting an event marker as a band, to indicate an event that spans a data range.

World Map

World map showing data for different continents

Export multiple charts

Use Batch Export Feature to export multiple charts as a single image/PDF

Special Events

Drag a projected column to see its change

Lifecycle events

This sample lists the basic lifecycle events at the time of rendering FusionCharts

Dynamically add chart event listener

How you can dynamically(runtime) add & remove chart specific events in FusionCharts

Slice data plots

Use Chart specific custom API

Responsive charts

Select any of the dimensions given in the list. The chart adjusts itself to its alloted percentage

Change chart type at run time

Change the chart type dynamically or at runtime

Use Annotations

Add custom shapes to highlight a specific data point

Usage of FusionCharts methods (API)

Change a chart attribute by calling FusionCharts setChartAttribute API

Applying a different theme

Choosing from different themes available in FusionCharts Suite

Interactive candlestick chart

FusionTime

Time-series chart plotted as candlestick, with 4 different values for each plot (open, high, low, close)

 
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
​
//import the theme
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'
​
// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, Charts, FusionTheme)
​
// Copy datasource from 'Data' tab
var dataSource = /*{ "chart": {..}, ..}*/;
​
var app = new Vue({
    el: '#app',
    data: {
        width: '100%',
        height: '400',
        type: 'column2d',
        dataFormat: 'json',
        dataSource: dataSource
    }
});

Quick Start

Step 1: Install the Vue-FusionCharts wrapper framework

In the terminal run the following command:

 
$ npm install vue-fusioncharts --save

Also install fusionCharts, if it is not already installed:

 
$ npm install fusioncharts --save

Step 2: Register the VueFusionCharts component

Use the Vue.use method to register the component globally:

In case of vue-cli or vue with bundlers, traditionally main.js contains the initialization code below

 
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
​
// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts);

Or, Use the Vue.component method to register the component locally:

 
import Vue from 'vue';
import FusionCharts from 'fusioncharts';
import { FCComponent } from 'vue-fusioncharts';
​
// register Vue-FusionCharts component
Vue.component('fusioncharts', FCComponent, FusionCharts);

Step 3: Render your Chart

For example render a simple pie chart

 
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: 'pie2d',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: myDataSource
    }
});

Here's the HTML template for the above example

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

Usage and integration of FusionTime

From fusioncharts@3.13.3-sr.1 and vue-fusioncharts@3.0.0, You can visualize timeseries data easily with vue.

Consider the example below for integration of FusionTime

 
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
​
// register VueFusionCharts
Vue.use(VueFusionCharts, FusionCharts, TimeSeries);
​
const jsonify = res => res.json();
const dataFetch = fetch(
  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/data.json'
).then(jsonify);
const schemaFetch = fetch(
  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/schema.json'
).then(jsonify);
​
const chart = new Vue({
  el: '#app',
  data: {
    width: '500',
    height: '300',
    type: 'timeseries',
    dataFormat: 'json',
    dataSource: {
      caption: { text: 'Online Sales of a SuperStore in the US' },
      data: null,
      yAxis: [
        {
          plot: [
            {
              value: 'Sales ($)'
            }
          ]
        }
      ]
    }
  },
  mounted: function() {
    Promise.all([dataFetch, schemaFetch]).then(res => {
      const data = res[0];
      const schema = res[1];
      const fusionTable = new FusionCharts.DataStore().createDataTable(
        data,
        schema
      );
      this.dataSource.data = fusionTable;
    });
  }
});

Here's the HTML template for the above example

 
<div id="app">
  <fusioncharts
    :width="width"
    :height="height"
    :type="type"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
  >
    FusionCharts will render here...
  </fusioncharts>
</div>