AngularJS Directive for FusionCharts

Easy to use AngularJS Directive for adding interactive charts to your website

Create pie, column, area, line, radar, marimekko and over 150 other Angular charts for your web application. Using FusionCharts’ Angular Directive you can create charts which are responsive, interactive, and, support zooming, panning, APIs, animation, drill-downs, real-time updates, and even full exporting of charts & dashboards.

It also comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. All charts and dashboards made on FusionCharts’ Angular Directive are mobile first by default, and responsive across all devices. Further, all charts & graphs are tested and built for millions of data points, without any performance issues. Finally, the Angular Directive is completely open source and actively maintained by a team of dedicated developers.

Features

  • Insert a chart using just a single directive.
  • Keep all your chart elements in sync with native support for Data Binding.
  • Call controller functions directly from the chart with Angular-friendly events.
  • Achieve advanced control with complete access to the full FusionCharts object.
  • Add charts in a variety of ways from JSON URL to Scope Array Binding.

Quick Demo

Simple chart
Quick demo

Quick Start

Step 1 : Include FusionCharts AngularJS directive

In your HTML, include fusioncharts library, angularjs core file, and angularjs-fusioncharts directive :

<script type="text/javascript" src="path/to/local/fusionchart.js"></script>
<script type="text/javascript" src="path/to/local/angular.js"></script>
<script type="text/javascript" src="path/to/local/angularjs-fusioncharts.js"></script>

Step 2 : Include FusionCharts module in your application

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 fusioncharts 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"
    datasoure="{{myDataSource}}">
  </div>
</div>

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": "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"}
      ]
  };
});

Licensing

FusionCharts AngularJS directive 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 a free evaluation version. However, You will need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).