fusioncharts/angularjs-fusioncharts fusioncharts/angularjs-fusioncharts

  • Stars
    star
    111
  • Rank 314,510 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated almost 4 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
fusioncharts/angularjs-fusioncharts
github

fusioncharts

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

AngularJS Directive for FusionCharts JavaScript Charting Library (for Angular 1.x)

angularjs-fusioncharts

A simple and lightweight official AngularJS component for FusionCharts JavaScript charting library. angularjs-fusioncharts enables you to add JavaScript charts in your AngularJS application without any hassle.

Demo

Table of Contents

Getting Started

Requirements

  • Node.js, NPM/Yarn installed globally in your OS.
  • You've an AngularJS Application.
  • FusionCharts installed in your project, as detailed below:

Installation

To install angularjs-fusioncharts library, run:

$ npm install angularjs-fusioncharts --save

To install fusioncharts library:

$ npm install fusioncharts --save

Quick Start

Step 1: Include angular-fusioncharts.js and fusioncharts

In your index.html

  <script type="text/javascript" src="node_modules/fusioncharts/fusioncharts.js"></script>
  <script type="text/javascript" src="node_modules/fusioncharts/fusioncharts.charts.js"></script>
  <script type="text/javascript" src="node_modules/fusioncharts/themes/fusioncharts.theme.fusion.js"></script>
  <script type="text/javascript" src="node_modules/angular/angular.js"></script>
  <script type="text/javascript" src="node_modules/angularjs-fusioncharts/dist/angular-fusioncharts.js"></script>

Step 2: Include ng-fusioncharts in your module

In the app, include ng-fusioncharts as a dependency. If you looking for where to add the dependency, look for the call to angular.module in your code.

angular.module('myApp', ['ng-fusioncharts']);

Step 3: Add the fusioncharts directive

In your HTML, find the section where you wish to add the chart and add a

with the fusioncharts directive. We are assuming it's inside a controller called MyController which would change based on your usage.

  <body ng-app='myApp'>
    ...
    <div  ng-controller="MyController">
      <div
        fusioncharts
        width="600"
        height="400"
        type="column2d"
        datasource="{{dataSource}}">
      </div>
    </div>
    ...
  </body>

Step 4: Populate required variables in controller

In the previous code, we are binding to a scope variable myDataSource, but that hasn't been defined yet. In your controller, set the DataSource as you would for a regular FusionCharts JSON format DataSource (see this tutorial for a general introduction to this format).

app.controller('MyController', function($scope) {
  $scope.dataSource = {
    chart: {
      caption: 'Countries With Most Oil Reserves [2017-18]',
      subCaption: 'In MMbbl = One Million barrels',
      xAxisName: 'Country',
      yAxisName: 'Reserves (MMbbl)',
      numberSuffix: 'K',
      theme: 'fusion'
    },
    data: [
      { label: 'Venezuela', value: '290' },
      { label: 'Saudi', value: '260' },
      { label: 'Canada', value: '180' },
      { label: 'Iran', value: '140' },
      { label: 'Russia', value: '115' },
      { label: 'UAE', value: '100' },
      { label: 'US', value: '30' },
      { label: 'China', value: '30' }
    ]
  };
});

And your chart should display when you load the page.

Using require() syntax

In script.js

//  Require AngularJS
var angular = require('angular');

// Require FusionCharts
var FusionCharts = require('fusioncharts');

// Include angularjs-fusioncharts
require('angularjs-fusioncharts');

// Require Chart modules
var Charts = require('fusioncharts/fusioncharts.charts');

// Initialize Charts with FusionCharts instance
Charts(FusionCharts);

var app = angular.module('myApp', ['ng-fusioncharts']);

app.controller('MyController', [
  '$scope',
  function($scope) {
    $scope.dataSource = {
      chart: {
        caption: 'Countries With Most Oil Reserves [2017-18]',
        subCaption: 'In MMbbl = One Million barrels',
        xAxisName: 'Country',
        yAxisName: 'Reserves (MMbbl)',
        numberSuffix: 'K'
      },
      data: [
        { label: 'Venezuela', value: '290' },
        { label: 'Saudi', value: '260' },
        { label: 'Canada', value: '180' },
        { label: 'Iran', value: '140' },
        { label: 'Russia', value: '115' },
        { label: 'UAE', value: '100' },
        { label: 'US', value: '30' },
        { label: 'China', value: '30' }
      ]
    };
  }
]);

Use a bundler like browserify to bundle the script
See the installation docs here

$ browserify script.js -o bundle.js

In index.html

<html>
  <head>

    <!-- Include compiled bundle in script tag -->
    <script type="text/javascript" src="./bundle.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="MyController">
      <div
        fusioncharts
        width="600"
        height="400"
        type="column2d"
        datasource="{{dataSource}}">
      </div>
    </div>
  </body>
</html>

Load it in browser , Chart should get displayed

Working with Events

Fusincharts events can be subscribed by attaching scope functions to event attributes. All the events attributes start with fcevent- followed by the event name in lowercase

Usage in template :

<fusioncharts
  width="400"
  height="400"
  type="column2d"
  datasource="{{myDataSource}}"
  fcevent-dataplotrollover="rollover(event, args)">
</fusioncharts>

In the given above template, rollover is the scope function that needs to be defined in the controller's code.

For more on this read here

var app = angular.module('myApp', ['ng-fusioncharts']);

app.controller('MyController', function($scope) {
  $scope.myDataSource = {
    chart: {
      caption: 'Countries With Most Oil Reserves [2017-18]',
      subCaption: 'In MMbbl = One Million barrels',
      xAxisName: 'Country',
      yAxisName: 'Reserves (MMbbl)',
      numberSuffix: 'K',
      theme: 'fusion'
    },
    data: [
      { label: 'Venezuela', value: '290' },
      { label: 'Saudi', value: '260' },
      { label: 'Canada', value: '180' },
      { label: 'Iran', value: '140' },
      { label: 'Russia', value: '115' },
      { label: 'UAE', value: '100' },
      { label: 'US', value: '30' },
      { label: 'China', value: '30' }
    ]
  };

  $scope.rollover = function(event, data) {
    console.log(event, data);
  };
});

Get the list of fusioncharts' events

Working with APIs

FusionCharts chart instance is made available from the initialized event. It provides the chart instance as a parameter which can be used to call FusionCharts methods.

In template, we add initialized event

<fusioncharts
  width="400"
  height="400"
  type="column2d"
  datasource="{{myDataSource}}"
  initialized="onInitialized(chart)">
</fusioncharts>
<button ng-click="changeCaption()">Change Chart Caption</button>

In order to use the chart instance, we need to store it.

var app = angular.module('myApp', ['ng-fusioncharts']);

app.controller('MyController', function($scope){
    var chart;
    $scope.datasource = {
       ...// same data as above
      };

      $scope.onInitialized = function(chartObj){
        chart = chartObj;
      }

      $scope.changeCaption = function(){
          chart.setChartAttribute('caption', 'Caption changed');
      }
});

In the given above example, clicking the button changes the caption text to Caption changed

Get the list of fusioncharts' methods

Usage and integration of FusionTime

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

Learn more about FusionTime here.

Sample code for FusionTime

If you've included angular-fusioncharts.js and fusioncharts in your html then add the following script tag:

In your index.html

  ...
  <script type="text/javascript" src="node_modules/fusioncharts/fusioncharts.timeseries.js"></script>
  ...

In your script.js

// If you haven't imported angulajs, angularjs-fusioncharts and fusioncharts in your html file and used require() syntax instead then add the following code from START to END:

// START
var angular = require('angular');
var FusionCharts = require('fusioncharts');
require('angularjs-fusioncharts');

// Require TimeSeries module
var TimeSeries = require('fusioncharts/fusioncharts.timeseries');

// Initialize Charts with FusionCharts instance
TimeSeries(FusionCharts);
var app = angular.module('myApp', ['ng-fusioncharts']);
// END

var jsonify = res => res.json();
var dataFetch = fetch(
  'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
).then(jsonify);
var schemaFetch = fetch(
  'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
).then(jsonify);

var app = angular.module('myApp', ['ng-fusioncharts']);

app.controller('MyController', function($scope) {
  $scope.dataSource = {
    data: null,
    caption: {
      text: 'Sales Analysis'
    },
    subcaption: {
      text: 'Grocery'
    },
    yAxis: [
      {
        plot: {
          value: 'Grocery Sales Value',
          type: 'line'
        },
        format: {
          prefix: '$'
        },
        title: 'Sale Value'
      }
    ]
  };

  Promise.all([dataFetch, schemaFetch]).then(res => {
    const data = res[0];
    const schema = res[1];
    const fusionTable = new FusionCharts.DataStore().createDataTable(
      data,
      schema
    );
    $scope.$apply(function() {
      $scope.dataSource.data = fusionTable;
    });
  });
});

Use a bundler like browserify to bundle the script
See the installation docs here

$ browserify script.js -o bundle.js

Again in your index.html

<html>
  <head>
    <!-- Include compiled bundle in script tag -->
    <script type="text/javascript" src="./bundle.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="MyController">
      <div
        fusioncharts
        width="600"
        height="400"
        type="timeseries"
        datasource-dt="dataSource">
        // When using TimeSeries pass your dataSource in "datasource-dt" attribute not in "datasource".
      </div>
    </div>
  </body>
</html>

Important note :- If the chart's datasource has an instance of dataStore like in case of timeseries then you must use the new datasource-dt attribute for passing the data in html

Useful links for FusionTime

Special Note

If you want to support your application on IE(11 and below), then you need to take following steps:

Firstly

You have to update your angularjs-fusioncharts and fusioncharts modules to latest versions. For angularjs-fusioncharts install v5.0.1 and above; for fusioncharts install v3.13.3-sr.1 and above.

Secondly

In your template, modify your code like so,

<div
  fusioncharts
  width="600"
  height="400"
  type="ANY_CHART_TYPE"
  datasource-dt="dataSource"
>
  // Instead of passing data in datasouce, use datasource-dt.
</div>

For Contributors

  • Clone the repository and install dependencies
$ git clone https://github.com/fusioncharts/angularjs-fusioncharts.git
$ cd angularjs-fusioncharts
$ npm i
$ npm run dev

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.

Licensing

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

More Repositories

1

svelte-fusioncharts

Svelte Component for FusionCharts JavaScript Charting Library
JavaScript
129
star
2

react-fusioncharts-component

ReactJS component for FusionCharts JavaScript Charting library.
JavaScript
92
star
3

vue-fusioncharts

Vue Component for FusionCharts JavaScript Charting Library
JavaScript
88
star
4

fusioncharts-dist

FusionCharts JavaScript Charting library. Over 95+ charts and 1,400+ maps to choose from, with integrations available for all popular JavaScript frameworks & back-end programming languages.
JavaScript
84
star
5

react-native-fusioncharts

Simple and Lightweight React Native component for FusionCharts JavaScript Charting Library
JavaScript
77
star
6

fusioncharts-jquery-plugin

jQuery plugin for FusionCharts JavaScript Charting Library
JavaScript
57
star
7

angular-fusioncharts

Angular Component for FusionCharts JavaScript Charting Library
TypeScript
55
star
8

php-wrapper

PHP Module for FusionCharts JavaScript Charting Library
PHP
46
star
9

react-fusioncharts

ReactJS component for FusionCharts
JavaScript
41
star
10

faberjs

FaberJS is an open-source platform-independent layouting engine capable of mimicking different CSS layouting paradigm(ex. CSS grids)
JavaScript
33
star
11

redraphael

JavaScript Graphics library built on top of raphaeljs to enhance rendering graphics on the browser.
JavaScript
22
star
12

rails-wrapper

Ruby On Rails Gem for FusionCharts JavaScript Charting Library
Ruby
20
star
13

redis-contentful

A tiny library to map Contentful ☁️ space into Redis ⚑️
JavaScript
17
star
14

angular4-fusioncharts

A simple and lightweight Angular 4 component which provides bindings for FusionCharts JavaScript Charting Library
TypeScript
17
star
15

django-wrapper

Django Module for FusionCharts JavaScript Charting Library
Python
15
star
16

fusioncharts-smartlabel

SmartLabel component of FusionCharts
JavaScript
13
star
17

asp-net-wrapper

ASP.NET (C#) Wrapper for FusionCharts JavaScript Charting Library
C#
9
star
18

bouquet

Collection of plugins for JSDoc
JavaScript
8
star
19

fusionmaps-dist

Data-driven maps in JavaScript from FusionMaps (FusionCharts). Over 1,400+ maps of all countries, regions, counties etc.
JavaScript
8
star
20

jswarrior

JavaScript
7
star
21

jslink

Automated module concatenation with dependency management
JavaScript
7
star
22

fusionexport-apexcharts-samples

Examples to export charts and dashboards built using ApexCharts
HTML
6
star
23

dev_centre_docs

Documentation of FusionCharts JavaScript Charting Library
JavaScript
6
star
24

ember-fusioncharts

A lightweight EmberJS component which provides bindings for FusionCharts JavaScript Charting Library
JavaScript
6
star
25

fc-calendar

Light weight calendar component
JavaScript
5
star
26

svgDeCanvo

This library can be used to draw the SVG equivalent to HTML5 Canvas
JavaScript
5
star
27

fusionexport-node-client

Language SDK for FusionExport which enables exporting of charts & dashboards through NodeJS.
HTML
4
star
28

fusionexport-go-client

Language SDK for FusionExport which enables exporting of charts & dashboards through Golang.
Go
4
star
29

fusionexport-python-client

Language SDK for FusionExport which enables exporting of charts & dashboards through Python.
JavaScript
3
star
30

multi-charting

Data visualization that deals with multiple charts
JavaScript
3
star
31

jsp-wrapper

Java Plugin for FusionCharts JavaScript Charting Library
Java
3
star
32

fusionexport-cli

CLI for FusionExport. Enables exporting from FusionExport directly from command line.
JavaScript
3
star
33

rails-exporter

Export Server for FusionCharts on RoR
Ruby
3
star
34

chart-samples

Contains all the fiddles which fusioncharts showcases in the website.
JavaScript
3
star
35

backbone-fusioncharts

Backbone component for FusionCharts
JavaScript
3
star
36

fusioncharts.net-core-sample

FusionCharts samples created using FusionCharts.NET Standard libraries
C#
2
star
37

blazor-fusioncharts

JavaScript
2
star
38

fusionexport-csharp-client

Language SDK for FusionExport which enables exporting of charts & dashboards through C#.
HTML
2
star
39

fusionexport-php-client

Language SDK for FusionExport which enables exporting of charts & dashboards through PHP.
HTML
2
star
40

vb-net-wrapper

ASP.NET (VB) Wrapper for FusionCharts JavaScript Charting Library
Visual Basic .NET
2
star
41

fusionexport-csharp-examples

C#
1
star
42

fusionexport-node-examples

1
star
43

data-filters

1
star
44

data-generator

Tool to generate chart specific data dynamically
JavaScript
1
star
45

fusionexport-tutorials

Tutorial samples for FusionExport
HTML
1
star
46

fusionexport-php-examples

HTML
1
star
47

react-native-fusioncharts-samples

HTML
1
star
48

fileMaker-with-fusionCharts

1
star
49

date-range-chooser-ext

Date range chooser extension for FusionCharts time-series chart
JavaScript
1
star
50

fusioncharts-trial

JavaScript Data Visualisation Library
1
star
51

data-aggregator-ext

1
star
52

growth-analyser-ext

1
star
53

larry

Larry is a generic packaging tool for applications that need to bundle their source code in packages, ready to be shipped.
JavaScript
1
star
54

htmltosvg

JavaScript
1
star
55

flutter-fusioncharts

Dart
1
star
56

fc-with-zend-framwork

1
star
57

django-exporter

FusionCharts server side exporter for Django
Python
1
star
58

fusionexport-java-client

Language SDK for FusionExport which enables exporting of charts & dashboards through Java.
Java
1
star
59

d3-scroller

Draw a customizable SVG scroller
JavaScript
1
star