In this post, you will learn how to use fusion charts and graphs in angular. There is a plugin for using fusion charts in angularjs. you can add this plugin and use it for web or mobile applications.

Features of this plugin:

• It will add a chart by using a directive.
• you can auto-update your chart objects on modifying scope.
• you can call controller from chart by using angular events.
• there are different ways of adding a chart or from JSON URL.

You can get more knowledge of using fusion charts from this link.

These are the steps to start with plugin:

1. Include Files:
 In your script include angular-fusioncharts.js after other files:
 

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

2. Add dependency in your module:
In your app module, include ng-fusioncharts as a dependency.
 

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

3. Add the fusioncharts directive:
Now add a div with fusioncharts directive in your html where you want to show the chart.
 

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

This has a property datasource with myDataSource scope object.

4. Populate required variables in controller:
In your controller, set the datasource in the JSON format like following:
 

app.controller('MyController', function ($scope) {
              $scope.myDataSource = {
                chart: {
                    caption: "tink,
                    subCaption: society,
                },
                data:[{
                    label: "Central field,
                    value: "80000"
                },
                {
                    label: "Serramonte",
                    value: 80000"
                }]
              };
            });

You can see the demo here.