ASP.NET Core Blazor [Preview]
Search results

Getting Started with Essential JS 2 for ASP.NET Core Razor Components in Visual Studio 2019

This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor Components web application using the Visual Studio 2019

Prerequisites

The official prerequisites to create and run an ASP.NET Core Razor Components on Windows environment are described in the .NET Core Razor components documentation website.

Create a Blazor application from VS 2019

  1. Choose File > New > Project… in the Visual Studio menu bar.

    new project in aspnetcore razor

  2. Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.

    select framework

  3. Choose the Blazor template and change the application name, and then click OK.

Importing Essential JS 2 Razor components in the application

  1. Now, add the Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package to the new application by using the NuGet Package Manager. Right-click on your project and select Manage NuGet Packages.

    nuget explorer

  2. Search the Syncfusion.EJ2.AspNet.Core.RazorComponents keyword in the Browse tab and install Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package in the application.

    select nuget

  3. The Essential JS 2 package will be included in the project, after the installation process is completed.

  4. Open ~/_Imports.razor file and import the Syncfusion.EJ2.RazorComponents.

    @using Syncfusion.EJ2.RazorComponents
    @using Syncfusion.EJ2.RazorComponents.HeatMap
  5. Add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.

    import cdn

  6. Now, add the Syncfusion Essential JS 2 components in any web page (cshtml) in the Pages folder. For example, the heatmap component is added in the ~/Pages/Index.cshtml page.

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <Ejsheatmap id="Container"></Ejsheatmap>
        </div>
    </div>
</div>

Populate heat map with data

This section explains how to populate the following two-dimensional array data to the heat map.

<div class="control-section">
    <div class="row">
        <div class="col-md-12">
            <Ejsheatmap id="Container" DataSource="@heatmapData" ref="heatmap">
                <HeatMapTitle Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitle>
                <HeatMapCellSettings ShowLabel="true" tileType="CellType.Rect" ></HeatMapCellSettings>
                <HeatMapPaletteSettings Type="PaletteType.Fixed">
                    <HeatMapPalettes>
                        <HeatMapPalette Color="rgb(172, 213, 242)" Label="Low" Value=3></HeatMapPalette>
                        <HeatMapPalette Color="rgb(82, 123, 160)" Label="High" Value=75></HeatMapPalette>
                    </HeatMapPalettes>
                </HeatMapPaletteSettings>
            </Ejsheatmap>
        </div>
    </div>
</div>
@functions{

    public static int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39},
            {48, 46, 61, 47, 49, 41},
            {41, 55, 73, 23, 3, 79},
            {50, 59, 44, 43, 27, 42},
            {47, 49, 66, 53, 50, 34},
            {61, 40, 62, 26, 34, 54},
            {41, 69, 61, 84, 84, 87}
        };
        return dataSource;
    }

    EjsHeatMap heatmap;
    public object heatmapData { get; set; }
    protected override void OnAfterRender()
    {
        heatmapData = this.heatmap.DataSource = GetDefaultData();
    }
}

Enable axis labels

You can add axis labels to the heat map and format those labels using the xAxis and yAxis properties. Axis labels provide additional information about the data points populated in the heat map.

<Ejsheatmap id="Container" DataSource="@heatmapData" ref="heatmap" XAxis="@xAxis" YAxis="@yAxis"  showTooltip="true">
    <HeatMapTitle Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitle>
    <HeatMapCellSettings ShowLabel="true" tileType="CellType.Rect" ></HeatMapCellSettings>
    <HeatMapPaletteSettings Type="PaletteType.Fixed">
        <HeatMapPalettes>
            <HeatMapPalette Color="rgb(172, 213, 242)" Label="Low" Value=3></HeatMapPalette>
            <HeatMapPalette Color="rgb(82, 123, 160)" Label="High" Value=75></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
</Ejsheatmap>
@functions{

    public static int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39},
            {48, 46, 61, 47, 49, 41},
            {41, 55, 73, 23, 3, 79},
            {50, 59, 44, 43, 27, 42},
            {47, 49, 66, 53, 50, 34},
            {61, 40, 62, 26, 34, 54},
            {41, 69, 61, 84, 84, 87}
        };
        return dataSource;
    }

    public object xAxis = new
    {
        labels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert",
        "Laura", "Anne", "Paul", "Karin", "Mario" }
    };
    public object yAxis = new
    {
        labels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" }
    };
    EjsHeatMap heatmap;
    public object heatmapData { get; set; }
    protected override void OnAfterRender()
    {
        heatmapData = this.heatmap.DataSource = GetDefaultData();
    }
}

Add heat map title

Add a title using the HeatMapTitle property to the heat map to provide quick information to the user about the data populated in the heat map.

<Ejsheatmap id="Container" DataSource="@heatmapData" ref="heatmap" XAxis="@xAxis" YAxis="@yAxis"  showTooltip="true">
    <HeatMapTitle Text="Sales Revenue per Employee (in 1000 US$)" textStyle="style"></HeatMapTitle>
    <HeatMapCellSettings ShowLabel="true" tileType="CellType.Rect" ></HeatMapCellSettings>
    <HeatMapPaletteSettings Type="PaletteType.Fixed">
        <HeatMapPalettes>
            <HeatMapPalette Color="rgb(172, 213, 242)" Label="Low" Value=3></HeatMapPalette>
            <HeatMapPalette Color="rgb(82, 123, 160)" Label="High" Value=75></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
</Ejsheatmap>
@functions{

    public static int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39},
            {48, 46, 61, 47, 49, 41},
            {41, 55, 73, 23, 3, 79},
            {50, 59, 44, 43, 27, 42},
            {47, 49, 66, 53, 50, 34},
            {61, 40, 62, 26, 34, 54},
            {41, 69, 61, 84, 84, 87}
        };
        return dataSource;
    }
    public object style = new {
        size = "15px",
        fontWeight= "500",
        fontStyle= "Italic",
        fontFamily= "Segoe UI"
    };
    public object xAxis = new
    {
        labels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert",
        "Laura", "Anne", "Paul", "Karin", "Mario" }
    };
    public object yAxis = new
    {
        labels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" }
    };
    EjsHeatMap heatmap;
    public object heatmapData { get; set; }
    protected override void OnAfterRender()
    {
        heatmapData = this.heatmap.DataSource = GetDefaultData();
    }
}

Enable legend

Use a legend for the heat map in the legendSettings object by setting the visible property to true.

<Ejsheatmap id="Container" DataSource="@heatmapData" ref="heatmap" XAxis="@xAxis" YAxis="@yAxis" showTooltip="true">
    <HeatMapTitle Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitle>
    <HeatMapCellSettings ShowLabel="true" tileType="CellType.Rect"></HeatMapCellSettings>
    <HeatMapPaletteSettings Type="PaletteType.Gradient">
        <HeatMapPalettes>
            <HeatMapPalette Color="rgb(172, 213, 242)" Label="Low" Value=3></HeatMapPalette>
            <HeatMapPalette Color="rgb(127, 168, 201)" Label="Moderate" Value=33.3></HeatMapPalette>
            <HeatMapPalette Color="rgb(82, 123, 160)" Label="High" Value=75></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
    <HeatMapLegendSettings Visible="true" Position="LegendPosition.Right" Width="250px"></HeatMapLegendSettings>
</Ejsheatmap>
@functions{

    public static int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39},
            {48, 46, 61, 47, 49, 41},
            {41, 55, 73, 23, 3, 79},
            {50, 59, 44, 43, 27, 42},
            {47, 49, 66, 53, 50, 34},
            {61, 40, 62, 26, 34, 54},
            {41, 69, 61, 84, 84, 87}
        };
        return dataSource;
    }

    public object xAxis = new
    {
        labels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert",
        "Laura", "Anne", "Paul", "Karin", "Mario" }
    };
    public object yAxis = new
    {
        labels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" }
    };
    EjsHeatMap heatmap;
    public object heatmapData { get; set; }
    protected override void OnAfterRender()
    {
        heatmapData = this.heatmap.DataSource = GetDefaultData();
    }
}

Add data label

Add data labels to improve the readability of the heat map. This can be achieved by setting the showLabel property to true in the cellSettings object.

<Ejsheatmap id="Container" DataSource="@heatmapData" ref="heatmap" XAxis="@xAxis" YAxis="@yAxis" showTooltip="true">
    <HeatMapTitle Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitle>
    <HeatMapCellSettings ShowLabel="true" tileType="CellType.Rect"></HeatMapCellSettings>
    <HeatMapPaletteSettings Type="PaletteType.Gradient">
        <HeatMapPalettes>
            <HeatMapPalette Color="rgb(172, 213, 242)" Label="Low" Value=3></HeatMapPalette>
            <HeatMapPalette Color="rgb(127, 168, 201)" Label="Moderate" Value=33.3></HeatMapPalette>
            <HeatMapPalette Color="rgb(82, 123, 160)" Label="High" Value=75></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
    <HeatMapLegendSettings Visible="false" Position="LegendPosition.Right" Width="250px"></HeatMapLegendSettings>
</Ejsheatmap>
@functions{

    public static int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39},
            {48, 46, 61, 47, 49, 41},
            {41, 55, 73, 23, 3, 79},
            {50, 59, 44, 43, 27, 42},
            {47, 49, 66, 53, 50, 34},
            {61, 40, 62, 26, 34, 54},
            {41, 69, 61, 84, 84, 87}
        };
        return dataSource;
    }

    public object xAxis = new
    {
        labels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert",
        "Laura", "Anne", "Paul", "Karin", "Mario" }
    };
    public object yAxis = new
    {
        labels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" }
    };
    EjsHeatMap heatmap;
    public object heatmapData { get; set; }
    protected override void OnAfterRender()
    {
        heatmapData = this.heatmap.DataSource = GetDefaultData();
    }
}

Add custom cell palette

The default palette settings of the heat map cells can be customized by using the paletteSettings property. Using the palette property in paletteSettings object, you can change the color set for the cells. You can change the color mode of the cells to fixed or gradient mode using the type property.

<Ejsheatmap id="Container" DataSource="@heatmapData" ref="heatmap" XAxis="@xAxis" YAxis="@yAxis"  showTooltip="true" renderingMode="DrawType.SVG">
    <HeatMapTitle Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitle>
    <HeatMapCellSettings ShowLabel="true" tileType="CellType.Rect" ></HeatMapCellSettings>
    <HeatMapPaletteSettings Type="PaletteType.Gradient">
        <HeatMapPalettes>
            <HeatMapPalette Color="rgb(172, 213, 242)"></HeatMapPalette>
            <HeatMapPalette Color="rgb(127, 168, 201)"></HeatMapPalette>
            <HeatMapPalette Color="rgb(82, 123, 160)"></HeatMapPalette>
            <HeatMapPalette Color="rgb(37, 78, 119)"></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
</Ejsheatmap>
@functions{

    public static int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39},
            {48, 46, 61, 47, 49, 41},
            {41, 55, 73, 23, 3, 79},
            {50, 59, 44, 43, 27, 42},
            {47, 49, 66, 53, 50, 34},
            {61, 40, 62, 26, 34, 54},
            {41, 69, 61, 84, 84, 87}
        };
        return dataSource;
    }

    public object xAxis = new
    {
        labels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert",
        "Laura", "Anne", "Paul", "Karin", "Mario" }
    };
    public object yAxis = new
    {
        labels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" }
    };
    EjsHeatMap heatmap;
    public object heatmapData { get; set; }
    protected override void OnAfterRender()
    {
        heatmapData = this.heatmap.DataSource = GetDefaultData();
    }
}

Enable tooltip

The tooltip is used when you cannot display information by using the data labels due to space constraints. You can enable the tooltip by setting the showTooltip property to true.

<Ejsheatmap id="Container" DataSource="@heatmapData" ref="heatmap" XAxis="@xAxis" YAxis="@yAxis"  showTooltip="true">
    <HeatMapTitle Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitle>
    <HeatMapCellSettings ShowLabel="true" tileType="CellType.Rect" ></HeatMapCellSettings>
    <HeatMapPaletteSettings Type="PaletteType.Fixed">
        <HeatMapPalettes>
            <HeatMapPalette Color="rgb(172, 213, 242)" Label="Low" Value=3></HeatMapPalette>
            <HeatMapPalette Color="rgb(127, 168, 201)" Label="Moderate" Value=33.3></HeatMapPalette>
            <HeatMapPalette Color="rgb(82, 123, 160)" Label="High" Value=75></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
</Ejsheatmap>
@functions{

    public static int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39},
            {48, 46, 61, 47, 49, 41},
            {41, 55, 73, 23, 3, 79},
            {50, 59, 44, 43, 27, 42},
            {47, 49, 66, 53, 50, 34},
            {61, 40, 62, 26, 34, 54},
            {41, 69, 61, 84, 84, 87}
        };
        return dataSource;
    }

    public object xAxis = new
    {
        labels = new string[] {"Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert",
        "Laura", "Anne", "Paul", "Karin", "Mario" }
    };
    public object yAxis = new
    {
        labels = new string[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" }
    };
    EjsHeatMap heatmap;
    public object heatmapData { get; set; }
    protected override void OnAfterRender()
    {
        heatmapData = this.heatmap.DataSource = GetDefaultData();
    }
}