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.

  1. <link href="~/Content/jqx.base.css" rel="stylesheet" />  
  2. <script src="~/Scripts/jquery-1.11.1.min.js"></script>  
  3. <script src="~/Scripts/demos.js"></script>  
  4. <script src="~/Scripts/jqxcore.js"></script>  
  5. <script src="~/Scripts/jqxdata.js"></script>  
  6. <script src="~/Scripts/jqxtreemap.js"></script> 
SQL Database part

Create Table

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

Create Table

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

Create Table

Create your MVC application

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

MVC application
 
MVC application
 
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.

ADO.NET Entity Data Model

ADO.NET Entity Data Model

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

properties

Finally, we see that EDMX model generates CountryPopulation class.

EDMX

Create a controller

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

controller

HomeController.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace TreeMapMVC4.Controllers   
  7. {  
  8.     public class HomeController: Controller {  
  9.         //Db Context  
  10.         private DbPersonnesEntities db = new DbPersonnesEntities();  
  11.         //  
  12.         // GET: /Home/  
  13.         public ActionResult Index() {  
  14.             return View();  
  15.         }  
  16.         public JsonResult GetPopulation() {  
  17.             var DbResult = from d in db.countryPopulation  
  18.             select new {  
  19.                 d.Country,  
  20.                     d.Population  
  21.             };  
  22.             return Json(DbResult, JsonRequestBehavior.AllowGet);  
  23.         }  
  24.     }  
  25. }  
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.

strongly typed view

Index.cshtml
  1. @model TreeMapMVC4.countryPopulation  
  2. @ {  
  3.     ViewBag.Title = "TreeMap MVC 4";  
  4. } < h2 > TreeMap MVC 4 < /h2> < div id = "treemap" > < /div>  
  5. @section scripts { < link href = "~/Content/jqx.base.css"  
  6.     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() {  
  7.         var source = {  
  8.             datatype: "json",  
  9.             datafields: [{  
  10.                 name: 'Country'  
  11.             }, {  
  12.                 name: 'Population'  
  13.             }],  
  14.             url: '/Home/GetPopulation'  
  15.         };  
  16.         var dataAdapter = new $.jqx.dataAdapter(source);  
  17.         $('#treemap').jqxTreeMap({  
  18.             width: 850,  
  19.             height: 400,  
  20.             source: dataAdapter,  
  21.             displayMember: 'Country',  
  22.             valueMember: 'Population',  
  23.             colorMode: 'rangeColors',  
  24.             colorRanges: [{  
  25.                 min: 1254040000,  
  26.                 max: 1454040000,  
  27.                 color: '#de290b'  
  28.             }, {  
  29.                 min: 1054040000,  
  30.                 max: 1254039999,  
  31.                 color: '#de440c'  
  32.             }, {  
  33.                 min: 300000000,  
  34.                 max: 1054040000,  
  35.                 color: '#ea7707'  
  36.             }, {  
  37.                 min: 210000000,  
  38.                 max: 460000000,  
  39.                 color: '#ee8a06'  
  40.             }, {  
  41.                 min: 190000000,  
  42.                 max: 209999999,  
  43.                 color: '#f19505'  
  44.             }, {  
  45.                 min: 180000000,  
  46.                 max: 189999999,  
  47.                 color: '#f6a903'  
  48.             }, {  
  49.                 min: 160000000,  
  50.                 max: 179999999,  
  51.                 color: '#f8b203'  
  52.             }, {  
  53.                 min: 140000000,  
  54.                 max: 159999999,  
  55.                 color: '#fabb02'  
  56.             }, {  
  57.                 min: 100000000,  
  58.                 max: 139999999,  
  59.                 color: '#fbbf01'  
  60.             }, {  
  61.                 min: 90000000,  
  62.                 max: 99999999,  
  63.                 color: '#fbcd01'  
  64.             }, {  
  65.                 min: 10000000,  
  66.                 max: 89999999,  
  67.                 color: '#fbde33'  
  68.             }],  
  69.             baseColor: '#52CBFF',  
  70.             legendScaleCallback: function(v) {  
  71.                 v /= 1000000000;  
  72.                 v = v.toFixed(2);  
  73.                 return v;  
  74.             },  
  75.             legendLabel: 'Population (in billions)'  
  76.         });  
  77.     }); < /script> < style > .jqx - treemap - legend {  
  78.         width: 380 px;  
  79.     } < /style>  
  80. }  
Run Application

Run Application

 


Similar Articles