Network graph from functional groups

Good morning, today I want to learn something visual to make my business tables less boring.

visjs logo

I choose vis.js network chart, so I download and include their scripts.

Then I define a style

    .network {
        display:block;
        width:100%;
        height:400px;
        border:solid;
        background-color:white;
    }

and wrapper to create the graph.

    function showNetwork(data) {
        var options = {};
        var container = document.querySelector('.network');
        network = new vis.Network(container, data, options);
    }

In a modern web app the call must be async

    $.ajax({
        type: "POST",
        url: "OilAlerts.aspx",<br>async: true,
        data: { method: "ShowNetwork" },
        dataType: "json",
        success: function (data) {
            showNetwork(data);
        },
        error: function (e) {
            alert(e);
        });

Hey, take a walk on the mild side of a higher language since I’m calling a sort of .net web api to populate the data.

    protected async Task InitialisePage()
    {
        // ....
        if (Request.Form["method"] == "ShowNetwork")
        {
            // ....
            object obj = new { edges = edges, nodes = nodes };
            string json = new JavaScriptSerializer().Serialize(obj);
            Response.Write(json);
            Response.ContentType = "application/json; charset=utf-8";
            Response.Flush();
            Response.End();
            return;
        }

The idea is that a single grouping on the table data bind is mapped to the nodes of the network graph

var portfolioNodes =
    myAlerts
    .GroupBy(a => a.Portfolio)
    .Select(k => new
        {
            id = k.Key,
            label = String.IsNullOrWhiteSpace(k.Key) ? "No Portfolio" : k.Key,
            shape = "square",
            color = new { background = "blue" },
        });

and a double grouping to the edges!

var cmdty2portEdges =
    myAlerts
    .GroupBy(a => new { a.Commodity, a.Portfolio })
    .Select(k => new
        {
            from = k.Key.Commodity,
            to = k.Key.Portfolio,
            label = k.Count().ToString(),
            arrows = "to"
        });

Isn’t it cool?!

One thought on “Network graph from functional groups

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s