Events in ASP.NET MVC 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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").CellClick("heatmapCellClick").TitleSettings(ts => 
ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapCellClick(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.

@using Syncfusion.EJ2;

@Html.EJS().HeatMap("container").CellDoubleClick("heatmapCellDoubleClick").TitleSettings(ts =>
  ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
    xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
      yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapCellDoubleClick(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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").CellRender("heatmapCellRender").TitleSettings(ts =>
  ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
    xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
      yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapCellRender(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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").CellSelected("heatmapCellSelected").AllowSelection(true).TitleSettings(ts =>
  ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
    xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
      yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapCellSelected(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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").Created("heatmapCreated").TitleSettings(ts =>
  ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
    xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
      yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapCreated(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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").LegendRender("heatmapLegendRender").TitleSettings(ts =>
  ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
    xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
      yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapLegendRender(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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").Load("heatmapLoad").TitleSettings(ts =>
  ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
    xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
      yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapLoad(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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").Loaded("heatmapLoaded").TitleSettings(ts =>
  ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
    xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
      yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapLoaded(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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").Resized("heatmapResized").TitleSettings(ts =>
  ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
    xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
      yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapResized(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.

@using Syncfusion.EJ2;
@Html.EJS().HeatMap("container").TooltipRender("heatmapTooltipRender").TitleSettings(ts =>
  ts.Text("Sales Revenue per Employee (in 1000 US$)").TextStyle(ViewBag.textStyle)).XAxis(xAxis =>
    xAxis.Labels(ViewBag.xLabels)).YAxis(yaxis =>
      yaxis.Labels(ViewBag.yLabels)).DataSource(ViewBag.dataSource).Render()

<script>
  function heatmapTooltipRender(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;
}