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
| Reply | Monitor
Hi Peter,

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

B.R.

Thexder

  Re: Make a custom drawing object clickable
Posted by Peter Kwan on Mar-30-2022 18:57
| Reply | Monitor
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.

Regards
Peter Kwan

  Re: Make a custom drawing object clickable
Posted by Thexder ho on Mar-31-2022 15:41
| Reply | Monitor
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!

B.R.
Thexder

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

The HTML image map is a standard:

https://www.w3schools.com/tags/tag_area.asp

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

m_chartViewer->setImageMap(myImageMap.c_str());


As an example, you can try:

std::string testImageMap = "<AREA shape='rect' coords='0, 0, 100, 100' title='ABC DEF' href='clickable'>";
m_chartViewer->setImageMap(testImageMap.c_str());

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

Regards
Peter Kwan

  Re: Make a custom drawing object clickable
Posted by Thexder ho on Apr-01-2022 11:55
| Reply | Monitor
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
    m_ChartViewer.setChart(c);

    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
    m_ChartViewer.setImageMap(myImageMap.c_str());

    // 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
| Reply | Monitor
Attachments:
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
m_ChartViewer.setImageMap(myImageMap.c_str());

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'.

Regards
Peter Kwan
helloworld_20220401154943.png

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

this makes the big difference!

Thank you!

B.R.
Thexder