Wafer Map

[Windows Forms - C# version] NetWinCharts\CSharpWinCharts\wafermap.cs

using System;
using ChartDirector;

namespace CSharpChartExplorer
{
    public class wafermap : DemoModule
    {
        //Name of demo module
        public string getName() { return "Wafer Map"; }

        //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 diameter of the wafer
            int diameter = 20;
            double radius = diameter / 2.0;

            // The random data array are for a square grid of 20 x 20 cells
            RanSeries r = new RanSeries(2);
            double[] zData = r.get2DSeries(diameter, diameter, 0, 100);

            // We remove cells that are outside the wafer circle by setting them to NoValue
            for(int i = 0; i < zData.Length; ++i) {
                double x = i % diameter + 0.5;
                double y = (i - x) / diameter + 0.5;
                if ((x - radius) * (x - radius) + (y - radius) * (y - radius) > radius * radius) {
                    zData[i] = Chart.NoValue;
                }
            }

            // Create an XYChart object of size 520 x 480 pixels.
            XYChart c = new XYChart(520, 480);

            // Add a title the chart with 15pt Arial Bold font
            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)
            PlotArea p = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, 0xdddddd,
                0xdddddd);

            // Create a discrete heat map with 20 x 20 cells
            DiscreteHeatMapLayer 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.
            c.xAxis().setLinearScale(0, diameter, 1);
            c.xAxis().setLabelStyle("Arial Bold", 8);
            c.xAxis().setColors(Chart.Transparent, Chart.TextColor);
            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.
            c.yAxis().setLinearScale(0, diameter, 1);
            c.yAxis().setLabelStyle("Arial Bold", 8);
            c.yAxis().setColors(Chart.Transparent, Chart.TextColor);
            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.
            ColorAxis cAxis = layer.setColorAxis(p.getRightX() + 20, p.getTopY(), Chart.TopLeft,
                p.getHeight(), Chart.Right);
            cAxis.setLabelStyle("Arial Bold", 8);

            // 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\wafermap.vb

Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector

Public Class wafermap
    Implements DemoModule

    'Name of demo module
    Public Function getName() As String Implements DemoModule.getName
        Return "Wafer Map"
    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 diameter of the wafer
        Dim diameter As Integer = 20
        Dim radius As Double = diameter / 2.0

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

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

        ' Create an XYChart object of size 520 x 480 pixels.
        Dim c As XYChart = New XYChart(520, 480)

        ' Add a title the chart with 15pt Arial Bold font
        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)
        Dim p As PlotArea = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, &Hdddddd, _
            &Hdddddd)

        ' Create a discrete heat map with 20 x 20 cells
        Dim layer As DiscreteHeatMapLayer = 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.
        c.xAxis().setLinearScale(0, diameter, 1)
        c.xAxis().setLabelStyle("Arial Bold", 8)
        c.xAxis().setColors(Chart.Transparent, Chart.TextColor)
        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.
        c.yAxis().setLinearScale(0, diameter, 1)
        c.yAxis().setLabelStyle("Arial Bold", 8)
        c.yAxis().setColors(Chart.Transparent, Chart.TextColor)
        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.
        Dim cAxis As ColorAxis = layer.setColorAxis(p.getRightX() + 20, p.getTopY(), _
            Chart.TopLeft, p.getHeight(), Chart.Right)
        cAxis.setLabelStyle("Arial Bold", 8)

        ' 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\wafermap.cs

using System;
using ChartDirector;

namespace CSharpWPFCharts
{
    public class wafermap : DemoModule
    {
        //Name of demo module
        public string getName() { return "Wafer Map"; }

        //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 diameter of the wafer
            int diameter = 20;
            double radius = diameter / 2.0;

            // The random data array are for a square grid of 20 x 20 cells
            RanSeries r = new RanSeries(2);
            double[] zData = r.get2DSeries(diameter, diameter, 0, 100);

            // We remove cells that are outside the wafer circle by setting them to NoValue
            for(int i = 0; i < zData.Length; ++i) {
                double x = i % diameter + 0.5;
                double y = (i - x) / diameter + 0.5;
                if ((x - radius) * (x - radius) + (y - radius) * (y - radius) > radius * radius) {
                    zData[i] = Chart.NoValue;
                }
            }

            // Create an XYChart object of size 520 x 480 pixels.
            XYChart c = new XYChart(520, 480);

            // Add a title the chart with 15pt Arial Bold font
            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)
            PlotArea p = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, 0xdddddd,
                0xdddddd);

            // Create a discrete heat map with 20 x 20 cells
            DiscreteHeatMapLayer 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.
            c.xAxis().setLinearScale(0, diameter, 1);
            c.xAxis().setLabelStyle("Arial Bold", 8);
            c.xAxis().setColors(Chart.Transparent, Chart.TextColor);
            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.
            c.yAxis().setLinearScale(0, diameter, 1);
            c.yAxis().setLabelStyle("Arial Bold", 8);
            c.yAxis().setColors(Chart.Transparent, Chart.TextColor);
            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.
            ColorAxis cAxis = layer.setColorAxis(p.getRightX() + 20, p.getTopY(), Chart.TopLeft,
                p.getHeight(), Chart.Right);
            cAxis.setLabelStyle("Arial Bold", 8);

            // 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\wafermap.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 diameter of the wafer
    int diameter = 20;
    double radius = diameter / 2.0;

    // The random data array are for a square grid of 20 x 20 cells
    RanSeries r = new RanSeries(2);
    double[] zData = r.get2DSeries(diameter, diameter, 0, 100);

    // We remove cells that are outside the wafer circle by setting them to NoValue
    for(int i = 0; i < zData.Length; ++i) {
        double x = i % diameter + 0.5;
        double y = (i - x) / diameter + 0.5;
        if ((x - radius) * (x - radius) + (y - radius) * (y - radius) > radius * radius) {
            zData[i] = Chart.NoValue;
        }
    }

    // Create an XYChart object of size 520 x 480 pixels.
    XYChart c = new XYChart(520, 480);

    // Add a title the chart with 15pt Arial Bold font
    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)
    PlotArea p = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, 0xdddddd, 0xdddddd);

    // Create a discrete heat map with 20 x 20 cells
    DiscreteHeatMapLayer 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.
    c.xAxis().setLinearScale(0, diameter, 1);
    c.xAxis().setLabelStyle("Arial Bold", 8);
    c.xAxis().setColors(Chart.Transparent, Chart.TextColor);
    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.
    c.yAxis().setLinearScale(0, diameter, 1);
    c.yAxis().setLabelStyle("Arial Bold", 8);
    c.yAxis().setColors(Chart.Transparent, Chart.TextColor);
    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.
    ColorAxis cAxis = layer.setColorAxis(p.getRightX() + 20, p.getTopY(), Chart.TopLeft,
        p.getHeight(), Chart.Right);
    cAxis.setLabelStyle("Arial Bold", 8);

    // 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\wafermap.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 diameter of the wafer
    Dim diameter As Integer = 20
    Dim radius As Double = diameter / 2.0

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

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

    ' Create an XYChart object of size 520 x 480 pixels.
    Dim c As XYChart = New XYChart(520, 480)

    ' Add a title the chart with 15pt Arial Bold font
    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)
    Dim p As PlotArea = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, &Hdddddd, _
        &Hdddddd)

    ' Create a discrete heat map with 20 x 20 cells
    Dim layer As DiscreteHeatMapLayer = 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.
    c.xAxis().setLinearScale(0, diameter, 1)
    c.xAxis().setLabelStyle("Arial Bold", 8)
    c.xAxis().setColors(Chart.Transparent, Chart.TextColor)
    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.
    c.yAxis().setLinearScale(0, diameter, 1)
    c.yAxis().setLabelStyle("Arial Bold", 8)
    c.yAxis().setColors(Chart.Transparent, Chart.TextColor)
    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.
    Dim cAxis As ColorAxis = layer.setColorAxis(p.getRightX() + 20, p.getTopY(), Chart.TopLeft, _
        p.getHeight(), Chart.Right)
    cAxis.setLabelStyle("Arial Bold", 8)

    ' 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\WafermapController.cs

using System;
using System.Web.Mvc;
using ChartDirector;

namespace NetMvcCharts.Controllers
{
    public class WafermapController : Controller
    {
        //
        // Default Action
        //
        public ActionResult Index()
        {
            ViewBag.Title = "Wafer Map";
            createChart(ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1"));
            return View("~/Views/Shared/ChartView.cshtml");
        }

        //
        // Create chart
        //
        private void createChart(RazorChartViewer viewer)
        {
            // The diameter of the wafer
            int diameter = 20;
            double radius = diameter / 2.0;

            // The random data array are for a square grid of 20 x 20 cells
            RanSeries r = new RanSeries(2);
            double[] zData = r.get2DSeries(diameter, diameter, 0, 100);

            // We remove cells that are outside the wafer circle by setting them to NoValue
            for(int i = 0; i < zData.Length; ++i) {
                double x = i % diameter + 0.5;
                double y = (i - x) / diameter + 0.5;
                if ((x - radius) * (x - radius) + (y - radius) * (y - radius) > radius * radius) {
                    zData[i] = Chart.NoValue;
                }
            }

            // Create an XYChart object of size 520 x 480 pixels.
            XYChart c = new XYChart(520, 480);

            // Add a title the chart with 15pt Arial Bold font
            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)
            PlotArea p = c.setPlotArea(50, 40, 400, 400, -1, -1, Chart.Transparent, 0xdddddd, 0xdddddd);

            // Create a discrete heat map with 20 x 20 cells
            DiscreteHeatMapLayer 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.
            c.xAxis().setLinearScale(0, diameter, 1);
            c.xAxis().setLabelStyle("Arial Bold", 8);
            c.xAxis().setColors(Chart.Transparent, Chart.TextColor);
            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.
            c.yAxis().setLinearScale(0, diameter, 1);
            c.yAxis().setLabelStyle("Arial Bold", 8);
            c.yAxis().setColors(Chart.Transparent, Chart.TextColor);
            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.
            ColorAxis cAxis = layer.setColorAxis(p.getRightX() + 20, p.getTopY(), Chart.TopLeft,
                p.getHeight(), Chart.Right);
            cAxis.setLabelStyle("Arial Bold", 8);

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