vue-fusioncharts

A simple and lightweight VueJS(Vue3) component for FusionCharts JavaScript Charting Library. The Vue-FusionCharts wrapper lets you easily include FusionCharts in your VueJS projects.

Demo

• Github Repo: https://github.com/fusioncharts/vue-fusioncharts
• Documentation: https://www.fusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs
• Support: https://www.fusioncharts.com/contact-support
• FusionCharts
  • Official Website: https://www.fusioncharts.com/
  • Official NPM Package: https://www.npmjs.com/package/fusioncharts
• Issues: https://github.com/fusioncharts/vue-fusioncharts/issues

Table of Contents

• Getting Started
  • Requirements
  • Installation
  • Usage
  • Working with chart API
  • Working with events
• Quick Start
• Going Beyond Charts
• Usage and Integration of FusionTime
• For Contributors
• Licensing

Getting Started

Requirements

• Node.js, NPM/Yarn installed globally in your OS.
• FusionCharts and Vue installed in your project, as detailed below:

Installation

Direct Download All binaries are located on our github repository.

Install from NPM

npm install vue-fusioncharts --save

Install from Yarn

yarn add vue-fusioncharts

Include in your script

Download vue-fusioncharts.js and include it in the HTML <script> tag.

<script src="vue-fusioncharts.js" type="text/javascript"></script>

Usage

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

Registering globally as a plugin Import { createApp }, vue-fusioncharts and FusionCharts in main app file.

import { createApp } from 'vue';
import VueFusionCharts from 'vue-fusioncharts';

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

After a Vue app has been initialized with createApp(), you can add a plugin to your application by calling the use() method.

const app = createApp(App);

app.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 app.component to register it locally.

import { createApp } 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);

const app = createApp(App);

app.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.

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 = {
  data() {
    return {
      type: 'Pie2D',
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: myDataSource
    }
  },
  methods: {
    onDataPlotRollover: function(e) {
      this.$refs.fc.chartObj.slicePlotItem(0);
    }
  }
};
const app = createApp(App);

app.mount('#chart');

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>

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

Quick Start

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

import { createApp } from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/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 App = {
  data() {
    return {
      type: 'column2d',
      width: '500',
      height: '300',
      dataFormat: 'json',
      dataSource: myDataSource
    }
  }
};

const app = createApp(App);

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

app.mount('#app');

Here's HTML template for the above example:

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

links to help you get started:

• Live Samples with code
• Documentation
• Use Chart API events & methods in Vue
• Chart gallery
• FusionCharts API

Usage and integration of FusionTime

From [email protected] and [email protected], You can visualize timeseries data easily with vue.

Learn more about FusionTime here.

Sample code for FusionTime

import { createApp } from "vue";

import VueFusionCharts from "vue-fusioncharts";
import FusionCharts from "fusioncharts";
import TimeSeries from "fusioncharts/fusioncharts.timeseries";

const jsonify = (res) => res.json();
const dataFetch = fetch(
  "https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json"
).then(jsonify);
const schemaFetch = fetch(
  "https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json"
).then(jsonify);

const App = {
  data() {
    return {
      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;
    });
  },
};

const app = createApp(App);

// register VueFusionCharts
app.use(VueFusionCharts, FusionCharts, TimeSeries);

app.mount("#app");

Here's 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>

Useful links for FusionTime

• How FusionTime works
• Create your first chart

Going beyond Charts

• Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations here.
• See Data Stories built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories.

For Contributors

• Clone the repository and install dependencies

$ git clone https://github.com/fusioncharts/vue-fusioncharts.git
$ cd vue-fusioncharts
$ npm install
$ npm install fusioncharts --save

• Run npm start to start the dev server and point your browser at http://localhost:8080/.

Licensing

The FusionCharts Vue integration component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a separate license.