ASP.NET Core
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Dimensions in ASP.NET Core HeatMap Chart control

Size for container

Heat map can be rendered to its container size. You can set the size through inline or CSS.

    <div id='container'>
        <div id='element' style="width:650px; height:350px;"></div>
    </div>

Size for heat map

You can set the size of heat map directly by using the width and height properties.

In pixel

You can set the size for heat map in a pixel.

tagHelper
pixel.cs
<ejs-heatmap id='container' dataSource="ViewBag.dataSource" showTooltip="true" width="650px" height="350px">
  <e-heatmap-titlesettings text="Sales Revenue per Employee (in 1000 US$)" textStyle="ViewBag.textStyle">
  </e-heatmap-titlesettings>
  <e-heatmap-xaxis labels="ViewBag.xlabels">
  </e-heatmap-xaxis>
  <e-heatmap-yaxis labels="ViewBag.ylabels">
  </e-heatmap-yaxis>
  <e-heatmap-cellsettings showLabel="true"></e-heatmap-cellsettings>
</ejs-heatmap>
public ActionResult Pixel()
{
    ViewBag.textStyle = new
     {
         size= "15px",
         fontWeight= "500",
         fontStyle= "Normal",
         fontFamily= "Segoe UI"
         };
         string[] xlabels = new string[12] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Paul", "Karin", "Mario" };
         ViewBag.xLabels = xlabels;
         string[] yLabels = new string[6] { "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat" };
         ViewBag.yLabels = yLabels;
        ViewBag.dataSource = GetDataSource();
        return View();
}

 private int[,] GetDataSource()
 {
     int[,] data = new int[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
            };
            return data;
 }

In percentage

By setting value in percentage, heat map gets its dimension with respect to its container. For example, when the height is ‘50%’, heat map rendered to half of the container height.

tagHelper
percentage.cs
<ejs-heatmap id='container' dataSource="ViewBag.dataSource" showTooltip="true" width="80%" height="90%">
  <e-heatmap-titlesettings text="Sales Revenue per Employee (in 1000 US$)" textStyle="ViewBag.textStyle">
  </e-heatmap-titlesettings>
  <e-heatmap-xaxis labels="ViewBag.xlabels">
  </e-heatmap-xaxis>
  <e-heatmap-yaxis labels="ViewBag.ylabels">
  </e-heatmap-yaxis>
  <e-heatmap-cellsettings showLabel="true"></e-heatmap-cellsettings>
</ejs-heatmap>
public ActionResult Percentage()
{
    ViewBag.textStyle = new
     {
         size= "15px",
         fontWeight= "500",
         fontStyle= "Normal",
         fontFamily= "Segoe UI"
         };
         string[] xlabels = new string[12] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Paul", "Karin", "Mario" };
         ViewBag.xLabels = xlabels;
         string[] yLabels = new string[6] { "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat" };
         ViewBag.yLabels = yLabels;
        ViewBag.dataSource = GetDataSource();
        return View();
}

 private int[,] GetDataSource()
 {
     int[,] data = new int[,]
            {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
            };
            return data;
 }
Previous
Next