/vue-fusioncharts

Vue Component for FusionCharts JavaScript Charting Library

Primary LanguageJavaScript

vue-fusioncharts

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

Installation

npm

npm install vue-fusioncharts --save

yarn

yarn add vue-fusioncharts

VanillaJS

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

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

Getting Started

ES6 Module

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

// import FusionCharts modules and resolve dependency
import FusionCharts from 'fusioncharts/core'
import Pie2D from 'fusioncharts/viz/pie2d'

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

CommonJS

const Vue = require('vue');
const VueFusionCharts = require('vue-fusioncharts');

// import FusionCharts modules and resolve dependency
const FusionCharts = require('fusioncharts');
const Charts = require('fusioncharts/fusioncharts.charts');

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

AMD

require.config({
  paths: {
    'vue': 'path/to/vue',
    'vue-fusioncharts': 'path/to/vue-fusioncharts',
    'fusioncharts': 'path/to/fusioncharts'
    'charts': 'path/to/fusioncharts/fusioncharts.charts'
  }
})

require(['vue', 'vue-fusioncharts', 'fusioncharts', 'charts'], function (Vue, VueFusionCharts, FusionCharts, Charts) {

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

VanillaJS

If you are not using any bundler, you can refer the file in a script tag. The library will be available in a global object named VueFusionCharts.

<head>
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script>
    <script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
    <script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
</head>

<body>

    <div id="app">
        <fusioncharts
        :type="type"
        :width="width"
        :height="height"
        :dataFormat="dataFormat"
        :dataSource="dataSource"
        :events="events">
        </fusioncharts>
        <p>Display Value: {{displayValue}}</p>
    </div>
    
    <script>
        // Use VueFusionCharts component by calling the Vue.use() method:
        Vue.use(VueFusionCharts);
        
        const myDataSource = {
            chart: {
                caption: 'Vue FusionCharts Sample',
                theme: 'fint'
            }
            data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
        }
        // bootstrap the demo
        var app = new Vue({
            el: '#chart',
            data: {
                type: 'Pie2D',
                width: '500',
                height: '300',
                dataFormat: 'json',
                dataSource: myDataSource,
                events: {
                  dataplotRollover: function (ev, props) {
                    app.displayValue = props.displayValue       
                  }       
                },
                displayValue: ''
              }
            }
        });
    </script>
</body>

Click here to view the live example.

Register vue-fusioncharts Component

Register Globally

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

Vue.use(VueFusionCharts, FusionCharts, Charts);

Register Locally

Use the Vue.component method to register the component locally.

// es6 style
import { FCComponent } from 'vue-fusioncharts'

// CommpnJS
const FCComponent = require('vue-fusioncharts').FCComponent;

Vue.component('fusioncharts', FCComponent);

Component Props

  • options

    The commonly used configurations required to initialize FusionCharts are described in the table below. The complete list of supported configurations can be found in the FusionCharts API documentation.

    Name Type Default value Description
    type String none Name of the chart type to be rendered.
    width String/Number 400 Width in pixels (for example, 640) or percent (for example, 50%).
    height String/Number 400 Height in pixels (for example, 640) or percent (for example, 50%).
    id String chart-object-* Name of the current chart instance, after the chart has been created.
    dataFormat String JSON Format of the source data, passed to the dataSource attribute. Currently FusionCharts accepts data in the JSON and XML formats.
    dataSource String/Object none Source data/source of the chart data and the chart configuration. Currently FusionCharts accepts data in the JSON and XML formats.

Contributing

  • Clone the repository.
  • Install dependencies
  • Run npm start to start the dev server.
  • Open http://localhost:8080/ in your browser.
$ git clone https://github.com/fusioncharts/vue-fusioncharts.git
$ cd vue-fusioncharts
$ npm install
$ npm start

Demos and Documentation