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

Message ListMessage List     Post MessagePost Message

  Make a custom drawing object clickable
Posted by Thexder ho on Mar-30-2022 15:34
Hi Peter,

How to set a image map to a custom DrawArea object, and make it clickable?
would you please provide sample code here?



  Re: Make a custom drawing object clickable
Posted by Peter Kwan on Mar-30-2022 18:57
Hi Thexder ho,

I assume you mean to make the entire DrawArea object clickable. In this case, you just need to create an image map as follows:

<area shape="rect" coords="leftX,topY,rightX,bottomY" href="clickable?id=myDrawArea">

In the above, the (leftX, topY), (rightX, bottomY) are the pixel coordinates of the top-left corners and bottom-right corners of your DrawArea in the chart that you are displaying (the chart that you put to the chart viewer). Since your code draw the DrawArea, it should have all the information.

In the above, I have set the id attribute to myDrawArea as an example. If your chart has multiple clickable objects, in the mouse click event handler, you can check this attribute to determine if the object clicked is the DrawArea.

Peter Kwan

  Re: Make a custom drawing object clickable
Posted by Thexder ho on Mar-31-2022 15:41
Hi Peter,

thanks for the quick response,

I am using vector<CPoint> ptNode to collect all drawing coordinates of each drawing object, not just a rectangular shape, it could be any,
I left an id for each object, now I need to know how to put this correctly in the image map,
I embedded my custom shape drawing process, have append the imagemap and call
m_chartViewer->setImageMap(c->getHTMLImage("") after m_chartViewer->setChart(c) inside the drawChart loop. But I doesn't work.

Thanks in advance, and looking forward to hear from you soon!


  Re: Make a custom drawing object clickable
Posted by Peter Kwan on Mar-31-2022 21:50
Hi Thexder,

The HTML image map is a standard:

Basically, you just need to specify your shape as an <AREA> tag. The shape can be a circle, rectangle or polygon. If the object contains more than one shape, you can use more than one <AREA> tag. ChartDirector can understand the <AREA> tag and use it to determine where is the hotspot.

Note the the coordinates used needs to be in the pixel coordinate system of the chart in the CChartViewer. I am not sure how you draw using the DrawArea. If you draw on the underlying DrawArea of the chart (obtained using c->getDrawArea() or c->makeChart()), then it is already using the coordinate system of the chart. If you create a standalone independent DrawArea object, draw things on it, and then put it onto the chart at position (x, y), then the coordinates you use the to draw the object will be offsetted by (x, y) in the chart coordinate system. That means you would need to add (x, y) to your coordinates in the <AREA> tag to express them in the chart coordinate system.

You may have many <AREA> tags if you have many objects, and you may also ask ChartDirector to generate hotspots for the chart objects. Since the image map are just text strings, you can append them together and then pass them to setImageMap. It is like:

std::string myImageMap = "<AREA .....";  //image map for DrawArea object 1
myImageMap += "<AREA ...."; // image map for DrawArea object 2 (if any)
myImageMap += c->getHTMLImageMap(.....);   //image map for other chart objects


As an example, you can try:

std::string testImageMap = "<AREA shape='rect' coords='0, 0, 100, 100' title='ABC DEF' href='clickable'>";

This should display a tooltip "ABC DEF" when the mouse hovers the top left corner of your chart

Peter Kwan

  Re: Make a custom drawing object clickable
Posted by Thexder ho on Apr-01-2022 11:55
Hi Peter,

Thanks for your quick reply as always,

I'm using the chart director  helloword demo program, and add your test code below,
but still nothing happened,

   // Draw Chart and set to CChartViewer

    // The data for the bar chart
    double data[] = {85, 156, 179.5, 211, 123};

    // The labels for the bar chart
    const char *labels[] = {"Mon", "Tue", "Wed", "Thu", "Fri"};

    // Create a XYChart object of size 250 x 250 pixels
    XYChart *c = new XYChart(250, 250);

    // Set the plotarea at (30, 20) and of size 200 x 200 pixels
    c->setPlotArea(30, 20, 200, 200);

    // Add a bar chart layer using the given data
    c->addBarLayer(DoubleArray(data, sizeof(data)/sizeof(data[0])));

    // Set the labels on the x axis.
    c->xAxis()->setLabels(StringArray(labels, sizeof(labels)/sizeof(labels[0])));

   // Output the chart

    std::string myImageMap = c->getHTMLImageMap("", "", "title='{xLabel}:
    myImageMap += "<AREA shape = 'rect' coords = '0,0,100,100' title = 'TESTING
    IMAGEMAP' href='clickable'>";

   // Include tool tip for the chart

    // In this sample project, we do not need to chart object any more, so we
   // delete it now.
    delete c;

   return TRUE;

  Re: Make a custom drawing object clickable
Posted by Peter Kwan on Apr-01-2022 15:53
Hi Thexder,

The following is my exact code and it works normally. I have attached the screenshot for your reference.

std::string myImageMap = c->getHTMLImageMap("", "", "title='{xLabel}: US${ value }K'");
myImageMap += "<AREA shape='rect' coords='0,0,100,100' title='TESTING IMAGEMAP' href='clickable'>";

// Include tool tip for the chart

The only different I can find between your code an my code is there is no empty space before or after all the '=' characters. For example, I use title='aaaa', while your code use title = 'aaaa'.

Peter Kwan

  Re: Make a custom drawing object clickable
Posted by Thexder ho on Apr-02-2022 07:37
Hi Peter,

this makes the big difference!

Thank you!