AngularJS Charts – How to Create Interactive Charts in AngularJS

Introducing Angular-FusionCharts directive.

What?

Yes, you got that right. You can now create beautiful charts in AngularJS using our new directive. You can make use of all the stunning charts that we offer without dealing with core JavaScript. If you haven’t got it already, go ahead and download it for free from Angular charts page.

Why did we do this?

This one is easy. Everybody in the world, including us of course, loves Angular. Even Google Trends suggests that. See how that blue graph keeps going up?

So when developers, like you, came to us and asked for a solution, we decided to build Angular charts plugin. That’s how Angular-FusionCharts directive was born. Now that you know why we built it,  let’s learn how to use it.

Downloading the Angular-FusionCharts directive

You can download the Angular-FusionCharts directive by clicking here, or by visiting this page.  

Installing the Angular-FusionCharts directive

Once you have downloaded the AngularJS charts directive, installation is a simple four-step process:  

Step 1: Include library files

In your HTML, include the fusioncharts.js and the angular-fusioncharts.js files. The angular-fusioncharts.js file must be included 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 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.

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

Step 3: Add the fusioncharts directive

In your HTML, define a <div> element with fusioncharts directive where you want to add the chart.  

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

  In the snippet above, it is assumed that the chart has to be added inside a controller calledMyController .  

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 initialized yet.   In your controller, set the datasource using the FusionCharts JSON format. (Check this tutorial for a general introduction to this format.)  

app.controller('MyController', function ($scope) {

//Define the `myDataSource` scope variable.  
$scope.myDataSource = {
   chart: {
       caption: "Harry's SuperMart",
       subCaption: "Top 5 stores in last month by revenue",
       numberPrefix: "$",
       theme: "fint"
   },
   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"
   }]
};
});

With the scope variable successfully initialized, this is how the result looks:

FusionCharts uses the JSON and XML data formats for writing chart data. As mentioned earlier, the chart data in the controller above is using the JSON data format. Every chart has a set of attributes and a predefined data structure, in both formats. To know about the attributes and data structure of a column 2D chart in JSON, click here. To know about the same representation of a column 2D chart in XML, click here.

In the above example, thefusioncharts directive is used as an attribute of the <div>  element. Alternatively,  thefusioncharts directive can be used as a tag. This is how the HTML code will then change:

<fusioncharts
   width="300" 
   height="200"
   type="column2d",
   datasource="{{dataSource}}"
></fusioncharts>

The complete guide to this directive can be found here. That’s all you need to know to start using our Angular-FusionCharts directive. We would love if you can give our directive a try. And if you are stuck anywhere drop us a line at support@fusioncharts.com. Happy to help!