Events in ASP.NET CORE HeatMap Chart Component

1 Jul 202324 minutes to read

This section describes the HeatMap chart event, which occurs when the required actions are performed.

CellClick

When you click on a HeatMap cell, the cellClick event is triggered.

<ejs-heatmap id='container' cellClick="heatmapCellClick" dataSource="ViewBag.dataSource">
  <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>
</ejs-heatmap>

<script>
  window.heatmapCellClick = function (args) {
    console.log("The cell click event has been triggered!!!");
  }
</script>
public ActionResult CellClick()
{
    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;
 }

CellDoubleClick

When you double click on a HeatMap cell, the cellDoubleClick event is triggered.

<ejs-heatmap id='container' cellDoubleClick="heatmapCellDoubleClick" dataSource="ViewBag.dataSource">
  <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>
</ejs-heatmap>

<script>
  window.heatmapCellDoubleClick = function (args) {
    console.log("The cell double click event has been triggered!!!");
  }
</script>
public ActionResult CellDoubleClick()
{
    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;
}

CellRender

The cellRender event will be triggered before each HeatMap cell is rendered.

<ejs-heatmap id='container' cellRender="heatmapCellRender" dataSource="ViewBag.dataSource">
  <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>
</ejs-heatmap>

<script>
  window.heatmapCellRender = function (args) {
    console.log("The cell render event has been triggered!!!");
  }
</script>
public ActionResult CellRender()
{
    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;
}

CellSelected

When single or multiple cells in the HeatMap are selected, the cellSelected event is triggered.

<ejs-heatmap id='container' cellSelected="heatmapCellSelected" dataSource="ViewBag.dataSource" allowSelection="true">
  <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>
</ejs-heatmap>

<script>
  window.heatmapCellSelected = function (args) {
    console.log("The cell selected event has been triggered!!!");
  }
</script>
public ActionResult CellSelected()
{
    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;
}

Created

Once HeatMap has been completely rendered, the created event is triggered.

<ejs-heatmap id='container' created="heatmapCreated" dataSource="ViewBag.dataSource">
  <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>
</ejs-heatmap>

<script>
  window.heatmapCreated = function (args) {
    console.log("The created event has been triggered!!!");
  }
</script>
public ActionResult Created()
{
    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;
}

LegendRender

The legendRender event is triggered before the legend is rendered.

<ejs-heatmap id='container' legendRender="heatmapLegendRender" dataSource="ViewBag.dataSource">
  <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>
</ejs-heatmap>

<script>
  window.heatmapLegendRender = function (args) {
    console.log("The legend render event has been triggered!!!");
  }
</script>
public ActionResult LegendRender()
{
    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;
}

Load

The load event is triggered before the HeatMap is rendered.

<ejs-heatmap id='container' load="heatmapLoad" dataSource="ViewBag.dataSource">
  <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>
</ejs-heatmap>

<script>
  window.heatmapLoad = function (args) {
    console.log("The load event has been triggered!!!");
  }
</script>
public ActionResult Load()
{
    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;
}

Loaded

Once HeatMap is loaded, the loaded event is triggered.

<ejs-heatmap id='container' loaded="heatmapLoaded" dataSource="ViewBag.dataSource">
  <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>
</ejs-heatmap>

<script>
  window.heatmapLoaded = function (args) {
    console.log("The loaded event has been triggered!!!");
  }
</script>
public ActionResult Loaded()
{
    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;
}

Resized

When the window is resized, the resized event is triggered to notify the resize of the HeatMap.

<ejs-heatmap id='container' resized="heatmapResized" dataSource="ViewBag.dataSource">
  <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>
</ejs-heatmap>

<script>
  window.heatmapResized = function (args) {
    console.log("The resized event has been triggered!!!");
  }
</script>
public ActionResult Resized()
{
    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;
}

TooltipRender

The tooltipRender event is triggered before the tooltip is rendered on the HeatMap cell.

<ejs-heatmap id='container' tooltipRender="heatmapTooltipRender" dataSource="ViewBag.dataSource">
  <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>
</ejs-heatmap>

<script>
  window.heatmapTooltipRender = function (args) {
    console.log("The tooltip render event has been triggered!!!");
  }
</script>
public ActionResult TooltipRender()
{
    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;
}