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



Create MVC Project

Open Visual Studio 2015.



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



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



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.

<script src="~/Plugin/flot/jquery.flot.js"></script>
        <script src="~/Plugin/flot/jquery.flot.resize.js"></script>
        <script src="~/Plugin/flot/jquery.flot.pie.js"></script>
        <script src="~/Plugin/flot/jquery.flot.time.js"></script>
<script src="~/Plugin/flot/jquery.flot.categories.js"></script>

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

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

<input type="checkbox" id="input10" ng-model="areaSeries[0]" />
<label for="input10">
    <strong>2017</strong>
</label>

<input type="checkbox" id="input11" ng-model="areaSeries[1]" />
<label for="input11">
    <strong>2016</strong>
</label>

<input type="checkbox" id="input12" ng-model="areaSeries[2]" />
<label for="input12">
    <strong>2015</strong>
</label>

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

var vm = this;

        vm['default'] = {
            grid: {
                hoverable: true,
                clickable: true,
                borderWidth: 0,
                color: '#8394a9'
            },
            tooltip: true,
            tooltipOpts: {
                content: '%x : %y'
            },
            xaxis: {
                tickColor: '#f1f2f3',
                mode: 'categories'
            },
            yaxis: {
                tickColor: '#f1f2f3'
            },
            legend: {
                backgroundColor: 'rgba(0,0,0,0)'
            },
            shadowSize: 0
        };

        vm['area'] = angular.extend({}, vm['default'], {
            series: {
                lines: {
                    show: true,
                    fill: 1
                }
            }
        });

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

Angular service (function) inject to the Angular controllers.

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.

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

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

[
  {
    "label": "2017",
    "color": "#2196f3",
    "data": [
      [ "1", 530 ],
      [ "2", 720 ],
      [ "3", 580 ],
      [ "4", 920 ],
      [ "5", 510 ]
    ]
  },
  {
    "label": "2016",
    "color": "#03a9f4",
    "data": [
      [ "1", 370 ],
      [ "2", 310 ],
      [ "3", 420 ],
      [ "4", 590 ],
      [ "5", 240 ]
    ]
  },
  {
    "label": "2015",
    "color": "#00bcd4",
    "data": [
      [ "1", 230 ],
      [ "2", 170 ],
      [ "3", 280 ],
      [ "4", 450],
      [ "5", 100 ]
    ]
  }
]

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.

angular
    .module('chart')
    .directive('flot', flot);

function flot($http, $timeout) {

    return {
        restrict: 'EA',
        template: '<div></div>',
        scope: {
            dataset: '=?',
            options: '=',
            series: '=',
            callback: '=',
            datalist: '='
        },
        link: linkFunction
    };

    function linkFunction(scope, element, attributes) {
        var height, plot, plotArea, width;
        var heightDefault = 220;

        plot = null;

        width = attributes.width || '100%';
        height = attributes.height || heightDefault;

        plotArea = $(element.children()[0]);
        plotArea.css({
            width: width,
            height: height
        });

        function init() {
            var plotObj;
            if (!scope.dataset || !scope.options) return;
            plotObj = $.plot(plotArea, scope.dataset, scope.options);
            scope.$emit('plotReady', plotObj);
            if (scope.callback) {
                scope.callback(plotObj, scope);
            }

            return plotObj;
        }

        function onDatasetChanged(dataset) {
            if (plot) {
                plot.setData(dataset);
                plot.setupGrid();
                return plot.draw();
            } else {
                plot = init();
                onSerieToggled(scope.series);
                return plot;
            }
        }
        scope.$watchCollection('dataset', onDatasetChanged, true);

        function onSerieToggled(series) {
            if (!plot || !series) return;
            var someData = plot.getData();
            /*jshint -W089 */
            for (var sName in series) {
                angular.forEach(series[sName], toggleFor(sName));
            }

            plot.setData(someData);
            plot.draw();

            function toggleFor(sName) {
                return function (s, i) {
                    if (someData[i] && someData[i][sName])
                        someData[i][sName].show = s;
                };
            }
        }
        scope.$watch('series', onSerieToggled, true);

        function onDatalistChanged(datalist) {

            if (datalist) {

                $http.get(datalist)
                  .success(function (data) {

                      $timeout(function () {
                          scope.dataset = data;
                      });

                  }).error(function () {
                      $.error('Flot chart: Bad request.');
                  });

            }
        }
        scope.$watch('datalist', onDatalistChanged);
    }

}

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

<script src="~/App/App.module.js"></script>
        <script src="~/App/App.config.js"></script>
        <script src="~/App/ChartDirective.js"></script>
        <script src="~/App/ChartController.js"></script>
        <script src="~/App/ChartService.js"></script>

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

• Learn Basics Of MVC Using AngularJS
• Learn MVC Using Angular UI-Route
• Learn MVC Using Angular Role Based Login
• Learn MVC Using Angular Datatable
• Learn MVC Using Angular Crystal Report
• Learn MVC Using Angular Pie Chart

Output 2



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.

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

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

vm['bar'] = angular.extend({}, vm['default'], {
          series: {
              bars: {
                  align: 'center',
                  lineWidth: 0,
                  show: true,
                  barWidth: 0.6,
                  fill: 1
              }
          }
      });

Call the function in html element based on bar chart types

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

Json Data write given below. 

[
  {
    "label": "2017",
    "color": "#2196f3",
    "data": [
      [ "Jan", 17 ],
      [ "Feb", 82 ],
      [ "Mar", 56 ],
      [ "Apr", 24 ],
      [ "May", 28 ],
      [ "Jun", 37 ],
      [ "Jul", 23 ],
      [ "Aug", 49 ],
      [ "Sep", 51 ],
      [ "Oct", 40 ]
    ]
  }
]

Output 3



Load Attribute values for stacked bar chart angular controller files.

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

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

vm['bar-stacked'] = angular.extend({}, vm['default'], {
          series: {
              bars: {
                  align: 'center',
                  lineWidth: 0,
                  show: true,
                  barWidth: 0.6,
                  fill: 1,
                  stacked: true
              }
          }
      });

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

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

Json Data is given below.

[
  {
    "label": "2017",
    "color": "#2196f3",
    "data": [
      [ "Jan", 80 ],
      [ "Feb", 40 ],
      [ "Mar", 97 ],
      [ "Apr", 44 ],
      [ "May", 24 ],
      [ "Jun", 85 ],
      [ "Jul", 94 ],
      [ "Aug", 78 ],
      [ "Sep", 52 ],
      [ "Oct", 17 ],
      [ "Nov", 90 ],
      [ "Dec", 62 ]
    ]
  },
  {
    "label": "2015",
    "color": "#00bcd4",
    "data": [
      [ "Jan", 20 ],
      [ "Feb", 20 ],
      [ "Mar", 14 ],
      [ "Apr", 80 ],
      [ "May", 90 ],
      [ "Jun", 62 ],
      [ "Jul", 15 ],
      [ "Aug", 22 ],
      [ "Sep", 10 ],
      [ "Oct", 13 ],
      [ "Nov", 72 ],
      [ "Dec", 61 ]
    ]
  }]

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

Output 4



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