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:
[Web Version (in ASP)] aspdemo\heatmapcelllabels.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
' The x-axis and y-axis labels
xLabels = Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J")
yLabels = Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9")
' Random data for the 10 x 10 cells
Set rand = cd.RanSeries(2)
zData = 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 = 3 To 6
For y = 3 To 6
zData(y * (UBound(xLabels) + 1) + x) = cd.NoValue
Next
Next
' Create an XYChart object of size 480 x 540 pixels.
Set c = cd.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.
Set p = c.setPlotArea(50, 40, 400, 400, -1, -1, cd.Transparent, cd.Transparent)
' Create a discrete heat map with 10 x 10 cells
Set layer = 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.
Call c.xAxis().setLabels(xLabels)
Call c.xAxis().setLabelStyle("Arial Bold", 8)
Call c.xAxis().setColors(cd.Transparent, cd.TextColor)
Call c.xAxis().setLabelOffset(0.5)
Call c.xAxis().setTitle("X axis title placeholder", "Arial Bold", 12)
Call 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.
Call c.yAxis().setLabels(yLabels)
Call c.yAxis().setLabelStyle("Arial Bold", 8)
Call c.yAxis().setColors(cd.Transparent, cd.TextColor)
Call c.yAxis().setLabelOffset(0.5)
Call c.yAxis().setTitle("Y axis title placeholder", "Arial Bold", 12)
Call c.yAxis().setReverse()
' Set a 3-pixel gap between cells
Call layer.setCellGap(3)
' Use the z value as the cell label
Call 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.
Set cAxis = layer.setColorAxis(p.getLeftX(), p.getBottomY() + 20, cd.TopLeft, p.getWidth(), _
cd.Bottom)
Call cAxis.setLabelStyle("Arial Bold", 8)
Call cAxis.setTitle("Color legend title placeholder", "Arial Bold", 12)
' Set the color stops and scale of the color axis
colorScale = Array(0, &H00ff00, 50, &Hffff00, 80, &Hff6600, 100, &Hff0000)
Call cAxis.setColorScale(colorScale)
Call cAxis.setLinearScale(0, 100, 10)
' Output the chart
Set viewer = cd.WebChartViewer(Request, "chart1")
Call viewer.setChart(c, cd.SVG)
' Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'")
%>
<!DOCTYPE html>
<html>
<head>
<title>Heat Map Cell Labels</title>
<!-- Include ChartDirector Javascript Library to support chart interactions -->
<script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
<div style="font:bold 18pt verdana;">
Heat Map Cell Labels
</div>
<hr style="border:solid 1px #000080; background:#000080" />
<div style="font:10pt verdana; margin-bottom:1.5em">
<a href="viewsource.asp?file=<%= Request("SCRIPT_NAME") %>">View Chart Source Code</a>
</div>
<!-- ****** Here is the chart image ****** -->
<%= viewer.renderHTML() %>
</body>
</html>
© 2021 Advanced Software Engineering Limited. All rights reserved.