You can create beautiful interactive charts in AngularJS using Chart.js and dynamic data. I have previously shared a post on creating charts in AngularJS with dynamic data using Web API . Taking a cue from my previous post, I am now sharing an example on how to create animated charts in AngularJS using data extracted from an External JSON file and Angular-Chart.js.

Chart.js

First, download on your machine. It’s a library with properties and methods for creating charts. Save the file in the root directory of your application.

Next, you can either download or use the in your application.

The JSON Data

Save the below JSON data in a file named sample.json.

[ { "Month": "JAN", "SaleFigure": "21" }, { "Month": "FEB", "SaleFigure": "56" }, { "Month": "MAR", "SaleFigure": "4" }, { "Month": "APR", "SaleFigure": "61" }, { "Month": "MAY", "SaleFigure": "45" }, { "Month": "JUN", "SaleFigure": "56" }, { "Month": "JUL", "SaleFigure": "12" }, { "Month": "AUG", "SaleFigure": "31" }, { "Month": "SEP", "SaleFigure": "37" }, { "Month": "OCT", "SaleFigure": "42" }, { "Month": "NOV", "SaleFigure": "79" }, { "Month": "DEC", "SaleFigure": "11" } ]

The Markup

I have two CDN’s in the <head> section. The first is for AngularJS and second is for chart.js. I have also added the angular-chart.js file, the file I have downloaded and copied in my root directory.

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script> <script src="angular-chart.js"></script> </head> <body> <div ng-app ="myChart" ng-controller ="myController" style="width:700px;"> <canvas id="bar" class ="chart chart-bar" data ="data" labels ="labels" colours ="colors"> </canvas> </div> </body>

chart.js uses to create the charts. For more information, please go through .

The Controller Script

Add the chart.js dependency to the Angular module. I am using the GET method to request data from file using AngularJS . Once a request is made successfully, it will loop through data in file using , pushing data into two separate arrays. Use the data in the arrays to update $scope properties to provide data to the chart.

<script> var myApp = angular.module('myChart', [" chart.js "]); myApp.controller('myController', function ($scope, $http) { var request = { method: ' get ', url: ' chartdata.json ', dataType: 'json', contentType: "application/json" }; $scope.arrData = new Array; $scope.arrLabels = new Array; $http (request) . success (function (jsonData) { angular. forEach (jsonData, function (item) { $scope.arrData.push(item.SaleFigure); $scope.arrLabels.push(item.Month); }); $scope.data = new Array; $scope.labels = new Array; $scope. data .push($scope.arrData.slice(0)); for (var i = 0; i < $scope.arrLabels.length; i++) { $scope. labels .push($scope.arrLabels[i]); } }) .error(function () { }); $scope. colors = [{ fillColor: 'rgba(30, 169, 224, 0.8)', strokeColor: 'rgba(30, 169, 224, 0.8)', highlightFill: 'rgba(30, 169, 224,, 0.8)', highlightStroke: 'rgba(30, 169, 224, 0.8)' }]; }); </script> </html> Try it

That’s it. Now you can use a JSON file as a data source for your charts in AngularJS. Thanks for reading. ☺

← PreviousNext →