ChartDirector 7.1 (.NET Edition)

Heat Map Cell Labels




This example demonstrates adding labels to the cells, adding gaps between cells and using a custom color scale.

This example is similar to Discrete Heat Map, with the following additions:

Source Code Listing

[Windows Forms - C# version] NetWinCharts\CSharpWinCharts\heatmapcelllabels.cs
using System; using ChartDirector; namespace CSharpChartExplorer { public class heatmapcelllabels : DemoModule { //Name of demo module public string getName() { return "Heat Map Cell Labels"; } //Number of charts produced in this demo module public int getNoOfCharts() { return 1; } //Main code for creating chart. //Note: the argument chartIndex is unused because this demo only has 1 chart. public void createChart(WinChartViewer viewer, int chartIndex) { // The x-axis and y-axis labels string[] xLabels = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J"}; string[] yLabels = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"}; // Random data for the 10 x 10 cells RanSeries rand = new RanSeries(2); double[] zData = rand.get2DSeries(xLabels.Length, yLabels.Length, 0, 100); // We set the middle 5 x 5 cells to NoValue to remove them from the chart for(int x = 3; x < 7; ++x) { for(int y = 3; y < 7; ++y) { zData[y * xLabels.Length + x] = Chart.NoValue; } } // Create an XYChart object of size 480 x 540 pixels. XYChart c = new XYChart(480, 540); // Set the plotarea at (50, 40) and of size 400 x 400 pixels. Set the background, // border, and grid lines to transparent. PlotArea p = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, Chart.Transparent); // Create a discrete heat map with 10 x 10 cells DiscreteHeatMapLayer layer = c.addDiscreteHeatMapLayer(zData, xLabels.Length); // Set the x-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only // the labels are visible. Set 0.5 offset to position the labels in between the grid // lines. Position the x-axis at the top of the chart. c.xAxis().setLabels(xLabels); c.xAxis().setLabelStyle("Arial Bold", 8); c.xAxis().setColors(Chart.Transparent, Chart.TextColor); c.xAxis().setLabelOffset(0.5); c.xAxis().setTitle("X axis title placeholder", "Arial Bold", 12); c.setXAxisOnTop(); // Set the y-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only // the labels are visible. Set 0.5 offset to position the labels in between the grid // lines. Reverse the y-axis so that the labels are flowing top-down instead of // bottom-up. c.yAxis().setLabels(yLabels); c.yAxis().setLabelStyle("Arial Bold", 8); c.yAxis().setColors(Chart.Transparent, Chart.TextColor); c.yAxis().setLabelOffset(0.5); c.yAxis().setTitle("Y axis title placeholder", "Arial Bold", 12); c.yAxis().setReverse(); // Set a 3-pixel gap between cells layer.setCellGap(3); // Use the z value as the cell label layer.setDataLabelFormat("{z|0}"); // Position the color axis 20 pixels below the plot area and of the width as the plot // area. Put the labels at the bottom side of the color axis. Use 8pt Arial Bold font // for the labels. ColorAxis cAxis = layer.setColorAxis(p.getLeftX(), p.getBottomY() + 20, Chart.TopLeft, p.getWidth(), Chart.Bottom); cAxis.setLabelStyle("Arial Bold", 8); cAxis.setTitle("Color legend title placeholder", "Arial Bold", 12); // Set the color stops and scale of the color axis double[] colorScale = {0, 0x00ff00, 50, 0xffff00, 80, 0xff6600, 100, 0xff0000}; cAxis.setColorScale(colorScale); cAxis.setLinearScale(0, 100, 10); // Output the chart viewer.Chart = c; //include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("clickable", "", "title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'"); } } }

[Windows Forms - VB Version] NetWinCharts\VBNetWinCharts\heatmapcelllabels.vb
Imports System Imports Microsoft.VisualBasic Imports ChartDirector Public Class heatmapcelllabels Implements DemoModule 'Name of demo module Public Function getName() As String Implements DemoModule.getName Return "Heat Map Cell Labels" End Function 'Number of charts produced in this demo module Public Function getNoOfCharts() As Integer Implements DemoModule.getNoOfCharts Return 1 End Function 'Main code for creating chart. 'Note: the argument chartIndex is unused because this demo only has 1 chart. Public Sub createChart(viewer As WinChartViewer, chartIndex As Integer) _ Implements DemoModule.createChart ' The x-axis and y-axis labels Dim xLabels() As String = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} Dim yLabels() As String = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"} ' Random data for the 10 x 10 cells Dim rand As RanSeries = New RanSeries(2) Dim zData() As Double = rand.get2DSeries(UBound(xLabels) + 1, UBound(yLabels) + 1, 0, 100) ' We set the middle 5 x 5 cells to NoValue to remove them from the chart For x As Integer = 3 To 6 For y As Integer = 3 To 6 zData(y * (UBound(xLabels) + 1) + x) = Chart.NoValue Next Next ' Create an XYChart object of size 480 x 540 pixels. Dim c As XYChart = New XYChart(480, 540) ' Set the plotarea at (50, 40) and of size 400 x 400 pixels. Set the background, border, and ' grid lines to transparent. Dim p As PlotArea = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, _ Chart.Transparent) ' Create a discrete heat map with 10 x 10 cells Dim layer As DiscreteHeatMapLayer = c.addDiscreteHeatMapLayer(zData, UBound(xLabels) + 1) ' Set the x-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only the ' labels are visible. Set 0.5 offset to position the labels in between the grid lines. ' Position the x-axis at the top of the chart. c.xAxis().setLabels(xLabels) c.xAxis().setLabelStyle("Arial Bold", 8) c.xAxis().setColors(Chart.Transparent, Chart.TextColor) c.xAxis().setLabelOffset(0.5) c.xAxis().setTitle("X axis title placeholder", "Arial Bold", 12) c.setXAxisOnTop() ' Set the y-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only the ' labels are visible. Set 0.5 offset to position the labels in between the grid lines. ' Reverse the y-axis so that the labels are flowing top-down instead of bottom-up. c.yAxis().setLabels(yLabels) c.yAxis().setLabelStyle("Arial Bold", 8) c.yAxis().setColors(Chart.Transparent, Chart.TextColor) c.yAxis().setLabelOffset(0.5) c.yAxis().setTitle("Y axis title placeholder", "Arial Bold", 12) c.yAxis().setReverse() ' Set a 3-pixel gap between cells layer.setCellGap(3) ' Use the z value as the cell label layer.setDataLabelFormat("{z|0}") ' Position the color axis 20 pixels below the plot area and of the width as the plot area. ' Put the labels at the bottom side of the color axis. Use 8pt Arial Bold font for the ' labels. Dim cAxis As ColorAxis = layer.setColorAxis(p.getLeftX(), p.getBottomY() + 20, _ Chart.TopLeft, p.getWidth(), Chart.Bottom) cAxis.setLabelStyle("Arial Bold", 8) cAxis.setTitle("Color legend title placeholder", "Arial Bold", 12) ' Set the color stops and scale of the color axis Dim colorScale() As Double = {0, &H00ff00, 50, &Hffff00, 80, &Hff6600, 100, &Hff0000} cAxis.setColorScale(colorScale) cAxis.setLinearScale(0, 100, 10) ' Output the chart viewer.Chart = c 'include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("clickable", "", _ "title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'") End Sub End Class

[WPF - C#] NetWPFCharts\CSharpWPFCharts\heatmapcelllabels.cs
using System; using ChartDirector; namespace CSharpWPFCharts { public class heatmapcelllabels : DemoModule { //Name of demo module public string getName() { return "Heat Map Cell Labels"; } //Number of charts produced in this demo module public int getNoOfCharts() { return 1; } //Main code for creating chart. //Note: the argument chartIndex is unused because this demo only has 1 chart. public void createChart(WPFChartViewer viewer, int chartIndex) { // The x-axis and y-axis labels string[] xLabels = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J"}; string[] yLabels = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"}; // Random data for the 10 x 10 cells RanSeries rand = new RanSeries(2); double[] zData = rand.get2DSeries(xLabels.Length, yLabels.Length, 0, 100); // We set the middle 5 x 5 cells to NoValue to remove them from the chart for(int x = 3; x < 7; ++x) { for(int y = 3; y < 7; ++y) { zData[y * xLabels.Length + x] = Chart.NoValue; } } // Create an XYChart object of size 480 x 540 pixels. XYChart c = new XYChart(480, 540); // Set the plotarea at (50, 40) and of size 400 x 400 pixels. Set the background, // border, and grid lines to transparent. PlotArea p = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, Chart.Transparent); // Create a discrete heat map with 10 x 10 cells DiscreteHeatMapLayer layer = c.addDiscreteHeatMapLayer(zData, xLabels.Length); // Set the x-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only // the labels are visible. Set 0.5 offset to position the labels in between the grid // lines. Position the x-axis at the top of the chart. c.xAxis().setLabels(xLabels); c.xAxis().setLabelStyle("Arial Bold", 8); c.xAxis().setColors(Chart.Transparent, Chart.TextColor); c.xAxis().setLabelOffset(0.5); c.xAxis().setTitle("X axis title placeholder", "Arial Bold", 12); c.setXAxisOnTop(); // Set the y-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only // the labels are visible. Set 0.5 offset to position the labels in between the grid // lines. Reverse the y-axis so that the labels are flowing top-down instead of // bottom-up. c.yAxis().setLabels(yLabels); c.yAxis().setLabelStyle("Arial Bold", 8); c.yAxis().setColors(Chart.Transparent, Chart.TextColor); c.yAxis().setLabelOffset(0.5); c.yAxis().setTitle("Y axis title placeholder", "Arial Bold", 12); c.yAxis().setReverse(); // Set a 3-pixel gap between cells layer.setCellGap(3); // Use the z value as the cell label layer.setDataLabelFormat("{z|0}"); // Position the color axis 20 pixels below the plot area and of the width as the plot // area. Put the labels at the bottom side of the color axis. Use 8pt Arial Bold font // for the labels. ColorAxis cAxis = layer.setColorAxis(p.getLeftX(), p.getBottomY() + 20, Chart.TopLeft, p.getWidth(), Chart.Bottom); cAxis.setLabelStyle("Arial Bold", 8); cAxis.setTitle("Color legend title placeholder", "Arial Bold", 12); // Set the color stops and scale of the color axis double[] colorScale = {0, 0x00ff00, 50, 0xffff00, 80, 0xff6600, 100, 0xff0000}; cAxis.setColorScale(colorScale); cAxis.setLinearScale(0, 100, 10); // Output the chart viewer.Chart = c; //include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("clickable", "", "title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'"); } } }

[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\heatmapcelllabels.aspx
(Click here on how to convert this code to code-behind style.)
<%@ Page Language="C#" Debug="true" %> <%@ Import Namespace="ChartDirector" %> <%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %> <!DOCTYPE html> <script runat="server"> // // Page Load event handler // protected void Page_Load(object sender, EventArgs e) { // The x-axis and y-axis labels string[] xLabels = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J"}; string[] yLabels = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"}; // Random data for the 10 x 10 cells RanSeries rand = new RanSeries(2); double[] zData = rand.get2DSeries(xLabels.Length, yLabels.Length, 0, 100); // We set the middle 5 x 5 cells to NoValue to remove them from the chart for(int x = 3; x < 7; ++x) { for(int y = 3; y < 7; ++y) { zData[y * xLabels.Length + x] = Chart.NoValue; } } // Create an XYChart object of size 480 x 540 pixels. XYChart c = new XYChart(480, 540); // Set the plotarea at (50, 40) and of size 400 x 400 pixels. Set the background, border, and // grid lines to transparent. PlotArea p = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, Chart.Transparent); // Create a discrete heat map with 10 x 10 cells DiscreteHeatMapLayer layer = c.addDiscreteHeatMapLayer(zData, xLabels.Length); // Set the x-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only the // labels are visible. Set 0.5 offset to position the labels in between the grid lines. Position // the x-axis at the top of the chart. c.xAxis().setLabels(xLabels); c.xAxis().setLabelStyle("Arial Bold", 8); c.xAxis().setColors(Chart.Transparent, Chart.TextColor); c.xAxis().setLabelOffset(0.5); c.xAxis().setTitle("X axis title placeholder", "Arial Bold", 12); c.setXAxisOnTop(); // Set the y-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only the // labels are visible. Set 0.5 offset to position the labels in between the grid lines. Reverse // the y-axis so that the labels are flowing top-down instead of bottom-up. c.yAxis().setLabels(yLabels); c.yAxis().setLabelStyle("Arial Bold", 8); c.yAxis().setColors(Chart.Transparent, Chart.TextColor); c.yAxis().setLabelOffset(0.5); c.yAxis().setTitle("Y axis title placeholder", "Arial Bold", 12); c.yAxis().setReverse(); // Set a 3-pixel gap between cells layer.setCellGap(3); // Use the z value as the cell label layer.setDataLabelFormat("{z|0}"); // Position the color axis 20 pixels below the plot area and of the width as the plot area. Put // the labels at the bottom side of the color axis. Use 8pt Arial Bold font for the labels. ColorAxis cAxis = layer.setColorAxis(p.getLeftX(), p.getBottomY() + 20, Chart.TopLeft, p.getWidth(), Chart.Bottom); cAxis.setLabelStyle("Arial Bold", 8); cAxis.setTitle("Color legend title placeholder", "Arial Bold", 12); // Set the color stops and scale of the color axis double[] colorScale = {0, 0x00ff00, 50, 0xffff00, 80, 0xff6600, 100, 0xff0000}; cAxis.setColorScale(colorScale); cAxis.setLinearScale(0, 100, 10); // Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.SVG); // Include tool tip for the chart WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", "title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'"); } </script> <html> <head> <script type="text/javascript" src="cdjcv.js"></script> </head> <body> <chart:WebChartViewer id="WebChartViewer1" runat="server" /> </body> </html>

[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\heatmapcelllabels.aspx
(Click here on how to convert this code to code-behind style.)
<%@ Page Language="VB" Debug="true" %> <%@ Import Namespace="ChartDirector" %> <%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %> <!DOCTYPE html> <script runat="server"> ' ' Page Load event handler ' Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) ' The x-axis and y-axis labels Dim xLabels() As String = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} Dim yLabels() As String = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"} ' Random data for the 10 x 10 cells Dim rand As RanSeries = New RanSeries(2) Dim zData() As Double = rand.get2DSeries(UBound(xLabels) + 1, UBound(yLabels) + 1, 0, 100) ' We set the middle 5 x 5 cells to NoValue to remove them from the chart For x As Integer = 3 To 6 For y As Integer = 3 To 6 zData(y * (UBound(xLabels) + 1) + x) = Chart.NoValue Next Next ' Create an XYChart object of size 480 x 540 pixels. Dim c As XYChart = New XYChart(480, 540) ' Set the plotarea at (50, 40) and of size 400 x 400 pixels. Set the background, border, and ' grid lines to transparent. Dim p As PlotArea = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, _ Chart.Transparent) ' Create a discrete heat map with 10 x 10 cells Dim layer As DiscreteHeatMapLayer = c.addDiscreteHeatMapLayer(zData, UBound(xLabels) + 1) ' Set the x-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only the ' labels are visible. Set 0.5 offset to position the labels in between the grid lines. Position ' the x-axis at the top of the chart. c.xAxis().setLabels(xLabels) c.xAxis().setLabelStyle("Arial Bold", 8) c.xAxis().setColors(Chart.Transparent, Chart.TextColor) c.xAxis().setLabelOffset(0.5) c.xAxis().setTitle("X axis title placeholder", "Arial Bold", 12) c.setXAxisOnTop() ' Set the y-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only the ' labels are visible. Set 0.5 offset to position the labels in between the grid lines. Reverse ' the y-axis so that the labels are flowing top-down instead of bottom-up. c.yAxis().setLabels(yLabels) c.yAxis().setLabelStyle("Arial Bold", 8) c.yAxis().setColors(Chart.Transparent, Chart.TextColor) c.yAxis().setLabelOffset(0.5) c.yAxis().setTitle("Y axis title placeholder", "Arial Bold", 12) c.yAxis().setReverse() ' Set a 3-pixel gap between cells layer.setCellGap(3) ' Use the z value as the cell label layer.setDataLabelFormat("{z|0}") ' Position the color axis 20 pixels below the plot area and of the width as the plot area. Put ' the labels at the bottom side of the color axis. Use 8pt Arial Bold font for the labels. Dim cAxis As ColorAxis = layer.setColorAxis(p.getLeftX(), p.getBottomY() + 20, Chart.TopLeft, _ p.getWidth(), Chart.Bottom) cAxis.setLabelStyle("Arial Bold", 8) cAxis.setTitle("Color legend title placeholder", "Arial Bold", 12) ' Set the color stops and scale of the color axis Dim colorScale() As Double = {0, &H00ff00, 50, &Hffff00, 80, &Hff6600, 100, &Hff0000} cAxis.setColorScale(colorScale) cAxis.setLinearScale(0, 100, 10) ' Output the chart WebChartViewer1.Image = c.makeWebImage(Chart.SVG) ' Include tool tip for the chart WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", _ "title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'") End Sub </script> <html> <head> <script type="text/javascript" src="cdjcv.js"></script> </head> <body> <chart:WebChartViewer id="WebChartViewer1" runat="server" /> </body> </html>

[ASP.NET MVC - Controller] NetMvcCharts\Controllers\HeatmapcelllabelsController.cs
using System; using System.Web.Mvc; using ChartDirector; namespace NetMvcCharts.Controllers { public class HeatmapcelllabelsController : Controller { // // Default Action // public ActionResult Index() { ViewBag.Title = "Heat Map Cell Labels"; createChart(ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1")); return View("~/Views/Shared/ChartView.cshtml"); } // // Create chart // private void createChart(RazorChartViewer viewer) { // The x-axis and y-axis labels string[] xLabels = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J"}; string[] yLabels = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"}; // Random data for the 10 x 10 cells RanSeries rand = new RanSeries(2); double[] zData = rand.get2DSeries(xLabels.Length, yLabels.Length, 0, 100); // We set the middle 5 x 5 cells to NoValue to remove them from the chart for(int x = 3; x < 7; ++x) { for(int y = 3; y < 7; ++y) { zData[y * xLabels.Length + x] = Chart.NoValue; } } // Create an XYChart object of size 480 x 540 pixels. XYChart c = new XYChart(480, 540); // Set the plotarea at (50, 40) and of size 400 x 400 pixels. Set the background, border, and // grid lines to transparent. PlotArea p = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, Chart.Transparent); // Create a discrete heat map with 10 x 10 cells DiscreteHeatMapLayer layer = c.addDiscreteHeatMapLayer(zData, xLabels.Length); // Set the x-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only the // labels are visible. Set 0.5 offset to position the labels in between the grid lines. // Position the x-axis at the top of the chart. c.xAxis().setLabels(xLabels); c.xAxis().setLabelStyle("Arial Bold", 8); c.xAxis().setColors(Chart.Transparent, Chart.TextColor); c.xAxis().setLabelOffset(0.5); c.xAxis().setTitle("X axis title placeholder", "Arial Bold", 12); c.setXAxisOnTop(); // Set the y-axis labels. Use 8pt Arial Bold font. Set axis stem to transparent, so only the // labels are visible. Set 0.5 offset to position the labels in between the grid lines. // Reverse the y-axis so that the labels are flowing top-down instead of bottom-up. c.yAxis().setLabels(yLabels); c.yAxis().setLabelStyle("Arial Bold", 8); c.yAxis().setColors(Chart.Transparent, Chart.TextColor); c.yAxis().setLabelOffset(0.5); c.yAxis().setTitle("Y axis title placeholder", "Arial Bold", 12); c.yAxis().setReverse(); // Set a 3-pixel gap between cells layer.setCellGap(3); // Use the z value as the cell label layer.setDataLabelFormat("{z|0}"); // Position the color axis 20 pixels below the plot area and of the width as the plot area. // Put the labels at the bottom side of the color axis. Use 8pt Arial Bold font for the // labels. ColorAxis cAxis = layer.setColorAxis(p.getLeftX(), p.getBottomY() + 20, Chart.TopLeft, p.getWidth(), Chart.Bottom); cAxis.setLabelStyle("Arial Bold", 8); cAxis.setTitle("Color legend title placeholder", "Arial Bold", 12); // Set the color stops and scale of the color axis double[] colorScale = {0, 0x00ff00, 50, 0xffff00, 80, 0xff6600, 100, 0xff0000}; cAxis.setColorScale(colorScale); cAxis.setLinearScale(0, 100, 10); // Output the chart viewer.Image = c.makeWebImage(Chart.SVG); // Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", "title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'"); } } }

[ASP.NET MVC - View] NetMvcCharts\Views\Shared\ChartView.cshtml
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <style> @ViewBag.Style </style> @Scripts.Render("~/Scripts/cdjcv.js") </head> <body style="margin:5px 0px 0px 5px"> <div style="font:bold 18pt verdana;"> @ViewBag.Title </div> <hr style="border:solid 1px #000080; background:#000080" /> <div> @{ if (ViewBag.Viewer is Array) { // Display multiple charts for (int i = 0; i < ViewBag.Viewer.Length; ++i) { @:@Html.Raw(ViewBag.Viewer[i].RenderHTML()) } } else { // Display one chart only @:@Html.Raw(ViewBag.Viewer.RenderHTML()) } } </div> </body> </html>