AngularJS Charts – How to Create Interactive Charts in AngularJS

angularjs charts

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.  

 

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.

 

Step 3: Add the fusioncharts directive

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

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

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.)  

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, the fusioncharts directive is used as an attribute of the <div>  element. Alternatively,  the fusioncharts directive can be used as a tag. This is how the HTML code will then change:

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 [email protected]. Happy to help!

Leave a Comment