Gagan Sikri Report post Posted May 19, 2017 I have divided the complete process into the following four easy-to-understand steps: Include the required JavaScript files Create the AngularJS app Define the chart controller Render the chart Step 1: Include the required JavaScript files We need the following three JavaScript dependencies to render our chart: AngularJS Library FusionCharts core package JS files FusionCharts Angular charts plugin We will include all the above files using the <script> tag, as shown in the code below: <html> <head> <!-- including AngularJS library --> <script type="text/javascript" src="path/to/angular.min.js"></script> <!-- including FusionCharts core package files --> <script type="text/javascript" src="path/to/fusioncharts.js"></script> <script type="text/javascript" src="path/to/fusioncharts.charts.js"></script> <!-- including FusionChart Angular charts plugin --> <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script> </head> </html> Step 2: Create the AngularJS app Next, we need to create the Angular app and inject the ng-fusioncharts module, which is provided by the plugin that we have included in the previous step. This is how we do it: var app = angular.module('myChartApp', ['ng-fusioncharts']); Step 3: Define Chart Controller In this step, we will define a controller for our app. To achieve this, we will augment the controller scope with the dataSource and the chart configurations: app.controller('chartController', function($scope) { // chart datasource $scope.dataSource = { "chart": { // caption configuration "caption": "Highest Paid Actors", "captionFontBold": "0", "captionFontSize": "20", // more chart properties - explained later }, "data": [{ "label": "Leonardo", "value": "1" }, //more chart data ] }; }); Step 4: Render the Chart We are almost done now. To render the chart, we will add the fusioncharts directive inside the <div> tag where chart will be rendered. This is how we will do it: <div ng-controller="chartController"> <fusioncharts width= "100%" height= "400" type= "bar2d" dataFormat= "json" dataSource= "{{dataSource}}"> </fusioncharts> </div> When you’ve executed the above code, you should be seeing a live bar 2D chart. If your chart didn’t render, or you want to see the source code, check out this JSFiddle example. If you’d like to know know more about creating charts with AngularJS, you can refer to this developer documentation page. Quote Share this post Link to post Share on other sites
ChristineMeany Report post Posted January 12, 2018 Thanks a lot) Quote Share this post Link to post Share on other sites
vijadhav Report post Posted February 13, 2019 Great information Quote Share this post Link to post Share on other sites
Guest user Report post Posted April 10, 2019 https://jsfiddle.net/sikrigagan/v64qo8es/1/ this is not working. Quote Share this post Link to post Share on other sites
Ayan Bhadury Report post Posted June 15, 2020 Please refer the demo - http://jsfiddle.net/qahz5w3j/ Quote Share this post Link to post Share on other sites
