FusionCharts Suite XT includes an extensive range of charts, gauges, and maps that you can use to plot all types of static and real-time data.
Downloading the Directive
You can download the Angular-FusionCharts directive from here.
Installing the Angular-FusionCharts Directive
To install the Angular-FusionCharts directive for your applications, follow the steps given below:
Step 1: Include fusioncharts.js and angular-fusioncharts.js
In your HTML, include the
fusioncharts.js and the
angular-fusioncharts.js file should mandatorily be included after all other scripts.
Step 2: Include the ng-fusioncharts directive in your module
In the app, include the
ng-fusioncharts directive as a dependency. If you are looking for where to add the dependency, look for the call to
angular.module in your code.
Step 3: Add the fusioncharts directive
In your HTML, find the section where you want to add the chart. Here, define a
<div> element with the
In the snippet above, it is assumed that the chart has to be added inside a controller called MyController. This can change based on what you name your controller.
Step 4: Populate the required variables in the controller
In the above code snippet, the directive is bound to the datasource scope variable. The variable, however, has not been defined yet.
In your controller, set the datasource using the regular FusionCharts JSON format (see this tutorial for a general introduction to this format).
You are now ready to start creating and customizing your charts using the Angular-FusionCharts directive. Read on to see how.
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) .