Learn MVC Using Angular Flot Chart

Introduction

In this article, we will learn about working with MVC using Angular Flot Chart with JSON data. With Flot Chart, we can have the following types of chart.

  • Area Chart
  • Bar Chart
  • Stacked Bar Chart

Area Chart

Output 1

MVC

Create MVC Project

Open Visual Studio 2015.

MVC

Go to New >> Project. Now it will open "New Project" window.

MVC

Select ASP.NET Web Application on Framework 4.6. Enter the name of project in “Solution name” textbox and click OK.

MVC

One more window should appear. Select MVC Template in this popup and click OK button.

Configure the jQuery Flot Chart

We will download the Flot plug-in from jQuery Flot

Open the _Layout.cshtml and refer the jqery.flot .js file in this View page.

  1. <script src="~/Plugin/flot/jquery.flot.js"></script>  
  2.         <script src="~/Plugin/flot/jquery.flot.resize.js"></script>  
  3.         <script src="~/Plugin/flot/jquery.flot.pie.js"></script>  
  4.         <script src="~/Plugin/flot/jquery.flot.time.js"></script>  
  5. <script src="~/Plugin/flot/jquery.flot.categories.js"></script>   

Open the HTML page and design it using flot elements & attributes.

  1. <flot datalist="'server/area.json'" options="chartAreaFlotChart" series="{'lines': areaSeries}"></flot>   

Here, we can show and change the visual view of data on the per year basis.

  1. <input type="checkbox" id="input10" ng-model="areaSeries[0]" />  
  2. <label for="input10">  
  3.     <strong>2017</strong>  
  4. </label>  
  5.   
  6. <input type="checkbox" id="input11" ng-model="areaSeries[1]" />  
  7. <label for="input11">  
  8.     <strong>2016</strong>  
  9. </label>  
  10.   
  11. <input type="checkbox" id="input12" ng-model="areaSeries[2]" />  
  12. <label for="input12">  
  13.     <strong>2015</strong>  
  14. </label>   

You have option to change the Flot Chart UI using “Angular Service”.

  1. var vm = this;  
  2.   
  3.         vm['default'] = {  
  4.             grid: {  
  5.                 hoverable: true,  
  6.                 clickable: true,  
  7.                 borderWidth: 0,  
  8.                 color: '#8394a9'  
  9.             },  
  10.             tooltip: true,  
  11.             tooltipOpts: {  
  12.                 content: '%x : %y'  
  13.             },  
  14.             xaxis: {  
  15.                 tickColor: '#f1f2f3',  
  16.                 mode: 'categories'  
  17.             },  
  18.             yaxis: {  
  19.                 tickColor: '#f1f2f3'  
  20.             },  
  21.             legend: {  
  22.                 backgroundColor: 'rgba(0,0,0,0)'  
  23.             },  
  24.             shadowSize: 0  
  25.         };  
  26.   
  27.         vm['area'] = angular.extend({}, vm['default'], {  
  28.             series: {  
  29.                 lines: {  
  30.                     show: true,  
  31.                     fill: 1  
  32.                 }  
  33.             }  
  34.         });  

vm[‘default’] set as common declaration, because going to use bar chart & stacked bar chart also.

Angular service (function) inject to the Angular controllers.

  1. function ChartController($scope, $http, $timeout, flotService)   

Set the values for attribute. Open the “angular controller” files and hard code an input or you may get & bind the values from server side.

  1. $scope.chartAreaFlotChart = flotService['area'];   

I have used as a json data for this flot chart & the files are given below.

  1. [  
  2.   {  
  3.     "label""2017",  
  4.     "color""#2196f3",  
  5.     "data": [  
  6.       [ "1", 530 ],  
  7.       [ "2", 720 ],  
  8.       [ "3", 580 ],  
  9.       [ "4", 920 ],  
  10.       [ "5", 510 ]  
  11.     ]  
  12.   },  
  13.   {  
  14.     "label""2016",  
  15.     "color""#03a9f4",  
  16.     "data": [  
  17.       [ "1", 370 ],  
  18.       [ "2", 310 ],  
  19.       [ "3", 420 ],  
  20.       [ "4", 590 ],  
  21.       [ "5", 240 ]  
  22.     ]  
  23.   },  
  24.   {  
  25.     "label""2015",  
  26.     "color""#00bcd4",  
  27.     "data": [  
  28.       [ "1", 230 ],  
  29.       [ "2", 170 ],  
  30.       [ "3", 280 ],  
  31.       [ "4", 450],  
  32.       [ "5", 100 ]  
  33.     ]  
  34.   }  
  35. ]  

Must link this file to the html attribute values

datalist="'server/area.json'"

Here I want to bind json data into flot chart, so that I write the “angular directive” as intermediate.

  1. angular  
  2.     .module('chart')  
  3.     .directive('flot', flot);  
  4.   
  5. function flot($http, $timeout) {  
  6.   
  7.     return {  
  8.         restrict: 'EA',  
  9.         template: '<div></div>',  
  10.         scope: {  
  11.             dataset: '=?',  
  12.             options: '=',  
  13.             series: '=',  
  14.             callback: '=',  
  15.             datalist: '='  
  16.         },  
  17.         link: linkFunction  
  18.     };  
  19.   
  20.     function linkFunction(scope, element, attributes) {  
  21.         var height, plot, plotArea, width;  
  22.         var heightDefault = 220;  
  23.   
  24.         plot = null;  
  25.   
  26.         width = attributes.width || '100%';  
  27.         height = attributes.height || heightDefault;  
  28.   
  29.         plotArea = $(element.children()[0]);  
  30.         plotArea.css({  
  31.             width: width,  
  32.             height: height  
  33.         });  
  34.   
  35.         function init() {  
  36.             var plotObj;  
  37.             if (!scope.dataset || !scope.options) return;  
  38.             plotObj = $.plot(plotArea, scope.dataset, scope.options);  
  39.             scope.$emit('plotReady', plotObj);  
  40.             if (scope.callback) {  
  41.                 scope.callback(plotObj, scope);  
  42.             }  
  43.   
  44.             return plotObj;  
  45.         }  
  46.   
  47.         function onDatasetChanged(dataset) {  
  48.             if (plot) {  
  49.                 plot.setData(dataset);  
  50.                 plot.setupGrid();  
  51.                 return plot.draw();  
  52.             } else {  
  53.                 plot = init();  
  54.                 onSerieToggled(scope.series);  
  55.                 return plot;  
  56.             }  
  57.         }  
  58.         scope.$watchCollection('dataset', onDatasetChanged, true);  
  59.   
  60.         function onSerieToggled(series) {  
  61.             if (!plot || !series) return;  
  62.             var someData = plot.getData();  
  63.             /*jshint -W089 */  
  64.             for (var sName in series) {  
  65.                 angular.forEach(series[sName], toggleFor(sName));  
  66.             }  
  67.   
  68.             plot.setData(someData);  
  69.             plot.draw();  
  70.   
  71.             function toggleFor(sName) {  
  72.                 return function (s, i) {  
  73.                     if (someData[i] && someData[i][sName])  
  74.                         someData[i][sName].show = s;  
  75.                 };  
  76.             }  
  77.         }  
  78.         scope.$watch('series', onSerieToggled, true);  
  79.   
  80.         function onDatalistChanged(datalist) {  
  81.   
  82.             if (datalist) {  
  83.   
  84.                 $http.get(datalist)  
  85.                   .success(function (data) {  
  86.   
  87.                       $timeout(function () {  
  88.                           scope.dataset = data;  
  89.                       });  
  90.   
  91.                   }).error(function () {  
  92.                       $.error('Flot chart: Bad request.');  
  93.                   });  
  94.   
  95.             }  
  96.         }  
  97.         scope.$watch('datalist', onDatalistChanged);  
  98.     }  
  99.   
  100. }  

After completing the entire configuration, add the reference file in _Layout.CSHTML page

  1. <script src="~/App/App.module.js"></script>  
  2.         <script src="~/App/App.config.js"></script>  
  3.         <script src="~/App/ChartDirective.js"></script>  
  4.         <script src="~/App/ChartController.js"></script>  
  5.         <script src="~/App/ChartService.js"></script>  

If you have any doubts about configuration, visit the article links below

Output 2

MVC

Let us talk about bar chart. It is also similar way of configuration like an “Area Chart”

Load Attribute values for bar chart angular controller files.

  1. $scope.chartBarFlotChart = flotService['bar'];   

Set the flot chart series as bar based on configuration in the “angular Service” file

  1. vm['bar'] = angular.extend({}, vm['default'], {  
  2.           series: {  
  3.               bars: {  
  4.                   align: 'center',  
  5.                   lineWidth: 0,  
  6.                   show: true,  
  7.                   barWidth: 0.6,  
  8.                   fill: 1  
  9.               }  
  10.           }  
  11.       });   

Call the function in html element based on bar chart types

  1. <flot datalist="'server/bar.json'" options="chartBarFlotChart"></flot>   

Json Data write given below. 

  1. [  
  2.   {  
  3.     "label""2017",  
  4.     "color""#2196f3",  
  5.     "data": [  
  6.       [ "Jan", 17 ],  
  7.       [ "Feb", 82 ],  
  8.       [ "Mar", 56 ],  
  9.       [ "Apr", 24 ],  
  10.       [ "May", 28 ],  
  11.       [ "Jun", 37 ],  
  12.       [ "Jul", 23 ],  
  13.       [ "Aug", 49 ],  
  14.       [ "Sep", 51 ],  
  15.       [ "Oct", 40 ]  
  16.     ]  
  17.   }  
  18. ]   

Output 3

MVC

Load Attribute values for stacked bar chart angular controller files.

  1. $scope.chartBarStackedFlotChart = flotService['bar-stacked'];   

Set the flot chart series as stacked bar based on configuration in the “angular Service” file

  1. vm['bar-stacked'] = angular.extend({}, vm['default'], {  
  2.           series: {  
  3.               bars: {  
  4.                   align: 'center',  
  5.                   lineWidth: 0,  
  6.                   show: true,  
  7.                   barWidth: 0.6,  
  8.                   fill: 1,  
  9.                   stacked: true  
  10.               }  
  11.           }  
  12.       });   

Assign the function in html element based on stacked bar chart types

  1. <flot datalist="'server/barstacked.json'" options="chartBarStackedFlotChart"></flot>   

Json Data is given below.

  1. [  
  2.   {  
  3.     "label""2017",  
  4.     "color""#2196f3",  
  5.     "data": [  
  6.       [ "Jan", 80 ],  
  7.       [ "Feb", 40 ],  
  8.       [ "Mar", 97 ],  
  9.       [ "Apr", 44 ],  
  10.       [ "May", 24 ],  
  11.       [ "Jun", 85 ],  
  12.       [ "Jul", 94 ],  
  13.       [ "Aug", 78 ],  
  14.       [ "Sep", 52 ],  
  15.       [ "Oct", 17 ],  
  16.       [ "Nov", 90 ],  
  17.       [ "Dec", 62 ]  
  18.     ]  
  19.   },  
  20.   {  
  21.     "label""2015",  
  22.     "color""#00bcd4",  
  23.     "data": [  
  24.       [ "Jan", 20 ],  
  25.       [ "Feb", 20 ],  
  26.       [ "Mar", 14 ],  
  27.       [ "Apr", 80 ],  
  28.       [ "May", 90 ],  
  29.       [ "Jun", 62 ],  
  30.       [ "Jul", 15 ],  
  31.       [ "Aug", 22 ],  
  32.       [ "Sep", 10 ],  
  33.       [ "Oct", 13 ],  
  34.       [ "Nov", 72 ],  
  35.       [ "Dec", 61 ]  
  36.     ]  
  37.   }]    

Now you can run the flot chart application in visual studio 2015. Output will appear in browser.

Output 4

MVC

Note

If you click any year in the check box, you can see the actual data representation in this flot chart. Stacked bar chart represents the actual difference on each month.

Source Download here.

Conclusion

In this article, we have  learned MVC using angular flot chart. If you have any queries, please tell me through the comments section. Your comments are very valuable.

Happy Coding …..

Up Next
    Ebook Download
    View all
    Learn
    View all