MultiBar Horizonthal Chart using Angular JS(nvd3.js) ~ MiTechDev.com

Friday, 15 July 2016

MultiBar Horizonthal Chart using Angular JS(nvd3.js)

23:08:00 Posted by raviteja swayampu , No comments
Hi every one in this tutorial i am going to explain about 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.These chart library is feature rich with amazing user interface.The official page for this library is here Angular-nvd3 

angularjs-nvd3

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

In this tutorial  i am going to explain about basic  Multi bar Horizonthal Chart with static data.In next tutorial i will explain how to feed chart with dynamic data from server in json format.
Lets see how i implemented this Multi Bar Horizonthal chart in my ASP.NET MVC application.

Multi Bar Horizontal Chart in ASP.NET MVC 5

1.Create a Web application 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 a Index action method --> Add View to Index action.
HomeController.cs
 public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
     }
4.Replace the Index.cshtml code with below code.
@{
    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 how amazing it is.

MultiBar Horizonthal Chart using Angular JS(nvd3.js)

To see the Live Demo and source code Click here Live Demo

Conclusion

I hope this article may helpful for many readers.Please subscribe to this blog www.mitechdev.com to get posts to your mail inbox.And follow through social networks(Facebook,twitter,google plus) for daily updates... 

0 comments:

Post a Comment