Wafer Map

[Web Version (in ASP)] aspdemo\wafermap.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

' The diameter of the wafer
diameter = 20
radius = diameter / 2.0

' The random data array are for a square grid of 20 x 20 cells
Set r = cd.RanSeries(2)
zData = r.get2DSeries(diameter, diameter, 0, 100)

' We remove cells that are outside the wafer circle by setting them to NoValue
For i = 0 To UBound(zData)
    x = i Mod diameter + 0.5
    y = (i - x) / diameter + 0.5
    If (x - radius) * (x - radius) + (y - radius) * (y - radius) > radius * radius Then
        zData(i) = cd.NoValue
    End If
Next

' Create an XYChart object of size 520 x 480 pixels.
Set c = cd.XYChart(520, 480)

' Add a title the chart with 15pt Arial Bold font
Call c.addTitle("Wafer Map Demonstration", "Arial Bold", 15)

' Set the plotarea at (50, 40) and of size 400 x 400 pixels. Set the backgound and border to
' transparent. Set both horizontal and vertical grid lines to light grey. (0xdddddd)
Set p = c.setPlotArea(50, 40, 400, 400, -1, -1, cd.Transparent, &Hdddddd, &Hdddddd)

' Create a discrete heat map with 20 x 20 cells
Set layer = c.addDiscreteHeatMapLayer(zData, diameter)

' Set the x-axis scale. Use 8pt Arial Bold font. Set axis color to transparent, so only the labels
' visible. Set 0.5 offset to position the labels in between the grid lines.
Call c.xAxis().setLinearScale(0, diameter, 1)
Call c.xAxis().setLabelStyle("Arial Bold", 8)
Call c.xAxis().setColors(cd.Transparent, cd.TextColor)
Call c.xAxis().setLabelOffset(0.5)

' Set the y-axis scale. Use 8pt Arial Bold font. Set axis color to transparent, so only the labels
' visible. Set 0.5 offset to position the labels in between the grid lines.
Call c.yAxis().setLinearScale(0, diameter, 1)
Call c.yAxis().setLabelStyle("Arial Bold", 8)
Call c.yAxis().setColors(cd.Transparent, cd.TextColor)
Call c.yAxis().setLabelOffset(0.5)

' Position the color axis 20 pixels to the right of the plot area and of the same height as the plot
' area. Put the labels on the right side of the color axis. Use 8pt Arial Bold font for the labels.
Set cAxis = layer.setColorAxis(p.getRightX() + 20, p.getTopY(), cd.TopLeft, p.getHeight(), _
    cd.Right)
Call cAxis.setLabelStyle("Arial Bold", 8)

' 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>Wafer Map</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;">
        Wafer Map
    </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>