MultiBar Horizontal Chart Using AngularJS (nvd3.js)

Hi everyone. In this tutorial, I am going to explain how to implement "Multi Bar Horizontal Chart", using Angular JS-nvd3 (based on D3) directive.This directive is designed to make it easier to work with nvd3.js re-usable charting library. This directive allows you to easily customize your charts via JSON API.This chart library is feature rich with the amazing user interface.The official page for this library is available here:



The key feature is that the original hierarchical structure of nvd3 models is completely preserved in directive JSON structure. This means that, while you create a complex chart that contains multiple elementary chart models (such as line, bar, axis, ...) you can in turn customize the properties of every internal elementary model as well as the global charting properties, the way you want. This can be done as usual, but it becomes quite easy to customize, while applying JSON approach.

In this tutorial, I am going to explain about basic multi bar horizontal charts with the static data. In the next tutorial, I will explain, how to feed the chart with the dynamic data from the Server in JSON format.

Let's see how I implement multi bar horizonthal chart in my ASP.NET MVC Application.

Multi bar horizontal chart in ASP.NET MVC 5 is as follows:

1. Create a Web Aplication, using empty MVC template in Visual Studio 2013.
   
2. Add a controller to Controllers folder --> right click on Controllers --> Add --> Controller --> select Empty Controller --> Add --> Name the controller(HomeController)--> OK.
   
3. Create an Index action method --> Add View to an Index action.
   
   HomeController.cs
   

   public class HomeController : Controller
      {
          public ActionResult Index()
          {
              return View();
          }
       }

4. Replace the Index.cshtml code with the code, given below:
   

   @{
       ViewBag.Title = "www.mitechdev.com";
   }
   
   <h2>multiBarHorizontalChart</h2>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
   <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
   <script>
       var app = angular.module('myapp', ['nvd3']);  //must add the nvd3 as dependency
   
       app.controller('MainCtrl', function ($scope) {
           //chart configuration options
           $scope.options = {
               chart: {
                   type: 'multiBarHorizontalChart',
                   height: 450,
                   x: function (d) { return d.label; },
                   y: function (d) { return d.value; },
                   showControls: true,
                   showValues: true,
                   duration: 500,
                   xAxis: {
                       showMaxMin: false
                   },
                   yAxis: {
                       axisLabel: 'Values',
                       tickFormat: function (d) {
                           return d3.format(',.2f')(d);
                       }
                   }
               }
           };
           //data source for chart
           $scope.data = [
               {
                   "key": "Series1",
                   "color": "#d62728",
                   "values": [
                       { "label": "Group A","value": -1.8746444827653},
                       {"label": "Group B","value": -8.0961543492239},
                       {"label": "Group C", "value": -0.57072943117674},
                       {"label": "Group D", "value": -2.4174010336624 },
                       {"label": "Group E","value": -0.72009071426284},
                       {"label": "Group F", "value": -0.77154485523777 },
                       {"label": "Group G","value": -0.90152097798131},
                       {"label": "Group H", "value": -0.91445417330854},
                       { "label": "Group I","value": -0.055746319141851}
                   ]
               },
               {
                   "key": "Series2",
                   "color": "#1f77b4",
                   "values": [
                       { "label": "Group A", "value": 25.307646510375 },
                       {"label": "Group B", "value": 16.756779544553},
                       {"label": "Group C", "value": 18.451534877007 },
                       {"label": "Group D","value": 8.6142352811805 },
                       {"label": "Group E","value": 7.8082472075876},
                       {"label": "Group F","value": 5.259101026956 },
                       { "label": "Group G", "value": 0.30947953487127 },
                       {"label": "Group H","value": 0},
                       { "label": "Group I","value": 0}
                   ]
               }
           ]
       });
   </script>
   <div ng-app="myapp" ng-controller="MainCtrl">
   
       <nvd3 options="options" data="data"></nvd3>
   
   </div>

5. Now, run the Application and see the output, and how amazing it is:
   
   
   

To see the live demo and source code, click here for the live demo.

Conclusion: I hope this article is helpful for many readers.