Angular nvd3 Force Direction Graph in MVC5 application ~ MiTechDev.com

Mitechdev.com is a programming blog which focused on Web Programming and development

Friday, 22 July 2016

Angular nvd3 Force Direction Graph in MVC5 application

08:16:00 Posted by raviteja swayampu , , No comments
Hi every one welcome back.In this post i am going to show you the real time Demo of the Angular nvd3 Force Directed Graph.There might be many graph libraries for Angular Charts on internet.But nvd3 provides rich user interaction events and good looking UI. It simply look Beautiful.Mainly this Force graph is used to display the network of things.For Example Diagrammatic representation of  your face book connection.The below is the Simple Live Demo of Force Directed Graph with some sample data.
i already explained about Angular nvd3 Multi bar Horizonthal graph here for implementation.And the live demo for this Graph is here.Live demo 

Angular nvd3 Force Direction Graph Demo


Angular nvd3 Force Direction Graph in MVC5 application

1.Create ASP.NET MVC web application(i created in Visual studio 2013).
2.Create a Controller(HomeController).
3.Create a Index action and add View to this action.
4.Replace the Index view code with below code as shown.

Index.cshtml
@{
    ViewBag.Title = "mitechdev.com";
}

<h2>Angular nvd3-Force Direction Graph</h2>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/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.3/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.7/angular-nvd3.min.js"></script>
<script src="~/Scripts/myscript.js"></script>

<div ng-app="myapp" ng-controller="GraphController">

    <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
</div>
5.Add below script code for Graph display...
6.The below script to display the Graph.Here we must add nvd3 directive as dependency in angular module.
7.We can customize this graph using $scope.options and i have prepared the data source using $scope.data .
myscript.js
var app = angular.module('myapp', ['nvd3']);

app.controller('GraphController', function ($scope) {
    var color = d3.scale.category20()
    $scope.options = {
        chart: {
            type: 'forceDirectedGraph',
            height: 500,
            // width: (function () { return nv.utils.windowSize().width })(),
            width:700,
            margin: { top: 20, right: 20, bottom: 20, left: 20 },
            color: function (d) {
                return color(d.group)
            },
            nodeExtras: function (node) {
                node && node
                  .append("text")
                  .attr("dx", 8)
                  .attr("dy", ".35em")
                  .text(function (d) { return d.name })
                  .style('font-size', '10px');
            }
        }
    };

    $scope.data = {
        "nodes": [
            { "name": "Myriel", "group": 1 },
            { "name": "Napoleon", "group": 1 },
            { "name": "Mlle.Baptistine", "group": 1 },
            { "name": "Mme.Magloire", "group": 1 },
            { "name": "CountessdeLo", "group": 1 },
            { "name": "Geborand", "group": 1 },
            { "name": "Champtercier", "group": 1 },
            { "name": "Cravatte", "group": 1 },
            { "name": "Count", "group": 1 },
            { "name": "OldMan", "group": 1 },
            { "name": "Labarre", "group": 2 },
            { "name": "Valjean", "group": 2 },
            { "name": "Marguerite", "group": 3 },
            { "name": "Mme.deR", "group": 2 },
            { "name": "Isabeau", "group": 2 },
            { "name": "Gervais", "group": 2 },
            { "name": "Tholomyes", "group": 3 },
            { "name": "Listolier", "group": 3 },
            { "name": "Fameuil", "group": 3 },
            { "name": "Blacheville", "group": 3 },
            { "name": "Favourite", "group": 3 },
            { "name": "Dahlia", "group": 3 },
            { "name": "Zephine", "group": 3 },
            { "name": "Fantine", "group": 3 },
            { "name": "Mme.Thenardier", "group": 4 },
            { "name": "Thenardier", "group": 4 },
            { "name": "Cosette", "group": 5 },
            { "name": "Javert", "group": 4 },
            { "name": "Fauchelevent", "group": 0 },
            { "name": "Bamatabois", "group": 2 },
            { "name": "Perpetue", "group": 3 },
            { "name": "Simplice", "group": 2 },
            { "name": "Scaufflaire", "group": 2 },
            { "name": "Woman1", "group": 2 },
            { "name": "Judge", "group": 2 },
            { "name": "Champmathieu", "group": 2 },
            { "name": "Brevet", "group": 2 },
            { "name": "Chenildieu", "group": 2 },
            { "name": "Cochepaille", "group": 2 },
            { "name": "Pontmercy", "group": 4 },
            { "name": "Boulatruelle", "group": 6 },
            { "name": "Eponine", "group": 4 },
            { "name": "Anzelma", "group": 4 },
            { "name": "Woman2", "group": 5 },
            { "name": "MotherInnocent", "group": 0 },
            { "name": "Gribier", "group": 0 },
            { "name": "Jondrette", "group": 7 },
            { "name": "Mme.Burgon", "group": 7 },
            { "name": "Gavroche", "group": 8 },
            { "name": "Gillenormand", "group": 5 },
            { "name": "Magnon", "group": 5 },
            { "name": "Mlle.Gillenormand", "group": 5 },
            { "name": "Mme.Pontmercy", "group": 5 },
            { "name": "Mlle.Vaubois", "group": 5 },
            { "name": "Lt.Gillenormand", "group": 5 },
            { "name": "Marius", "group": 8 },
            { "name": "BaronessT", "group": 5 },
            { "name": "Mabeuf", "group": 8 },
            { "name": "Enjolras", "group": 8 },
            { "name": "Combeferre", "group": 8 },
            { "name": "Prouvaire", "group": 8 },
            { "name": "Feuilly", "group": 8 },
            { "name": "Courfeyrac", "group": 8 },
            { "name": "Bahorel", "group": 8 },
            { "name": "Bossuet", "group": 8 },
            { "name": "Joly", "group": 8 },
            { "name": "Grantaire", "group": 8 },
            { "name": "MotherPlutarch", "group": 9 },
            { "name": "Gueulemer", "group": 4 },
            { "name": "Babet", "group": 4 },
            { "name": "Claquesous", "group": 4 },
            { "name": "Montparnasse", "group": 4 },
            { "name": "Toussaint", "group": 5 },
            { "name": "Child1", "group": 10 },
            { "name": "Child2", "group": 10 },
            { "name": "Brujon", "group": 4 },
            { "name": "Mme.Hucheloup", "group": 8 }
        ],
        "links": [
            { "source": 1, "target": 0, "value": 1 },
            { "source": 2, "target": 0, "value": 8 },
            { "source": 3, "target": 0, "value": 10 },
            { "source": 3, "target": 2, "value": 6 },
            { "source": 4, "target": 0, "value": 1 },
            { "source": 5, "target": 0, "value": 1 },
            { "source": 6, "target": 0, "value": 1 },
            { "source": 7, "target": 0, "value": 1 },
            { "source": 8, "target": 0, "value": 2 },
            { "source": 9, "target": 0, "value": 1 },
            { "source": 11, "target": 10, "value": 1 },
            { "source": 11, "target": 3, "value": 3 },
            { "source": 11, "target": 2, "value": 3 },
            { "source": 11, "target": 0, "value": 5 },
            { "source": 12, "target": 11, "value": 1 },
            { "source": 13, "target": 11, "value": 1 },
            { "source": 14, "target": 11, "value": 1 },
            { "source": 15, "target": 11, "value": 1 },
            { "source": 17, "target": 16, "value": 4 },
            { "source": 18, "target": 16, "value": 4 },
            { "source": 18, "target": 17, "value": 4 },
            { "source": 19, "target": 16, "value": 4 },
            { "source": 19, "target": 17, "value": 4 },
            { "source": 19, "target": 18, "value": 4 },
            { "source": 20, "target": 16, "value": 3 },
            { "source": 20, "target": 17, "value": 3 },
            { "source": 20, "target": 18, "value": 3 },
            { "source": 20, "target": 19, "value": 4 },
            { "source": 21, "target": 16, "value": 3 },
            { "source": 21, "target": 17, "value": 3 },
            { "source": 21, "target": 18, "value": 3 },
            { "source": 21, "target": 19, "value": 3 },
            { "source": 21, "target": 20, "value": 5 },
            { "source": 22, "target": 16, "value": 3 },
            { "source": 22, "target": 17, "value": 3 },
            { "source": 22, "target": 18, "value": 3 },
            { "source": 22, "target": 19, "value": 3 },
            { "source": 22, "target": 20, "value": 4 },
            { "source": 22, "target": 21, "value": 4 },
            { "source": 23, "target": 16, "value": 3 },
            { "source": 23, "target": 17, "value": 3 },
            { "source": 23, "target": 18, "value": 3 },
            { "source": 23, "target": 19, "value": 3 },
            { "source": 23, "target": 20, "value": 4 },
            { "source": 23, "target": 21, "value": 4 },
            { "source": 23, "target": 22, "value": 4 },
            { "source": 23, "target": 12, "value": 2 },
            { "source": 23, "target": 11, "value": 9 },
            { "source": 24, "target": 23, "value": 2 },
            { "source": 24, "target": 11, "value": 7 },
            { "source": 25, "target": 24, "value": 13 },
            { "source": 25, "target": 23, "value": 1 },
            { "source": 25, "target": 11, "value": 12 },
            { "source": 26, "target": 24, "value": 4 },
            { "source": 26, "target": 11, "value": 31 },
            { "source": 26, "target": 16, "value": 1 },
            { "source": 26, "target": 25, "value": 1 },
            { "source": 27, "target": 11, "value": 17 },
            { "source": 27, "target": 23, "value": 5 },
            { "source": 27, "target": 25, "value": 5 },
            { "source": 27, "target": 24, "value": 1 },
            { "source": 27, "target": 26, "value": 1 },
            { "source": 28, "target": 11, "value": 8 },
            { "source": 28, "target": 27, "value": 1 },
            { "source": 29, "target": 23, "value": 1 },
            { "source": 29, "target": 27, "value": 1 },
            { "source": 29, "target": 11, "value": 2 },
            { "source": 30, "target": 23, "value": 1 },
            { "source": 31, "target": 30, "value": 2 },
            { "source": 31, "target": 11, "value": 3 },
            { "source": 31, "target": 23, "value": 2 },
            { "source": 31, "target": 27, "value": 1 },
            { "source": 32, "target": 11, "value": 1 },
            { "source": 33, "target": 11, "value": 2 },
            { "source": 33, "target": 27, "value": 1 },
            { "source": 34, "target": 11, "value": 3 },
            { "source": 34, "target": 29, "value": 2 },
            { "source": 35, "target": 11, "value": 3 },
            { "source": 35, "target": 34, "value": 3 },
            { "source": 35, "target": 29, "value": 2 },
            { "source": 36, "target": 34, "value": 2 },
            { "source": 36, "target": 35, "value": 2 },
            { "source": 36, "target": 11, "value": 2 },
            { "source": 36, "target": 29, "value": 1 },
            { "source": 37, "target": 34, "value": 2 },
            { "source": 37, "target": 35, "value": 2 },
            { "source": 37, "target": 36, "value": 2 },
            { "source": 37, "target": 11, "value": 2 },
            { "source": 37, "target": 29, "value": 1 },
            { "source": 38, "target": 34, "value": 2 },
            { "source": 38, "target": 35, "value": 2 },
            { "source": 38, "target": 36, "value": 2 },
            { "source": 38, "target": 37, "value": 2 },
            { "source": 38, "target": 11, "value": 2 },
            { "source": 38, "target": 29, "value": 1 },
            { "source": 39, "target": 25, "value": 1 },
            { "source": 40, "target": 25, "value": 1 },
            { "source": 41, "target": 24, "value": 2 },
            { "source": 41, "target": 25, "value": 3 },
            { "source": 42, "target": 41, "value": 2 },
            { "source": 42, "target": 25, "value": 2 },
            { "source": 42, "target": 24, "value": 1 },
            { "source": 43, "target": 11, "value": 3 },
            { "source": 43, "target": 26, "value": 1 },
            { "source": 43, "target": 27, "value": 1 },
            { "source": 44, "target": 28, "value": 3 },
            { "source": 44, "target": 11, "value": 1 },
            { "source": 45, "target": 28, "value": 2 },
            { "source": 47, "target": 46, "value": 1 },
            { "source": 48, "target": 47, "value": 2 },
            { "source": 48, "target": 25, "value": 1 },
            { "source": 48, "target": 27, "value": 1 },
            { "source": 48, "target": 11, "value": 1 },
            { "source": 49, "target": 26, "value": 3 },
            { "source": 49, "target": 11, "value": 2 },
            { "source": 50, "target": 49, "value": 1 },
            { "source": 50, "target": 24, "value": 1 },
            { "source": 51, "target": 49, "value": 9 },
            { "source": 51, "target": 26, "value": 2 },
            { "source": 51, "target": 11, "value": 2 },
            { "source": 52, "target": 51, "value": 1 },
            { "source": 52, "target": 39, "value": 1 },
            { "source": 53, "target": 51, "value": 1 },
            { "source": 54, "target": 51, "value": 2 },
            { "source": 54, "target": 49, "value": 1 },
            { "source": 54, "target": 26, "value": 1 },
            { "source": 55, "target": 51, "value": 6 },
            { "source": 55, "target": 49, "value": 12 },
            { "source": 55, "target": 39, "value": 1 },
            { "source": 55, "target": 54, "value": 1 },
            { "source": 55, "target": 26, "value": 21 },
            { "source": 55, "target": 11, "value": 19 },
            { "source": 55, "target": 16, "value": 1 },
            { "source": 55, "target": 25, "value": 2 },
            { "source": 55, "target": 41, "value": 5 },
            { "source": 55, "target": 48, "value": 4 },
            { "source": 56, "target": 49, "value": 1 },
            { "source": 56, "target": 55, "value": 1 },
            { "source": 57, "target": 55, "value": 1 },
            { "source": 57, "target": 41, "value": 1 },
            { "source": 57, "target": 48, "value": 1 },
            { "source": 58, "target": 55, "value": 7 },
            { "source": 58, "target": 48, "value": 7 },
            { "source": 58, "target": 27, "value": 6 },
            { "source": 58, "target": 57, "value": 1 },
            { "source": 58, "target": 11, "value": 4 },
            { "source": 59, "target": 58, "value": 15 },
            { "source": 59, "target": 55, "value": 5 },
            { "source": 59, "target": 48, "value": 6 },
            { "source": 59, "target": 57, "value": 2 },
            { "source": 60, "target": 48, "value": 1 },
            { "source": 60, "target": 58, "value": 4 },
            { "source": 60, "target": 59, "value": 2 },
            { "source": 61, "target": 48, "value": 2 },
            { "source": 61, "target": 58, "value": 6 },
            { "source": 61, "target": 60, "value": 2 },
            { "source": 61, "target": 59, "value": 5 },
            { "source": 61, "target": 57, "value": 1 },
            { "source": 61, "target": 55, "value": 1 },
            { "source": 62, "target": 55, "value": 9 },
            { "source": 62, "target": 58, "value": 17 },
            { "source": 62, "target": 59, "value": 13 },
            { "source": 62, "target": 48, "value": 7 },
            { "source": 62, "target": 57, "value": 2 },
            { "source": 62, "target": 41, "value": 1 },
            { "source": 62, "target": 61, "value": 6 },
            { "source": 62, "target": 60, "value": 3 },
            { "source": 63, "target": 59, "value": 5 },
            { "source": 63, "target": 48, "value": 5 },
            { "source": 63, "target": 62, "value": 6 },
            { "source": 63, "target": 57, "value": 2 },
            { "source": 63, "target": 58, "value": 4 },
            { "source": 63, "target": 61, "value": 3 },
            { "source": 63, "target": 60, "value": 2 },
            { "source": 63, "target": 55, "value": 1 },
            { "source": 64, "target": 55, "value": 5 },
            { "source": 64, "target": 62, "value": 12 },
            { "source": 64, "target": 48, "value": 5 },
            { "source": 64, "target": 63, "value": 4 },
            { "source": 64, "target": 58, "value": 10 },
            { "source": 64, "target": 61, "value": 6 },
            { "source": 64, "target": 60, "value": 2 },
            { "source": 64, "target": 59, "value": 9 },
            { "source": 64, "target": 57, "value": 1 },
            { "source": 64, "target": 11, "value": 1 },
            { "source": 65, "target": 63, "value": 5 },
            { "source": 65, "target": 64, "value": 7 },
            { "source": 65, "target": 48, "value": 3 },
            { "source": 65, "target": 62, "value": 5 },
            { "source": 65, "target": 58, "value": 5 },
            { "source": 65, "target": 61, "value": 5 },
            { "source": 65, "target": 60, "value": 2 },
            { "source": 65, "target": 59, "value": 5 },
            { "source": 65, "target": 57, "value": 1 },
            { "source": 65, "target": 55, "value": 2 },
            { "source": 66, "target": 64, "value": 3 },
            { "source": 66, "target": 58, "value": 3 },
            { "source": 66, "target": 59, "value": 1 },
            { "source": 66, "target": 62, "value": 2 },
            { "source": 66, "target": 65, "value": 2 },
            { "source": 66, "target": 48, "value": 1 },
            { "source": 66, "target": 63, "value": 1 },
            { "source": 66, "target": 61, "value": 1 },
            { "source": 66, "target": 60, "value": 1 },
            { "source": 67, "target": 57, "value": 3 },
            { "source": 68, "target": 25, "value": 5 },
            { "source": 68, "target": 11, "value": 1 },
            { "source": 68, "target": 24, "value": 1 },
            { "source": 68, "target": 27, "value": 1 },
            { "source": 68, "target": 48, "value": 1 },
            { "source": 68, "target": 41, "value": 1 },
            { "source": 69, "target": 25, "value": 6 },
            { "source": 69, "target": 68, "value": 6 },
            { "source": 69, "target": 11, "value": 1 },
            { "source": 69, "target": 24, "value": 1 },
            { "source": 69, "target": 27, "value": 2 },
            { "source": 69, "target": 48, "value": 1 },
            { "source": 69, "target": 41, "value": 1 },
            { "source": 70, "target": 25, "value": 4 },
            { "source": 70, "target": 69, "value": 4 },
            { "source": 70, "target": 68, "value": 4 },
            { "source": 70, "target": 11, "value": 1 },
            { "source": 70, "target": 24, "value": 1 },
            { "source": 70, "target": 27, "value": 1 },
            { "source": 70, "target": 41, "value": 1 },
            { "source": 70, "target": 58, "value": 1 },
            { "source": 71, "target": 27, "value": 1 },
            { "source": 71, "target": 69, "value": 2 },
            { "source": 71, "target": 68, "value": 2 },
            { "source": 71, "target": 70, "value": 2 },
            { "source": 71, "target": 11, "value": 1 },
            { "source": 71, "target": 48, "value": 1 },
            { "source": 71, "target": 41, "value": 1 },
            { "source": 71, "target": 25, "value": 1 },
            { "source": 72, "target": 26, "value": 2 },
            { "source": 72, "target": 27, "value": 1 },
            { "source": 72, "target": 11, "value": 1 },
            { "source": 73, "target": 48, "value": 2 },
            { "source": 74, "target": 48, "value": 2 },
            { "source": 74, "target": 73, "value": 3 },
            { "source": 75, "target": 69, "value": 3 },
            { "source": 75, "target": 68, "value": 3 },
            { "source": 75, "target": 25, "value": 3 },
            { "source": 75, "target": 48, "value": 1 },
            { "source": 75, "target": 41, "value": 1 },
            { "source": 75, "target": 70, "value": 1 },
            { "source": 75, "target": 71, "value": 1 },
            { "source": 76, "target": 64, "value": 1 },
            { "source": 76, "target": 65, "value": 1 },
            { "source": 76, "target": 66, "value": 1 },
            { "source": 76, "target": 63, "value": 1 },
            { "source": 76, "target": 62, "value": 1 },
            { "source": 76, "target": 48, "value": 1 },
            { "source": 76, "target": 58, "value": 1 }
        ]
    }
});
Download the source code for this application here Source code

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