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

Message ListMessage List     Post MessagePost Message

  Bubble chart imagemap with different symbols
Posted by Stefan Beyer on Nov-13-2014 17:14
| Reply | Monitor
Attachments:
Hi,

we're using a bubble chart to display 3-dimensional data where the third dimension (the
bubble size) can also be negative. To display negative data points we use diamonds as
symbols.

However we also use an imagemap so that the user can see the exact values of all
dimensions. We noticed that the hover area is always a rectangle, which is
not that bad for circles but can get very confusing with diamonds if there are overlapping
data points. I included an image with a concrete example.

According to the offical w3c standard it is perfectly possible to support arbitrary polygons
and even circles (http://www.w3.org/wiki/HTML/Elements/area). Are we overlooking
something or is this simply not supported in the current version (5.1.1) of ChartDirector?

Thanks in advance!
bubble_chart.png

  Re: Bubble chart imagemap with different symbols
Posted by Peter Kwan on Nov-14-2014 02:35
| Reply | Monitor
Hi Stefan,

Unluckily, the generated image map for symbols are always rectangles in the current
version of ChartDirector.

For your case, one method is to generate the image map with your own code. It should
take less than 10 lines. For example, in C#, it is like:

//disable the automatic image map for the diamond shapes
myDiamondLayer.setHTMLImageMap("{disable}");

.....


//the default map for other layers
string imageMap = c.getHTMLImageMap(......);

//image map for the diamond shapes
for (int i = 0; i < diamondPointCount; ++i) {
    int xCoor = c.getXCoor(myDiamondXData[i]);
    int yCoor = c.getYCoor(myDiamondYData[i]);
    int radius = myDiamondSize[i] / 2;
    imageMap += "<area shape='poly' coords='" + (xCoor - radius) + "," + yCoor +
        "," + xCoor + "," + (yCoor - radius) + "," + (xCoor + radius) + "," + yCoor +
        "," + xCoor + "," + (yCoor + radius) + "' title='At diamond point '" + i + "' />";
}


Note that in the above, I  just append the image map entries to a text string. If you have
may entries, it would be more efficient to use something like a StringBuilder or a "stream".

Regards
Peter Kwan