How To Create TreeMap With ASP.NET MVC 4

Introduction

In this post, I will explain how to create TreeMap, using jqxTreeMap Plugin with ASP.NET MVC 4, C#, and Entity Framework.

What is jqxTreeMap?

jqxTreeMap displays hierarchical data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension on the data.

First, let’s start downloading libraries from jqwidgets.

<link href="~/Content/jqx.base.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/demos.js"></script>
<script src="~/Scripts/jqxcore.js"></script>
<script src="~/Scripts/jqxdata.js"></script>
<script src="~/Scripts/jqxtreemap.js"></script>

SQL Database part

Create Table

You will find the table, given below, used in our application:



After creating the table, you can fill it using the data, as shown below:



Create your MVC application

Open Visual Studio. Click on File > New > Project and name your project, as shown below:

 

 

Creating ADO.NET Entity Data Model

Now, we need to create an Entity Data Model which allows us to retrieve data from the database.

Right click on the project name. Click Add > Add New Item. In the dialog box displayed, select Data > Click Add button.





After clicking Next button, the dialog box will be displayed, as shown below. You need to choose your server name and select your database.



Finally, we see that EDMX model generates CountryPopulation class.



Create a controller

Now, we proceed to create a controller. Right click on controller folder > Add > Controller > Enter Controller name (‘Home Controller’).



HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace TreeMapMVC4.Controllers
{
    public class HomeController: Controller {
        //Db Context
        private DbPersonnesEntities db = new DbPersonnesEntities();
        //
        // GET: /Home/
        public ActionResult Index() {
            return View();
        }
        public JsonResult GetPopulation() {
            var DbResult = from d in db.countryPopulation
            select new {
                d.Country,
                    d.Population
            };
            return Json(DbResult, JsonRequestBehavior.AllowGet);
        }
    }
}

As you can see, I am creating GetPopulation () action to retrieve the data from CountryPopulation table as JSON format.

Creating a strongly typed view

We are going to create a Strongly Typed View.



Index.cshtml

@model TreeMapMVC4.countryPopulation
@ {
    ViewBag.Title = "TreeMap MVC 4";
} < h2 > TreeMap MVC 4 < /h2> < div id = "treemap" > < /div>
@section scripts { < link href = "~/Content/jqx.base.css"
    rel = "stylesheet" / > < script src = "~/Scripts/jquery-1.11.1.min.js" > < /script> < script src = "~/Scripts/demos.js" > < /script> < script src = "~/Scripts/jqxcore.js" > < /script> < script src = "~/Scripts/jqxdata.js" > < /script> < script src = "~/Scripts/jqxtreemap.js" > < /script> < script type = "text/javascript" > $(document).ready(function() {
        var source = {
            datatype: "json",
            datafields: [{
                name: 'Country'
            }, {
                name: 'Population'
            }],
            url: '/Home/GetPopulation'
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $('#treemap').jqxTreeMap({
            width: 850,
            height: 400,
            source: dataAdapter,
            displayMember: 'Country',
            valueMember: 'Population',
            colorMode: 'rangeColors',
            colorRanges: [{
                min: 1254040000,
                max: 1454040000,
                color: '#de290b'
            }, {
                min: 1054040000,
                max: 1254039999,
                color: '#de440c'
            }, {
                min: 300000000,
                max: 1054040000,
                color: '#ea7707'
            }, {
                min: 210000000,
                max: 460000000,
                color: '#ee8a06'
            }, {
                min: 190000000,
                max: 209999999,
                color: '#f19505'
            }, {
                min: 180000000,
                max: 189999999,
                color: '#f6a903'
            }, {
                min: 160000000,
                max: 179999999,
                color: '#f8b203'
            }, {
                min: 140000000,
                max: 159999999,
                color: '#fabb02'
            }, {
                min: 100000000,
                max: 139999999,
                color: '#fbbf01'
            }, {
                min: 90000000,
                max: 99999999,
                color: '#fbcd01'
            }, {
                min: 10000000,
                max: 89999999,
                color: '#fbde33'
            }],
            baseColor: '#52CBFF',
            legendScaleCallback: function(v) {
                v /= 1000000000;
                v = v.toFixed(2);
                return v;
            },
            legendLabel: 'Population (in billions)'
        });
    }); < /script> < style > .jqx - treemap - legend {
        width: 380 px;
    } < /style>
}

Run Application