ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Highlighting data points
Posted by S Golts on Dec-21-2021 13:22
We are looking into using ChartDirector for generating wafer (heat) maps. Apart from the zooming and panning functionality, which is present in ChartDirector, we also would like to know if it is possible to highlight data points in the charts.

For our application, we will be using a discreate heatmap. When hovering over or clicking on one of the tiles in the heatmap, we want that tile to have its border color or background color changed.

Does ChartDirector support this functionality?

Thank you in advance.

  Re: Highlighting data points
Posted by Peter Kwan on Dec-21-2021 22:44
Hi S Golts,

Yes, you can highlight data points in the charts. As ChartDirector is programmable, you can highlight by adding a thick border, or change color of add a mark (such as a "X") to the cell. For feedback during mouse hover, you can also use tooltips which can provide more details on the cell. The exact details depend on your programming language and whether it is a desktop or web application.

In our web site, we have a web based example for a polar scatter chart that shows one possibility. It is the bottom chart in the following page:

If you need further details, please let me know your programming language and whether it is a desktop of web application.

(Note: I have received an email from your and responded to it. Apparently, you did not receive my response. It may be due to accidental spam filtering or the email is just lost in the Internet. From experience, this forum is more reliable as we can immediately see if the post is successful. We always respond to posts in the forum.)

Peter Kwan

  Re: Highlighting data points
Posted by S Golt on Dec-22-2021 00:29
Hi, Peter.

Thank you very much for your reply. We are working with WPF and C# within .NET. Could you please give me references to the right functions to accomplish this for heat maps?

Thank you for your help.

  Re: Highlighting data points
Posted by Peter Kwan on Dec-22-2021 15:56
Hi S Golt,

In the original WPF sample code that comes with ChartDirector, when the mouse hovers on the cell, there is a tooltip as a feedback. In the sample code, the tooltip displays the coordinates of the cell as well as its value. It is possible to modify the code to display any text you like in the tooltip. This can provide useful feedback to the user on which cell the mouse hovers on.

You can also use a "dynamic layer" to draw things as the mouse moves. In the attached sample code, I draw a rectangle with a thick border. The code is modified from the "Track Box with Floating Legend" sample code.

To try the code, please copy the attached TrackBoxWindow.xaml.cs file to the "ChartDirectorNetWPFChartsCSharpWPFCharts" folder. This replace the original sample code. Then lanuch the "NetWPFCharts" solution, press the Run button, and select "Programmable Track Cursor / Track Box with Floating Legend". The sample code will now show a wafer chart with the thick rectangle feedback, in addition to the tooltip feedback.

The drawing code is in the TrackCell function. Basically, it determines which cell the mouse is on, and draws a rectangle on it. You can also draw other things (other shapes, or a filled rectangle of a different color, or put a "X" mark or some text on it).

If you want to have a more persistent marking for the cells (that is, the mark persists even if the mouse moves away), such as if you want to allow the user to "select" multiple cells using mouse click, you can add a scatter layer to the chart, like:

Your code can keep track of which cells the user has selected. In the chart drawing code, it can add a scatter layer to draw symbols on the selected cells. When the selection changes, you can simply call the chart drawing code again to reflect the state of the selection.

Peter Kwan

  Re: Highlighting data points
Posted by Peter Kwan on Dec-22-2021 18:14
Attached please find the code mentioned in the previous post.
using System;
using System.Collections;
using System.Windows;
using System.Windows.Input;
using ChartDirector;

namespace CSharpWPFCharts
    public partial class TrackBoxWindow : Window
        public TrackBoxWindow()

        private int diameter;
        private double[] zData;

        private void Window_Loaded(object sender, RoutedEventArgs e)
            // The diameter of the wafer
            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);
            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,

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

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

            // 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
            WPFChartViewer1.Chart = c;

            //include tool tip for the chart
            WPFChartViewer1.ImageMap = c.getHTMLImageMap("clickable", "",
                    "title='<*cdml*>({xLabel}, {yLabel}) = {z|2}'");

        // Draw track cursor when mouse is moving over plotarea
        private void WPFChartViewer1_MouseMovePlotArea(object sender, MouseEventArgs e)
            WPFChartViewer viewer = (WPFChartViewer)sender;
            trackCell((XYChart)viewer.Chart, viewer.PlotAreaMouseX, viewer.PlotAreaMouseY);

            // Hide the track cursor when the mouse leaves the plot area

        // Draw the track box with legend
        private void trackCell(XYChart c, int mouseX, int mouseY)
            // Clear the current dynamic layer and get the DrawArea object to draw on it.
            DrawArea d = c.initDynamicLayer();

            // The plot area object
            PlotArea plotArea = c.getPlotArea();

            // Get the cell at the mouse
            int xIndex = (int)Math.Floor(c.getXValue(mouseX));
            int yIndex = (int)Math.Floor(c.getYValue(mouseY));
            if ((xIndex < 0) || (yIndex < 0) || (xIndex >= diameter) || (yIndex >= diameter) ||
                (zData[yIndex * diameter + xIndex] == Chart.NoValue))
                return;   // mouse not hover any cell

            // Draw the track boxes - recatngle with a thick border
            int boxLeft = c.getXCoor(xIndex);
            int boxRight = c.getXCoor(xIndex + 1);
            int boxTop = c.getYCoor(yIndex);
            int boxBottom= c.getYCoor(yIndex + 1);
            d.rect(boxLeft, boxTop, boxRight, boxBottom, 0x000000, Chart.Transparent, Chart.flatBorder(3));

  Re: Highlighting data points
Posted by S Golts on Dec-24-2021 13:37
Hi Mark,

Thank you very much for your reply and for your support in our evaluation.

Thank you.

With kind regards,

S Golts

  Re: Highlighting data points
Posted by S Golts on Dec-29-2021 20:25
Dear Mark,

We have implemented your solution and the selection works. However, it does bring with it another problem: When enabling this tooltip functionality (of selecting the die), the application becomes very slow.

To put this into more pragmatic words: Without the tooltip functionality, we can easily zoom in/out and pan in a heatmap with over 500k dies. When enabling the tooltip function, there is a delay in zooming in/out and panning of 5 seconds (on an i7 system).

Is there a workaround for this issue? I will send you the code we use to implement the tooltip in a separate email.

Thank you for your support.

I'm looking forward to your reply.

Thank you.

With kind regards,

S Golts

  Re: Highlighting data points
Posted by S Golts on Dec-29-2021 20:29
Dear Peter,

I must apologize. For some reason I mistakenly addressed you as Mark.

Thank you.

With kind regards,

Stijn Goltstein

  Re: Highlighting data points
Posted by Peter Kwan on Dec-29-2021 23:04
Hi S Golts,

The imageMap method is convenient but it will become slow if there are many data points on the chart. The imageMap essentially change each data representation (a cell in your chart) into a mini pushbutton that can have its own tooltips, click events, etc.. The code will slow down if there 500K pushbuttons.

An alternative which is very fast is to use the programmable track cursor method. With this method, you code can draw things on the "dynamic layer" as the mouse moves. In my previous reply, I provide an example that draws a rectangle with a thick border as the feedback so the user can see which cell the cursor is pointing at. We can add a few more lines to draw the tooltip too (which is just a piece of text).

// Add the following at the end of the trackCell function to draw text in a rounded rect
TTFText t =  d.text(
+ string.Format("{0}, {1}) = {2}", xIndex, yIndex, c.formatValue(zData[yIndex * diameter + xIndex], "{value|2}")), "Arial", 8);
t.draw(mouseX, mouseY + 24, 0x222222, Chart.TopLeft);

Because the code only draws for one cell only when the mouse moves over the cell, there is low overhead. The downside is the code is more complicated than the tooltip code, but it is also more flexible on what you can display on the chart as the mouse moves.

Peter Kwan

  Re: Highlighting data points
Posted by S Golt on Dec-30-2021 00:10
Hi Peter,

Thank you again for your reply and great service. My colleagues will try this in the morning.  To be clear: Does the Track Cursor Solution then also allow us to draw the border and to create a click event?

  Re: Highlighting data points
Posted by Peter Kwan on Dec-30-2021 03:33
Hi S Golt,

In the track cursor code, it uses the mouse coordinates to determine which cell is under the mouse, so that it can draw the border and the tooltip.

For clicking, you can just use the standard mouse click event for .NET controls, which occurs whenever any point on the chart is clicked. In the mouse click event handler, you can determine which cell has been clicked by using the same code that the track cursor used to determine the cell.

Peter Kwan