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

Message ListMessage List     Post MessagePost Message

  clickable question
Posted by at on Mar-28-2012 02:01
| Reply | Monitor
Attachments:
Hi Peter,
I have a scatter plot and want it to be clickable not per individual scatter/image but by
area/region in order to minimize the impact in performance from adding extrafields since this
can possibly contains lots of data. In the attached example, I want to add only 1 extrafield
to data having same x-labels e.g. all 25-1606 and not per 25-1606, what is the best way to
do this in chartdirector (php version) ?

Thanks.
scatter.png

  Re: clickable question
Posted by Peter Kwan on Mar-28-2012 23:22
| Reply | Monitor
Hi at,

I assume for the chart you attached, you would like only 3 clickable region (3 hot spots). In general, you would like to have as many clickable regions as the distinct x-axis labels in the chart. So if there are 5 distinct x-axis labels, you would like 5 distinct clickable regions.

There are several methods to do that. After some thoughts, I think directly generating the image map using PHP code is the easiest. It is like:

.... create chart as usual .....

# Create the image and save it in a temporary location
$chart1URL = $c->makeSession("chart1");


$imageMap = "";
$topY = $c->getPlotArea()->getTopY();
$bottomY = $c->getPlotArea()->getTopY() + $c->getPlotArea()->getHeight();
$startX = $c->getPlotArea()->getLeftX();

for ($i = 0; $i < count($xLabels); ++$i) {
    if (($i == count($xLabels) - 1) || ($xLabels[$i] != $xLabels[$i + 1])) {
         $endX = $c->getXCoor($i + 0.5);
         $extraFieldForThisRegion = "... get the extra field for this segments ...";
         $imageMap = $imageMap . "<area shape='rect' coords='$startX,$topY,$endX,$bottomY' href='xxx.php?aaa=$extraFieldForThisRegion' />";
         $startX = $endX;
    }
}


In the above code, an <area> tag is created for each span of data points that has the same labels. Note that it assumes all data points has an label. (In the chart you attached, not all data points have a visible x-axis label. I assume it is because your code uses setLabelStep to avoid some labels from be displayed.) The area tag above just contains a href attribute. You can freely add more attributes (like a title attribute for tooltips).

Hope this can help.

Regards
Peter Kwan

  Re: clickable question
Posted by at on Mar-29-2012 01:25
| Reply | Monitor
Thanks Peter for the great support, tried and it works. Though this is okay for me, I may
ask if there's a possible way not to include the blank area on being clickable? I mean only
the scatter plots?

  Re: clickable question
Posted by Peter Kwan on Mar-29-2012 23:24
| Reply | Monitor
Hi at,

Do you mean that you only want the data points to be clickable?

Actually, I am not sure exactly what you mean by "minimize the impact in performance from adding extrafields"? Do you mean you would like to reduce the server overhead so that you do not need to create such a large array for the extra fields, or do you want to reduce the image map size to reduce network overhead?

There are many methods to not using a large array for the extra fields. For example, you can separate your data into 3 layers, with each layer containing just the points for a particular x-axis label. Then for each layer, you just need to add an extra field with one element, and use {dsField0} to refer to that extra field. So at the end, you need to have 3 arrays, with each array have 1 element, for a total of 3 elements. This minimize the number of elements required for the extra field.

However, with the above method, the image map size will not be reduced. You would still have as many <area> tags as the number of points in your chart, and each <area> tag will contain the extra field.

If you want only the data points to be clickable, then in any case, you would need to have as many <area> tags as the number of data points, so that the browser can know the position of each data point. If the extra field is long, instead of putting the extra field in the <area> tag, you may use "onclick='xxx({layerId});'", which is much shorter. The xxx is a Javascript function that you write, and it can use the layerId (which would be 0, 1, or 2) to determine the extra field to use to generate the URL. The "extra field" in this case is not passed to ChartDirector, but should be passed to Javascript as an Javascript array.

Hope this can help.

Regards
Peter Kwan