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

Message ListMessage List     Post MessagePost Message

  quadrant and hover labels/clickable points
Posted by Chris on Apr-03-2012 21:37
| Reply | Monitor
Hi

I have a quadrant graph pulling some SQL data and have managed to generate some labels from  athrird data column, but it is very cluttered (as the data to date is closely clustered - may change in due course).  I want to both work out the best way to display the labels (at present they overlap one another (I couldn't see an auto position) - maybe hover labels or callouts?) and I also want to trigger open page?id=y on a click where y is a fourth data column.

Any ideas?

Many thanks
Chris

  Re: quadrant and hover labels/clickable points
Posted by Peter Kwan on Apr-04-2012 02:38
| Reply | Monitor
Hi Chris,

Because a chart is has a fixed and finite size (unlike the web page itself which can grow indefinitely), it can only handle a limited amount of text. If there is too much text, using pop up tooltips or pop up boxes can be a good method. There are some examples in the "Clickable Charts" section of the ChartDirector documentation (see the "Simple Clickable Charts" and the "Javascript Clickable Charts" sample scripts).

To attach extra data to the data points, you may use extra fields. For example, in PHP:

$myLayer->addExtraField($myArrayOfPopUpToolTips);
$myLayer->addExtraField($myArrayOfQueryParameters);

You can then reference the above two fields using {field0} and {field1}. For example, for the image map that defines the tooltips and query parameters, you may configure it as:

$imageMap = $c->getHTMLImageMap("page.php", "id={field1}", "title='{field0}'");

Hope this can help.

Regards
Peter Kwan

  Re: quadrant and hover labels/clickable points
Posted by Chris on Apr-04-2012 18:13
| Reply | Monitor
Hi Peter

Thanks for that, spot on as usual  Only problem I still have is identifying overlapping data (eg say two or three  scatter values at x9,y9) - any ideas, only get to see the top point at the moment?  I am loading a single scatter series - happy to consider random symbols or something like cluster functionality (a bit like Google maps)

Thanks
Chris

  Re: quadrant and hover labels/clickable points
Posted by Chris on Apr-04-2012 18:22
| Reply | Monitor
Peter

Also is it possible to position a quadrant at say x5,y5 (with axes both having a range of 0-10).

Thanks

Chris

  Re: quadrant and hover labels/clickable points
Posted by Peter Kwan on Apr-05-2012 02:54
| Reply | Monitor
Hi Chris,

The easiest method I can think of is to make the axes from -5 to 5, so that the original is still (0, 0). Then your code "labels" the axes as "0", "1", "2", ...., "10". So although the internal scale is -5 to 5, on the chart you see the labels as 0 - 10, and to the end user it is 0 - 10.

Of course, you would also need to adjust your data by subtracting 5 from the actual data value, so that it fits with the internal axis scale. If your tooltips are using {x} or{value} to represent the x and y coordinates, you would need to change it to {={x}+5} and {={value}+5}.

Hope this can help.

Regards
Peter Kwan

  Re: quadrant and hover labels/clickable points
Posted by Chris on Apr-05-2012 15:26
| Reply | Monitor
Attachments:
Peter Kwan wrote:

Hi Chris,

The easiest method I can think of is to make the axes from -5 to 5, so that the original is still (0, 0). Then your code "labels" the axes as "0", "1", "2", ...., "10". So although the internal scale is -5 to 5, on the chart you see the labels as 0 - 10, and to the end user it is 0 - 10.

Of course, you would also need to adjust your data by subtracting 5 from the actual data value, so that it fits with the internal axis scale. If your tooltips are using {x} or{value} to represent the x and y coordinates, you would need to change it to {={x}+5} and {={value}+5}.

Hope this can help.

Regards
Peter Kwan

Hi Peter

I stuck to a normal x/y axes with ranges of 1-10 and then used a background image to put the quadrant and labels in  - see attached (works for me anyway!).

As for your other comment on overlaps, the data will always be whole numbers in this instance so I will end up with more than one point on say 5,5.  However I need to somehow suggest to the user that there are multiple points there (in the same scatter layer).  You talk about bottom layer/top layer - do you mean discrete data series or are you saying it is possible to know almost the equiv. of the z-value of the point?  So you could make point 1 at 5,5 size 12, point 2 at 5,5 size 8, point 3 at 5,5 size 4 etc (all points in same scatter layer)?

Thanks
Chris
demo.png

  Re: quadrant and hover labels/clickable points
Posted by Peter Kwan on Apr-05-2012 20:02
| Reply | Monitor
Hi Chris,

I originally thought you have multiple scatter layers, and the points from different scatter layers overlap.

If you have one scatter layer, and the points exactly overlap, there is a simplier method. You can create a bubble chart, in which the bubble shape is the symbol of your choice (you can use a cross shape as the bubble shape if you like), and the bubble size depends on the count of overlapping labels at that point.

If your data are from an SQL query, instead of using:

SELECT x, y from xxxx

you may use something like:

SELECT Count(*) * 3 + 7, Floor((x * 100 + y) / 100), (x * 10 + y) % 100 from xxxx GROUP BY x * 100 + y

With the above query, there will only be one record for each integer (x, y) position. The first column will become the size of the symbols, which grow larger depending on the number of overlapping symbols at that point, and the next two columns are the x and y coordinates of the points.

For the tooltips, you can include the number of overlapping points, represented in the tooltip template as {z}.

For the 4Q chart, if you can accept the axis labels at the border of the plot area, you can achieve the effect of the 4Q chart using the following methods:

For the lines at y = 5 and x = 5, you can use mark lines created using Axis.addMark.

For the labels at the 4 corners of the plot area, you can add them using BaseChart.addText with proper alignment settings.

If you need to color the 4 quadrant to be different, you can do so using Axis.addZone for the y-axis, in which the zone color is itself an x-zone color (created with XYChart.xZoneColor). If you need further details, please let me know.

Hope this can help.

Regards
Peter Kwan

  Re: quadrant and hover labels/clickable points
Posted by Peter Kwan on Apr-05-2012 02:47
| Reply | Monitor
Hi Chris,

Your code can always detect if the symbols overlap, and handle them using any method you like (such as by randomly disabling all of the ovelapping symbols except one - you may change the data value to NoValue to disable a point). The detection should not be difficult (eg. you can build a hash table using the coordinates as the key to quickly determine if a symbol overlap with other symbol).

In practice, the main problem is for symbols that partially overlap. For example, if one point is at (5, 5), and the other point is at (5.1, 5.1), have they overlapped? It depends on the symbol size, type, chart size, axis scale, etc, and is hard to determine. If a symbol only overlaps half of the other symbol, is this considered as an overlap? You may think the other symbol is still visible, as only half of which is blocked. However, if there are two symbols, each overlapping with half of the other symbol, it can completely block the other symbol.

If partial overlapping is really a concern, one method is to use partially transparent symbols. The other method is to make the symbols of the bottom layer slightly larger than that of the upper layers (eg. the bottom layer can use square symbols, the upper layer can use circle symbols in which the diameter is the same as the side of the square). With the latter method, one symbol cannot completely block another symbol, but multiple symbols together can still block the bottom symbol.

Regards
Peter Kwan

  Re: quadrant and hover labels/clickable points
Posted by Chris on Apr-05-2012 21:34
| Reply | Monitor
Hi Peter

I admittedly went for the quick win with the background, but now switched to marks/textareas.  Your SQL isn't quite right, I understand what you are trying to achieve a scale based on count and corresponding x,y columns.  I think something simple like SELECT Count(*) * 3 + 7, x, y from xxxx GROUP BY x, y is sufficient for this... - seems to give me the right answer?

Thanks

Chris

  Re: quadrant and hover labels/clickable points
Posted by Peter Kwan on Apr-05-2012 21:51
| Reply | Monitor
Hi Chris,

I believe you are probably correct. My SQL is very poor. I know what I want to achieve, but do not know the exact SQL to use, except that it should be a "GROUP BY" statement.

Regards
Peter Kwan