Demos and Documentation

backbone-fusioncharts

A simple and lightweight Backbone wrapper which provides bindings for FusionCharts JavaScript Charting Library. It easily adds rich and interactive charts to any Backbone Project.

Installation from npm

To install backbone-fusioncharts, run:

$ npm install backbone-fusioncharts --save

To install backbone, run:

$ npm install backbone --save

To install fusioncharts, run:

$ npm install fusioncharts --save

Import backbone-fusioncharts in your Backbone web application using any of the CommonJS, ES6 or AMD include style.

CommonJS

const BackboneFusionCharts = require('backbone-fusioncharts');

ES6

import BackboneFusionCharts from 'backbone-fusioncharts';

AMD

define(['backbone-fusioncharts'], (BackboneFusionCharts) => {
 
});

Installation from bower

To install backbone-fusioncharts, run:

$ bower install backbone-fusioncharts --save

To install backbone, run:

$ bower install backbone --save

To install fusioncharts, run:

$ bower install fusioncharts --save

Import backbone-fusioncharts in your Backbone web application through HTML script tag.

HTML

<script src="bower_components/backbone-fusioncharts/dist/backbone-fusioncharts.min.js" type="text/javascript"></script>

Getting Started

For rendering a simple chart use the following code

const dataSource = {
  chart: {
    caption: 'Backbone FusionCharts Sample',
    theme: 'fint',
  },
  data: [
    { value: 1.9 },
    { value: 2.3 },
    { value: 2.1 },
  ],
};
 
const fc = new BackboneFusionCharts({
  renderAt: 'chart-container',
  type: 'Pie2d',
  dataSource,
});
 
 
fc.model // This is the model
 
fc.view // This is the view
 
fc.view.chart // This is the FusionCharts instance

Here's the HTML template for the above example

<div id="chart-container"></div>

Test

$ npm test

Contributing

• Clone the repository
• Install dependencies
• Build the library
• Build the sample script
• Open the sample template in your browser

$ git clone https://github.com/fusioncharts/backbone-fusioncharts.git
$ cd backbone-fusioncharts
$ npm i
$ npm run build 
$ npm run build:example

To build, run:

$ npm run build

Demos and Documentation