Events in ASP.NET MVC HeatMap Chart Component

18 Nov 201824 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.

CSHTML

@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>

CellClick.cs

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.

CSHTML

@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>

CellDoubleClick.cs

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.

CSHTML

@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>

CellRender.cs

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.

CSHTML

@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>

CellSelected.cs

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.

CSHTML

@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>

Created.cs

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.

CSHTML

@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>

LegendRender.cs

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.

CSHTML

@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>

Load.cs

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.

CSHTML

@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>

Loaded.cs

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.

CSHTML

@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>

Resized.cs

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.

CSHTML

@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>

TooltipRender.cs

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;
}