ChartDirector Support - View Thread 1340610047

ChartDirector Support

Forum Home

Search

Message List Post Message

[Jun-25-2012 15:40] chart inquiry (sh)
- [Jun-26-2012 04:57] Re: chart inquiry (Peter Kwan)
  - [Jun-27-2012 10:30] Re: chart inquiry (sh)
    - [Jun-27-2012 10:39] Re: chart inquiry (sh)

chart inquiry

Posted by sh on Jun-25-2012 15:40

Hi,
We are currently evaluating chartdirector if it suits our needs. Looking at the samples we could not find the chart we are looking for. We want to plot a wafer chart witht the given input of coordinates that may range from - to + values, e.g. minimum of -500 and max of 500 for both x and y. We call is each rectangular point as a die. Is this possible in chardirector? We want also that each die of that wafer is clickable and that the wafer can be rotated clockwise and counterclockwise. We are doing this in PHP. I appreciate much if you can provide working example to be used in the demo proposal. Chartdirector is our best candidate to be used in our charting needs if this wafer chart is possible here.

Thanks.

Re: chart inquiry

Posted by Peter Kwan on Jun-26-2012 04:57

Hi sh,

There is a short example elsewhere in this forum:

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&thread=1317041394

I have just extended it to support rotation. Due to the large number of "cells" (total 10000000 cells - I assume you want each individual cell to be clickable), I have used Javascript instead of HTML image map to handle the clicking. (The browser probably will hang if you use a HTML image map with 1000000 hot spots.) The code is based on ChartDirector Ver 5.1, and it uses the "cdjcv.js" Javascript library and the "getchart.php" utility included in the ChartDirector distribution.

Hope this can help.

Regards
Peter Kwan

wafer.php
3.90 Kb

Re: chart inquiry

Posted by sh on Jun-27-2012 10:30

Hi Peter, thanks for the great response, it helps me a lot during the proposal. The thing is that the data from the database has specific x & y coordinates and they asked me to have an example from the actual data to see how it looks. Due to time constraint and less programming experience, can you help me figure out an algorithm or revise the wafer.php you provided in order to plot the attached data to wafer chart? In the attached data, the x & y are indexed as 'x_coord' & 'y_coord' respectively and the color scheme is based on the bin number(indexed as 'bins'). Hope you can help me again on this. Thanks.

Re: chart inquiry

Posted by sh on Jun-27-2012 10:39

I forgot to attached the files in the previous post, here they are. Thanks.

input_data.txt

input_data2.txt

Re: chart inquiry

Posted by Peter Kwan on Jun-28-2012 03:41

Hi sh,

Basically, you just need to modify the code to plot whatever cells are in your data.

After I plotted your data, I found that your data are not for a circular object (it is roughly elliptical, or the x and y coordinates may be represented in different units). Also, the center is not at (0, 0), and the data are also incomplete (there are a lot of positions that have no data). I am not sure how you would like to represent the data, so I just modify the code to use the middles values of your x and y coordinates as the center, and leave the cells with no data as empty. I also simply choose an arbitrary coloring scheme, as I do not know how you would like the bin values to be colored.

I have attached the modified code with the data file, and the resulting chart for your reference. You may need to modify the code if this is not how you would like to represent your data.

Regards
Peter Kwan

wafer.zip
35.69 Kb

Re: chart inquiry
Posted by sh on Jun-29-2012 14:58	\| Reply \| Monitor
Hi Peter, yes, this is exactly what we need. Thanks for the superb support. I still have 2 more inquiries though. 1. Can I add here a sort of a legend or color axis like in contour chart? I'd like to add it on the right of the wafer. 2. Can you think of a way to force the wafer to be a circle? An algo maybe to pad extra trasparent points? Thank you very much.

Re: chart inquiry

Posted by Peter Kwan on Jun-30-2012 02:48

Hi sh,

1. Yes. You can certain add a legend or color axis. For a legend, just add it using the same method as adding an XYChart (use BaseChart.addLegend). You can insert entries in the legend by adding layers to the chart. You can add empty layers (layers with no data) so it would not actually affect the chart, but just to create legend entries. For example, you can add a yellow (0xffff00) bar layer with the name "4 to 10". There will then be an entry that shows the yellow color is "4 to 10".

To add a color axis like in the contour chart, just add a contour layer (with empty data) and add a color axis, like in the contour chart sample code. (See "Scattered Data Contour Chart" for an example on how to add a color axis.)

I am not sure what is the nature of your data and how you would like to color them. In the sample code in my last message, the coloring scheme is not linear, so it may not be ideal to use a "color axis". It shoud be more appropriate to use the legend box method to show the data range for each other.

2. If your data do not represent a square, there is no general method to "force" it to be a square. If we really force it to change shape, the chart may not be reflecting your data. Similarly, if your data are not a circle, there is no general method to "force" it to be a circle.

If you know that the data should be a circle, but they are not a circle, you would need to find out why the data are not a circle. May be there are some additional transparent cells outside the ellipse. In this case, the chart is a circle, but you cannot see it, because the actual boundary is outside the ellipse and is transparent. In this case, you may draw a circular boundary so that the user knows where is the boundary of the wafer. Another possibility is that the x:y aspect ratio is not really 1:1 (that is, the cell is not a square, but is a rectangle). If the rectangle is such that the height is larger than the width, it can stretch the height of the shape to make it a circle. In this case, instead of drawing a square for each cell, you may consider to draw a rectangle.

Hope this can help.

Regards
Peter Kwan

Re: chart inquiry

Posted by sh on Jul-10-2012 22:35

Hi Peter, thanks again for the great response.
As for the 1st item I would like to add a color legend beside the wafer like the one attached. What's the best way to do that in chartdirector? What will the code look like having a color axis with dual axis labels with the range labels at the top and bottom? I would like to get also the color of the axis since that would correspond to the color scheme of the dice in the wafer and also the count/number of dice of that color.
Thanks.

Re: chart inquiry

Posted by Peter Kwan on Jul-11-2012 03:24

Hi sh,

To add a color axis like in the contour chart, just add a contour layer with empty data and add a color axis, like in the contour chart sample code. (See "Scattered Data Contour Chart" for an example.) After adding the color axis, you can use various methods to configure the look and feel and labelling (eg. use Axis.setWidth to set the axis width, use Axis.setLabelOffset to change the label position, use Axis.setLabelFormat for the label format, use Axis.addMark to add labels for the "count", use BaseChart.addText to add text at fixed positions (such as at the top and bottom of the axis).

An example is like:

$layer = $c->addContourLayer(null, null, null);
$colorAxis = $layer->setColorAxis(600, 100, TopLeft, 500, Left);
$colorAxis->setLinearScale(0, 100, 5);
$colorAxis->setLabelOffset(2.5);
$colorAxis->setLabelFormat("{value}% to {={value}+5}%");
$colorAxis->setWidth(30);

for ($i < 0; $i < count($myCount); ++$i) {
     $m = $colorAxis->addMark(i + 2.5, -1, $myCount[$i]);
     $m->setAlignment(Right);
     $m->setMarkColor(Transparent, 0x000000, Transparent);
}

ChartDirector cannot "count" the number of dices within each category in your color legend. You would need to count them with your own code. For your case, if your data are from a database, you can issue a SQL query to ask the database to count. (Data processing or computation is usually the function of a database. ChartDirector is basically only for plotting or displaying the data. It cannot process the data.)

Hope this can help.

Regards
Peter Kwan

Re: chart inquiry
Posted by sh on Jul-11-2012 04:30	\| Reply \| Monitor
Thanks Peter, will try this later, 1 question left though, how can i get the color of a certain scale? e.g. get the color of the range 0-5% from the attached image?

Re: chart inquiry
Posted by Peter Kwan on Jul-12-2012 01:02	\| Reply \| Monitor
Hi sh, You may use ColorAxis.getColor. For example: #get the color at z = 2.5 $myColor = $colorAxis->getColor(2.5); Hope this can help. Regards Peter Kwan

Re: chart inquiry

Posted by sh on Jul-19-2012 15:45

Hi Peter,
1. In my case, I think I got no value of z since i pass null values. What I want if possible is to get the gradient colors in array.

2. We'll be plotting multiple wafers in a single drawarea so I'm wondering what's the best approach for it, would it be to just loop through each wafer in a single drawarea or draw them separately and then merge. I want that in the succeeding wafers, the dice will be smaller than the previous ones so that it will appear to be at the back and can still be seen, that is if they are on the same coordinates, otherwise, the die size would be same as the first. Pls advise on the best way to adjust this on the code you provided.

3. If the resulting aggregated wafer in number 2 would not be pleasing to view or not informative enough, would it be possible to view plot it in 3d? If yes, how?

Thank you so much for the great support even though we're not yet one of your customers, we're still on planning/proposal stage as of the moment.

Re: chart inquiry

Posted by Peter Kwan on Jul-20-2012 03:58

Hi sh,

1. You can get any color at any z level you like using ColorAxis.getColor. For example, if you would like to get the colors for z = 0 to 100 in an array, you may use:

for ($i = 0; $i <= 100; ++$i)
myGradientColors[$i] = $colorAxis->getColor($i);

2. I am not exactly sure how you want to display the multiple wafers. My understanding is the a wafer is not transparent. So if you put another wafer exactly behind the first wafer, the second wafer will be blocked by the first wafer and cannot be seen.

Do you mean you are trying to put the wafers side by side (eg. the second wafer is put on the right side or left side of the first wafer)?

You can certain draw mutiple wafers on a drawarea. You just need to create a larger drawarea and plot the multiple wafers at different position on the drawarea. However, if you do not know how modify the code, you can also draw each wafer with a differnet size in a separate chart, and display them as multiple images on the web page. (I assume you know a web page can contain more than one image.) In the example I sent to you, there is a chartWidth variable that you can modify to adjust the size.

Before you start to perform any complex modification or restructing, make sure you understand the code. The code I sent you is only an example. You would need to modify it for your own needs. If you do not fully understand the code, you may not be able to modify it to fit you own needs.

3. I am not sure how would you like to visualize the wafer in 3D. Personally, if I just want to view many wafers, I will just put the thumbnail images (small images of them) in a table. When the user clicks on the thumbnail, you can display the full image in a frame next to the table or in another pop-up window.

Regards
Peter Kwan

Re: chart inquiry

Posted by sh on Jul-20-2012 10:26

Hi Peter, yes I would like to put another wafer exactly behind the first wafer, that's why I need your help to modify the code such that the second wafer will have smaller dice/squares if they are on the same coordinates(will appear as concentric squares) and if not, the squares will be the same as the first wafer. I'm just having little programming experience and not yet familiar with chartdirector and this is just for presentation purposes if chartdirector can plot what we needed.

Thanks.

Re: chart inquiry

Posted by Peter Kwan on Jul-21-2012 02:12

Hi sh,

From what you described about "concentric squares", I would think the smaller cells are "in front of" the larger cells (not behind it). For example, if you put your mobile phone behind the LCD monitor you are viewing (which I assume is larger than the mobile phone), you should not see the mobile phone, because the phone is hidden by the LCD monitor. If you put the smaller mobile phone in front of the LCD monitor, you can see both the mobile phone and the LCD monitor as "concentric rectangles".

Anyway, if what you need are "concentric squares", you can simply draw the cencentric squares instead of a simple square. In the code in my previous message, the square is:

$d->rect($leftX, $topY, $rightX, $bottomY, $borderColor, $colors[$i]);

A concentric square is just two squares of different sizes:

#two squares of different sizes
$d->rect($leftX, $topY, $rightX, $bottomY, $borderColor, $colors[$i]);
$d->rect($leftX + 2, $topY + 2, $rightX - 2, $bottomY - 2, $borderColor, $colors2[$i]);

If the above is not what you need, may be you can attach a sample image to help me understand what you need.

Regards
Peter Kwan

Re: chart inquiry

Posted by sh on Jul-31-2012 17:12

Hi Peter, yes, the smaller square is actually in front, sorry for the confusion. I actually arrive at the same solution as you suggested. Thanks a lot and when I presented it they actually liked it but they asked for more functionalities as follows:

1. Zooming the wafer as presented in XY Zooming and Scrolling example, pls help/guide me on how to implement that on this wafer.

2. They want to add what they called as zonal charts which are based on the wafer, I hope you're familiar with these charts, I attached an example. How can I plot them using chartdirector? I appreciate much if you can help me on the calculation of the percentage of the zones based on the algo you provided in plotting the wafer. I love to explore chartdirector and do this on my own but time won't let me so I need your guidance.

God bless.

zonal_map.jpg
100.80 Kb

Re: chart inquiry

Posted by Peter Kwan on Aug-01-2012 08:29

Hi sh,

The "Zooming and Scrolling interface" in ChartDirector essentially tells you which part of the chart the user has zoomed to by using the "view port". Your code would then need to redraw the chart to display that part.

For example, you can set the plot area of the XYChart to the same size as the chart. This determines the zoomable region. (You can set the plot area color to Transparent, so it would not appear on the chart.) If the user then does something (such as drag to zoom) that causes a partial update (that is, the browser sends a request to the server to update the chart), your code can determine the part that the user has selected using getViewPortLeft, getViewPortTop, getViewPortWidth and getViewPortHeight of the WebChartViewer object. You can imagine that the original chart is 1 x 1 "unit" in size. If the view port is now from 0 to 0.5 horizontally, and 0 to 0.5 vertically, you know the user has selected the top-left part of the chart. Your code would then need to redraw the chart, showing just the selected part (the top-left part of your wafer). For your case, this would mean you need to increase the cell size, and move the center of the pie, so that the chart shows the top-left part.

For the zonal charts, to me, they just look like pie charts. For the zonal charts with concentric circles, they look like something similar to a "concentric donut chart" (see the "Concentric donut chart" sample code), but with the center donut chart replaced by a pie chart. May be you can use the pie chart examples and concentric donut chart example as references.

Regards
Peter Kwan

Re: chart inquiry

Posted by sh on Aug-03-2012 17:19

Hi Peter, already plotted it but encountered some issues when I try to add mouseover.

1. The mouseover of the 3rd zonal is on the 2nd zonal while the 2nd is in between the fist and second. Same on the zonals of the second row.

2. How can I make each part of the 2nd and 6th zonal chart clickable? The rest is ok since they are divided into sector, the 2nd is treated only as one 1 which I would like to be 3 while the sixth is only 4 but I like it be 12.

Pls help on how I can achieve these, I didn't implemented the clickable part yet but I can tell from the mouseover. I attached the the part of the code for you to see what's wrong/lacking.

zonal.php
9.25 Kb

Re: chart inquiry

Posted by Peter Kwan on Aug-04-2012 01:58

Hi sh,

For the image map, it would need to add the same (x, y) offset as the chart image. So it should be like:

        $this->image_map = $c1->getHTMLImageMap("", "","title='{sector}'");
        $this->image_map .= $c2->getHTMLImageMap("", "","title='{sector}'", 80, 0);
        $this->image_map .= $c3->getHTMLImageMap("", "","title='{sector}'", 160, 0);
        $this->image_map .= $c4->getHTMLImageMap("", "","title='{sector}'");
        $this->image_map .= $c5->getHTMLImageMap("", "","title='{sector}'", 80, 0);
        $this->image_map .= $c6->getHTMLImageMap("", "","title='{sector}'", 160, 0);

Hope this can help.

Regards
Peter Kwan

Re: chart inquiry
Posted by sh on Aug-06-2012 13:49	\| Reply \| Monitor
Thanks Peter it works. What about the other one? How can I make each circle in the concentric to be a separate sector?

Re: chart inquiry

Posted by Peter Kwan on Aug-07-2012 02:44

Hi sh,

In your case, instead of using "merge" to combine multiple charts into one chart, you may use MultiChart. With MultiChart, ChartDirector knows that it actually contains multiple charts with (x, y) offsets, and will automatically create the image maps for all of them and with proper offets.

For example, in "createZonal6", instead of:

        ....
        $c->setDonutSize(250, 250, 80, 0);
        ....
        $c2->setDonutSize(170, 250, 55, 0);
        ....
        $c3->setDonutSize(170, 250, 25, 0);
        ....

        $makeChartObj = $c->makeChart3();
        $makeChartObj->merge($c2->makeChart3(), 80, 0, TopLeft, 0);
        $makeChartObj->merge($c3->makeChart3(), 80, 0, TopLeft, 0);

        return $c;

you may try:

        #donuts should be non-overlapping
        ....
        $c->setDonutSize(250, 250, 80, 55);
        ....
        $c2->setDonutSize(170, 250, 55, 25);
        ....
        $c3->setDonutSize(170, 250, 25, 0);
        ....

        $m = new MultiChart($c->getWidth(), $c->getHeight(), Transparent);

        #add the chart from inside to outside, as it is the order of the image map
        $m->addChart(80, 0, $c3);
        $m->addChart(80, 0, $c2);
        $m->addChart(0, 0, $c);

        return $m;

Hope this can help.

Regards
Peter Kwan

Re: chart inquiry

Posted by sh on Aug-07-2012 16:52

Thanks Peter, it works great.

Another concern, I would like to draw a cross on some rectangles so I think it would be ok to just insert it inside the loop below(not all rectangles have crosses).  But it turned out not working, strange is if I removed the condition, it works but all rectangles will have crosses.

for ($i = $x_coord_count - 1; $i >= 0; --$i) {
            $leftX  = $this->margin + $this->cellWidth * ($this->waferData['x_coord'][$i] - $this->centerX + $this->horizontalPoints / 2);
            $topY   = $this->margin + $this->cellHeight * ($this->verticalPoints / 2 - $this->waferData['y_coord'][$i] + $this->centerY);
            $rightX = $leftX + $this->cellWidth;
            $bottomY= $topY + $this->cellHeight;

            $d->rect($leftX, $topY, $rightX, $bottomY, $cell_border_color & $colors[$i], $colors[$i]);

            # display cross per die
            if($this->waferData['reprobed'][$i] == true) {
                $d->hline($leftX2, $rightX2, ($topY2+$bottomY2)/2, 0x000000);
                $d->vline($topY2, $bottomY2, ($leftX2+$rightX2)/2, 0x000000);
            }
}

So I loop again after the code above and it plotted what I wanted.

for ($i = $x_coord_count - 1; $i >= 0; --$i) {
                $leftX  = $this->margin + $this->cellWidth * ($this->waferData['x_coord'][$i] - $this->centerX + $this->horizontalPoints / 2);
                $topY   = $this->margin + $this->cellHeight * ($this->verticalPoints / 2 - $this->waferData['y_coord'][$i] + $this->centerY);
                $rightX = $leftX + $this->cellWidth;
                $bottomY= $topY + $this->cellHeight;

                # reprobe crosses
                if($this->waferData['reprobed'][$i] == true) {
                    $d->hline($leftX, $rightX, ($topY+$bottomY)/2, 0x000000);
                    $d->vline($topY, $bottomY, ($leftX+$rightX)/2, 0x000000);
                }
}

Allthough it's looks fine, it would be inefficient and may affect performance. Any idea how to do them in just a single loop? Maybe I'm missing something or it might just be a chartdirector thing.

Thanks.

Re: chart inquiry

Posted by Peter Kwan on Aug-08-2012 02:32

Hi sh,

The most logical explanation is that the condition "($this->waferData['reprobed'][$i] == true)" is always false for your data. So the cross is not drawn if there is such a condition.

To check if the above is the cause of the problem, you can use:

                if($this->waferData['reprobed'][$i] == true) {
                    $d->hline($leftX, $rightX, ($topY+$bottomY)/2, 0x000000);
                    $d->vline($topY, $bottomY, ($leftX+$rightX)/2, 0x000000);
                } else {
                    $d->hline($leftX, $rightX, ($topY+$bottomY)/2, 0xcc0000);
                    $d->vline($topY, $bottomY, ($leftX+$rightX)/2, 0xcc0000);
                }

The above draws a black cross if the condition is true, and a red cross otherwise. If all the crosses are red, you can confirm that the charting code is working, and the condition is always false for your data.

Hope this can help.

Regards
Peter Kwan

Re: chart inquiry

Posted by sh on Aug-08-2012 17:16

Hi Peter, I can be sure that the condition will be true because I printed something inside it and besides it's working in the second loop with just the plotting the rectangles removed. This sound strange but maybe I'll figure this out somehow.

Got another concern, I'm thinking of using HTML image map instead of javascript as you provided earlier since the coordinates in the mouseover do not much from the actual coordinates and I also need to include extra fields in the mouseover which I find hard to do in js. I got the HTML image map working but got a problem when its rotated or flipped using the hlip/vflip/rotate method, pls help me on how to modify the code to adjust the hotspots/image maps after it's being rotated, I tried but couldn't make it right using my limited knowledge.

Thanks.

Re: chart inquiry

Posted by Peter Kwan on Aug-09-2012 04:21

Hi sh,

For the HTML image map, are you referring to the cells in the Wafer chart?

For each cell, the area tag is a polygon containing 4 vertices for the 4 corners of the rectangular cell. When you performing flipping or rotation, the coordinates transform as follows:

For hFlip:

$newX = $c->getWidth() - 1 - $oldX;

For vFlip:

$newY = $c->getHeight() - 1 - $oldY;

For rotation by the center of the chart, it is:

$centerX = ($c->getWidth() - 1) / 2.0;
$centerY = ($c->getHeight() - 1) / 2.0;
$angle = $angleInDegrees * 3.1415926536 / 180;
$newX = $centerX + ($oldX - $centerX) * cos(angle) - ($oldY - $centerY) * sin(angle);
$newY = $centerY + ($oldX - $centerX) * sin(angle) + ($oldY - $centerY) * cos(angle);

For the Javascript code, I believe the original code I sent to you should work. However, if your modify the charting code, you would need to modify the Javascript code to match the charting code. Basically, the Javascript code is just trying to perform the reverse computation (to "unrotate/unflip" the chart). This gets back the original coordinates, then we can use this to compute which cell the mouse is over.

Hope this can help.

Regards
Peter Kwan

Re: chart inquiry

Posted by sh on Aug-14-2012 04:06

Hi Peter, somehow I'm using the js code you provided, it works actually when I reviewed it and was able to add additional fields with it. Sorry to bother you again but I need your help on how to adjust the js code to add the computation when vflip/ hflip method is used as only the rotation is working so far, I tried the formula you provided above but it seems not working, maybe I missed something.

Thanks again for your wonderful support.

Re: chart inquiry

Posted by Peter Kwan on Aug-14-2012 23:56

Hi sh,

By camparing the computed image map with the actual position of the cell, it should be easy to determine the cause of the problem.

Using the same chart with no rotation, what is the image map coordinates for the chart if there is no hFlip? What is the image map coordinates if there is a hFlip? If the image map coordinates is not correct, what is the correct coordinates? (You may use Windows Paint and manually obtain the correct coordinates of a single cell for comparison.) You may include two chart images, one with hFlip, and one without, and inform me the image map coordinates in the two cases for a particular cell.

For the formula, is it possible that the formulas are applied not in the correct sequence? For example, hFlip after rotation is different from rotation after hFlip. The formula should be applied in the same sequence that your code perform the actual graphical operations.

Regards
Peter Kwan

Re: chart inquiry

Posted by sh on Aug-15-2012 00:53

Hi Peter, I attached an example for the image with no flip yet then after hlip is applied. Actually, the code should adjust such that after a rotation it can be flipped in referenced to that angle or vice versa. In the example, after the hflip, the red square should still have the coordinate of 19,2 but now it has 8,2. so no flipping of coordinates is made.

Hope you can help.

no_hflip.png
4.82 Kb

with_hflip.png
4.71 Kb

Re: chart inquiry

Posted by Peter Kwan on Aug-15-2012 21:14

Hi sh,

For your case, I am not sure exact which is your chart and how is it "hflip". For example, I see that your chart includes a legend box on the right side. The hflip chart also seems to have a legend box on the right side. If the entire chart (including the legend box) is flipped, the legend box should be on the left side. So for your case, it seems you are only flipping part of the chart (but DrawArea.hflip should flip the whole chart), or your chart may have been further manipulated after the hflip (adding a legend box after the hflip, or merging with another chart, etc).

In any case, suppose after rotation but before the flipping, the image map is (I assume you are using image map):

<area shape="poly" coords="100,200,110,200,110,210,100,210" title="(19,2) Bin12004">

Then after hflip, the image map should be (I assume the chart width is 800 pixels):

<area shape="poly" coords="699,200,689,200,689,210,699,200" title="(19,2) Bin12004">

In other words, the coordinates in your image map (the coords attribute) should have changed with the new x-coordinates computed using newX = 799 - oldX. Is this the case?

Regards
Peter Kwan

Re: chart inquiry

Posted by sh on Aug-15-2012 21:45

Hi Peter,
Sorry for the confusion, the chart is flipped before the addition of the legend so it's always on the right. No, I'm not using the image map anymore but the JS that you provided as I stated 2 posts back, I find it fast and way more responsive so the adjustment is now on the JS side which I don't know how to adjust. The coordinates is maintained when rotated so its ok, but not when flipped before and after rotation. Tried in Js the equivalent of the formulas $newX = $c->getWidth() - 1 - $oldX and $newY = $c->getHeight() - 1 - $oldY but not working. Maybe you can enlighten me on this, I'm not really good in math.

Thanks.

Re: chart inquiry

Posted by Peter Kwan on Aug-17-2012 20:26

Hi sh,

If you are using Javascript code, the structure of the Javascript code should be to first get the mouse coordinates relative to the chart, then to compute the cell based on the mouse coordinates.

In the Javascript code I included earlier in this thread, the mouse coordinates are obtained using viewer.getChartMouseX() and viewer.getChartMouseY(). After hFlip they should be replaced with

var newX = <?php echo $chartWidth ?> - 1 - viewer.getChartMouseX();
var newY = viewer.getChartMouseY();

Note that for hFlip, you only need to modify the x-coordinates, not the y-coordinates.

For example, in the original Javascript code I included earlier in this thread, the mouse coordinates are retrieved in the lines:

var dx = viewer.getChartMouseX() - centerX;
var dy = centerX - viewer.getChartMouseY();

With hFlip, the above becomes:

var newX = <?php echo $chartWidth ?> - 1 - viewer.getChartMouseX();
var newY = viewer.getChartMouseY();

var dx = newX - centerX;
var dy = centerX - newY;

Also, note that in the above, I assume $chartWidth is the width of your chart in pixels at the time of hFlip. If your code have changed the chart size after hFlip, please remember to use the chart size at the time of hFip instead of the final chart size.

If you need to debug and trace the issue, you may display the coordinates on the web page using the following method:

(a) Create a DIV block on the web page, like <DIV ID="xxx">Empty</DIV>

(b) In your mouse move handler, you may use the following code to display the mouse coordinates on the above DIV block:

document.getElementById("xxx").innerHTML=" From (" + viewer.getChartMouseX() + "," + viewer.getChartMouseY()+ ") to (" + newX + "," + newY + ")";

You may modify the above code to display some other information (such as dx and dy) that you would like to trace. In this way, you can see the coordinates directly as you move the mouse over the chart.

Suppose without the hFlip, the cell is in the mouse coordinate (600, 550). After the hFlip, the cell is in the mouse coordinate (201, 251). Then after the hFlip, the newX and newY should be computer so that it becomes (600, 550), the same (x, y) value before the hFlip. As the (x, y) value is the same as the value before the hFlip, so dx, dy and all other values and the tooltips should remain the same.

Hope this can help.

Regards
Peter Kwan

Re: chart inquiry

Posted by at on Feb-09-2013 12:04

Hello Peter,

   I stumble upon this thread as I was debugging the rotate and flip feature of the chart I made and this has been helpful for me to reconstruct it. I managed to utilize the formula you provided and made it working but Im not really good at this or my mind is not just working so I need you help for an algo/guide to make this correct.
  The scenario is this, my wafer chart can be rotated/flipped by using a drop-down list of options to reset, invert-x(hflip), invert-y(vflip), 0deg, 90deg, 180deg, 270deg. So the user can hflip/vflip, then rotate to any degrees the flip again and so on. The wafer chart itself is displaying ok. What Im doing is saving into the session the sequence of rotation/flipping.

   if (isset($this->filters['orientation'])) {
            # unset session if reset
            if ($this->filters['orientation'] == 'reset') {
                unset($_SESSION['flip_rotate_seq'][$this->waferId]);
            }

            $seq = array();
            $_SESSION['flip_rotate_seq'][$this->waferId][] = $this->filters['orientation'];
            $seq = $_SESSION['flip_rotate_seq'][$this->waferId];

            foreach($seq as $orientation) {
                switch($orientation) {
                    case 'invert_x':
                        $d->hflip();
                        break;
                    case 'invert_y':
                        $d->vflip();
                        break;
                    case '0':
                    case '90':
                    case '180':
                    case '270':
                        $d->rotate(intval($orientation));
                        break;
                    default:
                }
            }
     }

   My problem now is on the mouseover using the js you provided here, though it's okay with just a sequence of rotation alone or just a hflip or vflip, it's not correct anymore when flipping and rotation is combined or with just the sequence of vflip then hflip then vflip again and so on. I know Im missing something here and need to modify your code further but my mind is not helping me currently so I need your help on this. The session from php is just passed to js for simulating the sequence of flip/rotate which is below. Pls enlighten me on how to achieve this. Thanks as always.
  God bless.

        var center_x = chart_width / 2;
        var angle = 0;
        for (var i = 0; i < seq.length; i++) {
            switch(seq[i]) {
                case 'invert_y':
                    var newX = viewer.getChartMouseX();
                    var newY = chart_width - 1 - viewer.getChartMouseY();
                    var dx = newX - center_x;
                    var dy = center_x - newY;
                    //console.log(dx+' '+dy);
                    break;
                case 'invert_x':
                    var newX = chart_width - 1 - viewer.getChartMouseX();
                    var newY = viewer.getChartMouseY();
                    var dx = newX - center_x;
                    var dy = center_x - newY;
                    //console.log(dx+' '+dy);
                    break;
                case '0':
                case '90':
                case '180':
                case '270':
                    angle += parseInt(seq[i]);
                    var dx = viewer.getChartMouseX() - center_x;
                    var dy = center_x - viewer.getChartMouseY();
                    //console.log(dx+' - ' + dy);
                    break;
                default:
                    var dx = viewer.getChartMouseX() - center_x;
                    var dy = center_x - viewer.getChartMouseY();
            }
        }

Re: chart inquiry
Posted by at on Feb-11-2013 16:08	\| Reply \| Monitor
Hi Peter, Any update on this? Really need this to work asap and I'm out of idea. Thanks and regards.

Re: chart inquiry

Posted by Peter Kwan on Feb-12-2013 02:09

Hi at,

To trouble-shoot your code, I suggest you try hFlip and vFlip first. After it works, at least you know your code structure is OK, and then you can try to add the rotation formula.

By reading your code, I think you can try to apply hFlip, vFlip and rotations in sequence. So the result of the output of one operation becomes the input to the next operation.

However, in your Javascript code, the inputs of the operation does not come from the output of the previous operation. Instead, the input comes from viewer.getChartMouseX() or viewer.getChartMouseY(), which are position of the mouse click, not the output of the previous operation. That's why the code does not work when there are more than one operation.

Second, I think when creating the chart, your code first create the original non-flipped non-rotated chart, then your code flips it and rotates it. Then your code displayed the final flipped and rotated chart to the user. So what the user sees is the final chart.

Then user then clicks on the final chart, and the intention of the Javascript is to reverse the operation to get the original position. Therefore the operation should be applied in reverse order. I am not sure what is "seq" in your Javascript code, and if it is in reverse order of the sequence in PHP code.

Regards
Peter Kwan

Re: chart inquiry

Posted by at on May-18-2016 14:30

Hi Peter, I'm simplifying the operation a bit but I think geometry really is not my strong suit. In my php code, I call vFlip()/hFlip() then rotate($angle). So I'm now limited only to two operations, flip then rotate. How can I modify your js code below(only reverses the rotation) such that it will reverse the flip also?

JsChartViewer.addEventListener(window, 'load', function() {
    var viewer = JsChartViewer.get('<?php echo $viewer->getId()?>');

    // The mouse move event handler
    viewer.attachHandler("MouseMoveChart", function(e) {

// Reverse the rotation to get the cell coordinates
var angle = 3.1415926536 / 180 * <?php echo $angle ?>;
var centerX = <?php echo $chartWidth ?> / 2;
var dx = viewer.getChartMouseX() - centerX;
var dy = centerX - viewer.getChartMouseY();
window.cellX = (dx * Math.cos(angle) + dy * Math.sin(angle)) / <?php echo $cellWidth ?>;
window.cellY = (-dx * Math.sin(angle) + dy * Math.cos(angle)) / <?php echo $cellWidth ?>;

if (window.cellX * window.cellX + window.cellY * window.cellY >= <?php echo $width * $width / 4 ?>)
{
// mouse is not over the wafer circle
window.cellX = -9999;
viewer.hideObj("tooltip");
}
else
{
window.cellX = Math.floor(window.cellX + <?php echo $centerX ?>);
window.cellY = Math.ceil(window.cellY + <?php echo $centerY ?>);

// mouse is over the wafer circle - displays the cell coordinates in a floating box
this.showTextBox("tooltip", viewer.getChartMouseX() - 4, viewer.getChartMouseY() - 4,
JsChartViewer.BottomRight, "(" + window.cellX + "," + window.cellY + ")",
"padding:2px 3px 3px 3px;font:bold 11px Arial;background-color:#CCCCFF;color:#000000;border:1px solid black;");

// auto-hide when mouse moves outside the chart
viewer.setAutoHide("all", "MouseOutChart");
}
    });
});

Re: chart inquiry

Posted by Peter Kwan on May-19-2016 01:45

Hi at,

hFlip is just flipping the x-coordinates. In Javascript, after the line that computes dx:

var dx = viewer.getChartMouseX() - centerX;

please add the code:

if (<?php echo $hFlip ?>) dx = -dx;

where $hFlip is a PHP variable that is set to true or 1 if hFlip is used.

Your code only needs to support rotate and hFlip. vFlip is equivalent to hFlip plus an additional rotation of 180 degrees. In other words, if the user selects (vFlip, angle), you code can execute (hFlip, angle + 180), which are equivalent. Also, a vFlip followed by an hFlip or vice versa is equivalent to an additional rotation of 180 degrees with no flipping.

Hope this can help.

Regards
Peter Kwan

Re: chart inquiry
Posted by at on May-19-2016 11:01	\| Reply \| Monitor
Thanks Peter.