|
 Wafer Chart |
| Posted by Aldy on Sep-26-2011 20:49 |
|
Hi Peter,
Our company have been using ChartDirector for years now, I'm the new guy assigned in charting and wondering if it's capable of plotting a wafer chart like the one attached. I would really appreciate and could help speed up our product if you could provide a running sample code written in PHP (under Linux 64-bit) and make it even clickable per die?
Thanks in advance,
Aldy
|
| Re: Wafer Chart |
| Posted by Peter Kwan on Sep-27-2011 01:59 |
|
Hi Aldy,
Attached please find a simple PHP example for your reference.
Hope this can help.
Regards
Peter Kwan
| wafer.php |
|---|
<?php
require_once("../lib/phpchartdir.php");
#
# Draw 4 x 4 squares with image map
#
$width = 4;
$height = 4;
$colors = array(
0xff0000, 0xffff00, 0x0000ff, 0x00ff00,
0x00ffff, 0xffff00, 0x00ff00, 0x0000ff,
0xff0000, 0xff0000, 0xffff00, 0x0000ff,
0x00ff00, 0x00ffff, 0xffff00, 0x00ff00
);
$chartWidth = 600;
$chartHeight = 600;
$margin = 100;
$c = new XYChart($chartWidth, $chartHeight);
$d = $c->getDrawArea();
$imageMap = array();
$cellWidth = ($chartWidth - $margin * 2) / $width;
$cellHeight = ($chartHeight - $margin * 2) / $height;
for ($x = 0; $x < $width; ++$x) {
for ($y = 0; $y < $height; ++$y) {
$leftX = $margin + $cellWidth * $x;
$topY = $margin + $cellHeight * $y;
$rightX = $leftX + $cellWidth;
$bottomY = $topY + $cellHeight;
$d->rect($leftX, $topY, $rightX, $bottomY, 0x000000, $colors[$y * $width + $x]);
$imageMap[] = "<area href='javascript:onCellClick($x, $y)' shape='rect' coords='$leftX,$topY,$rightX,$bottomY' title='custom tooltip at ($x,$y)'>";
}
}
$imageMap = join("", $imageMap);
#
# Clip to a circle
#
$mask = new DrawArea();
$mask->setSize($chartWidth, $chartHeight, Transparent);
$mask->circle($margin + $cellWidth * $width / 2, $margin + $cellHeight * $height / 2,
$cellWidth * $width / 2, $cellHeight * $height / 2, 0x000000, Transparent);
$mask->fill(0, 0, 0xffffff);
$d = $c->makeChart3();
$d->merge($mask, 0, 0, TopLeft, 0);
# Create the image and save it in a temporary location
$chart1URL = $c->makeSession("chart1");
?>
<html>
<body>
<img src="getchart.php?<?php echo $chart1URL?>" border="0" usemap="#map1">
<map name="map1">
<?php echo $imageMap?>
</map>
<script>
function onCellClick(x, y)
{
alert("Click on cell (" + x + "," + y + ")");
}
</script>
</body>
</html>
|
| |
| Re: Wafer Chart |
| Posted by at on Mar-28-2023 17:28 |
|
Hi Peter,
How to add the x and y axis labels for this approach? I'm not yet on version 7 so I can't use the newly added discrete heat map type yet.
Thanks.
|
| Re: Wafer Chart |
| Posted by Aldy on Sep-27-2011 16:53 |
|
Thanks Peter, ChartDirector is indeed awesome! Another thing though, what's the best way to incorporate zooming with this wafer? I've got an idea based on the samples from other charts but I'd like to see your take particularly on this one.
Regards.
Aldy |
| Re: Wafer Chart |
| Posted by Peter Kwan on Sep-28-2011 01:46 |
|
Hi Aldy,
There are many methods to zoom. For your chart type, I think the easiest method is to simply resize the image on the browser side using Javascript.
First, ask ChartDirector to create a high resolution chart. The exact resolution depends on the number of cells in your wafer. For the wafer shown in your example, I think 1000 x 1000 pixels should be quite high resolution.
In your browser, you can display the image in a different size (say 500 x 500) by using the WIDTH and HEIGHT attribute of the <IMG> tag. By changing the WIDTH and HEIGHT attribute using Javascript, you can change the size of the image, creating zoom in/out effects.
When the image is "zoomed in", the image size is increased. In order to make the image occupying a constant amount of space on the web page, you may put the image inside an IFRAME or a DIV block of fixed size (use the CSS overflow attribute to control the scrolling behaviour). In this way, when the <IMG> increases its size, you will see a part of the wafer in big size, and there can be scroll bars to allow you to scroll to see other parts of the wafer.
Hope this can help.
Regards
Peter Kwan |
| Re: Wafer Chart |
| Posted by Aldy on Sep-30-2011 17:55 |
|
Hi Peter, this helps a lot.
Thanks. |
| Re: Wafer Chart |
| Posted by at on Nov-18-2012 20:12 |
|
Hi Peter,
I was wondering if it's possible to tilt the rectangles to any degrees, let say 14 degrees? I
know that we can rotate the whole drawarea to any angle but what I want is for each
rectangle.
Thanks. |
| Re: Wafer Chart |
| Posted by Peter Kwan on Nov-20-2012 00:49 |
|
Hi at,
To draw a tilt rectangle, you may draw it as a polygon (use DrawArea.polygon).
Another method is to draw it on a separate drawarea or chart, then rotate the entire drawarea or chart, and then merge the rotated result to a normal chart which is itself not rotated.
Hope this can help.
Regards
Peter Kwan |
| Re: Wafer Chart |
| Posted by Peter Kwan on Mar-29-2023 00:38 |
|
Hi,
The code in this thread draws the chart as a custom drawing using the DrawArea object. You can also draw lines and text with the DrawArea object.
Based on the code posted in this thread, you may add the following code just before the "$chart1URL = $c->makeSession("chart1");" line. They will draw the grid lines and the text:
for ($x = 0; $x <= $width; ++$x) {
$lineX = $margin + $cellWidth * $x;
$d->line($lineX, $margin, $lineX, $margin + $cellHeight * $height, 0x80000000);
}
for ($y = 0; $y <= $height; ++$y) {
$lineY = $margin + $cellHeight * $y;
$d->line($margin, $lineY, $margin + $cellWidth * $width, $lineY, 0x80000000);
}
for ($x = 0; $x < $width; ++$x) {
$t = $d->text3($x, "arialbd.ttf", 10);
$t->draw($margin + $cellWidth * ($x + 0.5), $margin + $cellHeight * $height + 5, 0x888888, TopCenter);
}
for ($y = 0; $y < $height; ++$y) {
$t = $d->text3($y, "arialbd.ttf", 10);
$t->draw($margin - 5, $margin + $cellHeight * ($y + 0.5), 0x888888, Right);
}
Regards
Peter Kwan |
| Re: Wafer Chart |
| Posted by Peter Kwan on Mar-29-2023 00:42 |
|
| Just in case anyone find this post from Internet search, there is now a dedicated chart type called "discrete heat map" that are suitable to draw wafer charts, and the chart can easily be made zoomable too. Sample code is included in the ChartDirector download for all programming langauge editions of ChartDirector (.NET C#/VB, C++, PHP, Perl, Python, Java, ASP/COM/VB). |
|
Forum Home
Search
Message List
Post Message
(Aldy)