Getting Started with ASP.NET Core

17 Feb 202224 minutes to read

This section explains you the steps required to create a TreeMap and demonstrate the basic usage of the TreeMap control.

Prerequisites

To get start with ASP.NET Core application, need to ensure the following software to be installed on the machine.

Visual Studio 2017
DotNet Core 2.0

Setup ASP.NET Core application with Essential JS 2 for ASP.NET Core

The following steps to create ASP.NET Core Application.

Step 1: Create ASP.NET Core Web Application with default template project in Visual Studio 2017.

Alt text

Step 2: Once your project created. We need to add Syncfusion EJ2 package into your application by using Nugget Package Manager.

Open the nuGet package manager.

Alt text

Install the Syncfusion.EJ2 package to the application

Alt text

After Installation complete this will included in the project. You can refer it from the Project Assembly Reference.

We need to install NewtonSoft.JSON as dependency since it Syncfusion.EJ2 dependent to NewtonSoft.JSON package.

Step 3: Open the _ViewImports.cshtml to import Syncfusion.EJ2 package.

@addTagHelper *, Syncfusion.EJ2

Step 4: Add client side resource through CDN or local package in the layout page _Layout.cshtml.

@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

Step 5: Adding Script Manager in layout page _Layout.cshtml.

<ejs-scripts></ejs-scripts>

Step 6: Add the below code to your Index.cshtml view page which is present under Views/Home folder, to initialize the smith chart.

@using Syncfusion.EJ2;
 <ejs-treemap id="treemap">
</ejs-treemap>

Render tree map

This section explains how to render the tree map with data source.

CSHTML
Data-source.cs
@using Syncfusion.EJ2;
<div id="container">
        @Html.EJS().TreeMap("container").Load("load").Height("350px").WeightValuePath("Count").LeafItemSettings(leaf => leaf.LabelPath("State")).Render()
</div>
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Here, the tree map is created with data source and set with the [weightValuePath] as count. You can customize the leaf level tree map items using the [leafItemSettings]. The properties such as [fill], [border], and [labelPosition] can be changed using the [leafItemSettings].

Apply color mapping

The color mapping feature supports customization of item colors based on the underlying value of item received from bound data source. Specify the field name from the values that have to be compared for the item in the [equalColorValuePath] or [rangeColorValuePath] property.

CSHTML
Color-mapping.cs
@{ 
    var colorMaps = new[]
    {
        new { value= 25, color= "#634D6F"},
        new { value= 12, color= "#B34D6D"},
        new { value= 9, color="#557C5C" },
        new { value= 7, color="#44537F" },
        new { value= 6, color= "#637392" },
        new { value= 3, color= "#7C754D" },
        new { value= 2, color= "#2E7A64" },
        new { value= 1, color= "#95659A" }
    };
}
@using Syncfusion.EJ2;
<div id="container">
    <ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
            <e-treemap-leafitemsettings labelPath="State" colorMapping="colorMaps"></e-treemap-leafitemsettings>
    </ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Enable legend

You can show legend for the tree map by setting the [visible] property to true in [legendSettings] object.

CSHTML
Legend.cs
@{ 
    var colorMaps = new[]
    {
        new { value= 25, color= "#634D6F"},
        new { value= 12, color= "#B34D6D"},
        new { value= 9, color="#557C5C" },
        new { value= 7, color="#44537F" },
        new { value= 6, color= "#637392" },
        new { value= 3, color= "#7C754D" },
        new { value= 2, color= "#2E7A64" },
        new { value= 1, color= "#95659A" }
    };
}
@using Syncfusion.EJ2;
<div id="container">
 <ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
        <e-treemap-leafitemsettings labelPath="State" colorMapping="colorMaps"></e-treemap-leafitemsettings>
        <e-treemap-legendsettings visible="true" position="@Syncfusion.EJ2.TreeMap.LegendPosition.Top" shape="@Syncfusion.EJ2.TreeMap.LegendShape.Rectangle"></e-treemap-legendsettings>
</ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Add labels

The labels are added to show additional information of the items in tree map. By default, the visibility of the label is true. This can be customized using the [showLabels] property in [leafItemSettings].

CSHTML
Labels.cs
@{ 
    var colorMaps = new[]
    {
        new { value= 25, color= "#634D6F"},
        new { value= 12, color= "#B34D6D"},
        new { value= 9, color="#557C5C" },
        new { value= 7, color="#44537F" },
        new { value= 6, color= "#637392" },
        new { value= 3, color= "#7C754D" },
        new { value= 2, color= "#2E7A64" },
        new { value= 1, color= "#95659A" }
    };
}
@using Syncfusion.EJ2;
<div id="container">
 <ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
        <e-treemap-leafitemsettings labelPath="State" colorMapping="colorMaps" showLabels="true" labelPosition="@Syncfusion.EJ2.TreeMap.LabelPosition.Center">
                <e-leafitemsettings-labelstyle color="white"></e-leafitemsettings-labelstyle>
        </e-treemap-leafitemsettings>
        <e-treemap-legendsettings visible="true" position="@Syncfusion.EJ2.TreeMap.LegendPosition.Top" shape="@Syncfusion.EJ2.TreeMap.LegendShape.Rectangle"></e-treemap-legendsettings>
</ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

The tooltips are used when labels cannot display information due to space constraints. Tooltips can be enabled by setting the [visible] property to true in [tooltipSettings] object.

CSHTML
Tooltip.cs
@{ 
    var colorMaps = new[]
    {
        new { value= 25, color= "#634D6F"},
        new { value= 12, color= "#B34D6D"},
        new { value= 9, color="#557C5C" },
        new { value= 7, color="#44537F" },
        new { value= 6, color= "#637392" },
        new { value= 3, color= "#7C754D" },
        new { value= 2, color= "#2E7A64" },
        new { value= 1, color= "#95659A" }
    };
}
@using Syncfusion.EJ2;
<div id="container">
 <ejs-treemap id="container" load="load" height="350px" weightValuePath="Count" equalColorValuePath="Count">
        <e-treemap-leafitemsettings labelPath="State" colorMapping="colorMaps" showLabels="true" labelPosition="@Syncfusion.EJ2.TreeMap.LabelPosition.Center">
                <e-leafitemsettings-labelstyle color="white"></e-leafitemsettings-labelstyle>
        </e-treemap-leafitemsettings>
        <e-treemap-legendsettings visible="true" position="@Syncfusion.EJ2.TreeMap.LegendPosition.Top" shape="@Syncfusion.EJ2.TreeMap.LegendShape.Rectangle"></e-treemap-legendsettings>
        <e-treemap-tooltipsettings visible="true"></e-treemap-tooltipsettings>
</ejs-treemap>
</div>         
<script>
    function load(args)
    { 
        var data = [
            { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 },
            { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 },
            { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 },
            { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 },
            { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 },
            { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 },
            { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 },
            { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 },
            { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 },
        ];
        args.treemap.dataSource = data;
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Getting Started with ASP.NET Core

Prerequisites

Setup ASP.NET Core application with Essential JS 2 for ASP.NET Core

Render tree map

Apply color mapping

Enable legend

Add labels

Enable tooltip