Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Create amazing charts and graphs with angular-fusion-charts

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.10k
    Comment on it

    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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: