Angular-FusionCharts

Simple and effective AngularJS bindings for FusionCharts JavaScript Charting Library.

Download (3.1)

About Angular-FusionCharts

This project provides AngularJS bindings for FusionCharts JavaScript Charting Library. It makes adding rich, interactive charting to your Angular JS Projects easy and works in the Angular Way.

Features

  • Add a chart using just a single directive
  • Auto-updates your chart object on modifying scope
  • Angular-friendly events let you call controller functions directly from the chart
  • Offers advanced control by giving you access to full FusionCharts object
  • Has variety of ways to add a chart, from JSON URL to Scope Array Binding
  • Plenty of examples and good documentation (coming soon)

Community

Support

Simply open up a github issue with your question/bug report/suggestion.

QuickStart

Step 1: Include angular-fusioncharts.js

In your HTML, include angular-fusioncharts.js after all other scripts:

<script type="text/javascript" src="/path/to/fusioncharts.js"></script>
<script type="text/javascript" src="/path/to/angular.js"></script>
<script type="text/javascript" src="/path/to/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 <div> with the fc-chart directive. We are assuming it's inside a controller called MyController which would change based on your usage.

<div ng-controller="MyController">
  <div fusioncharts
       width="600"
       height="400"
       type="column2d"
       dataSource="" >
  </div>
</div>

Now this is bound to a datasource with the myDataSource scope object.

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.myDataSource = {
    chart: {
        caption: "Harry's SuperMart",
        subCaption: "Top 5 stores in last month by revenue",
    },
    data:[{
        label: "Bakersfield Central",
        value: "880000"
    },
    {
        label: "Garden Groove harbour",
        value: "730000"
    },
    {
        label: "Los Angeles Topanga",
        value: "590000"
    },
    {
        label: "Compton-Rancho Dom",
        value: "520000"
    },
    {
        label: "Daly City Serramonte",
        value: "330000"
    }]
  };
});

And your chart should display when you load the page.

Licensing

Angular-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can Download an evaluation. You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use) .