Nocturnal Prancing Mosquito
    Wondering what’s next for npm?Check out our public roadmap! »

    vue-fusioncharts

    3.1.0 • Public • Published

    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.

    Demo


    Table of Contents

    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 vue, vue-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

    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(0);
        }
      }
    });

    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>

    links to help you get started:

    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.

    Learn more about FusionTime here.

    Sample code for 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/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 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 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

    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
    

    Licensing

    The FusionCharts Vue 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.

    Install

    npm i vue-fusioncharts

    DownloadsWeekly Downloads

    1,729

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    3.94 MB

    Total Files

    16

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar