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

Message ListMessage List     Post MessagePost Message

  Add imagemap to marks
Posted by Bas on Jun-27-2011 18:33
| Reply | Monitor
Hey Peter, just in the beautifying stage of my Gantt chart, but because it is a different question I think you want this also in a different message:

In my Gantt I use Marks and Zones to show certain periods:

for (int i = 0; i < astrPrjCode.length; ++i)
    {
    c3.yAxis().addZone(Chart.CTime(adtPrjPlotfromdate[i]), Chart.CTime(adtPrjPlottodate[i]), 0xE6E6FA);        

    // Add a vertical grey (0x708090) mark line at start and end of the projects
    Mark yMark1 = c3.yAxis().addMark(Chart.CTime(adtPrjPlotfromdate[i]), 0x708090, astrPrjCode[i] + "\\n" + astrPrjDesc[i]);
    Mark yMark2 = c3.yAxis().addMark(Chart.CTime(adtPrjPlottodate[i]), 0x708090, "");

    // Set the mark line width to 2 pixels
    yMark1.setLineWidth(2);
    yMark2.setLineWidth(2);

    yMark1.setDrawOnTop(false);
    yMark2.setDrawOnTop(false);

    // Put the mark label at the left of the mark line
    yMark1.setAlignment(Chart.TopRight);
    }

This works fine. However, I'd like to dynamically add HTML image maps for every yMark1 generated by this loop (so that the text becomes a hyperlink for every project).

What would be the way to do it? I found some clue in your samples and help, but it was mostly static and generated inside the HTML section rather than in the JSP itself.

Thanks

Bas

  Re: Add imagemap to marks
Posted by Peter Kwan on Jun-28-2011 01:43
| Reply | Monitor
Hi Bas,

There is example "Custom Clickable Objects" in the ChartDirector distribution that shows how to make a mark clickable. If you have multiple marks, you may change the code to use a loop. For example, you can use something like:

//Save the marks so that we can use them to generate the image map
Mark[] myMarks = new Mark[astrPrjCode.length];
for (int i = 0; i < astrPrjCode.length; ++i)
{
    .... your existing code to add mark ....
    myMarks[i] = yMark1;
}

After making the chart, you may generate the image map like:

StringBuffer myMarkImageMap = new StringBuffer();
for (int i = 0; i < astrPrjCode.length; ++i)
    myMarkImageMap.append("<area " + myMarks[i].getImageCoor() + " href='myHandler.jsp?mark=" + astrPrjCode[i] + "' />");

In the HTML part of the code, you may output the image map like:

<%=myMarkImageMap.toString()%>

Hope this can help.

Regards
Peter Kwan

  Re: Add imagemap to marks
Posted by Bas on Jun-28-2011 02:37
| Reply | Monitor
Thanks Peter, the code does generate image map, but how do I combine it with the existing one? As far as I know there can be only one image map for an image, but I get the impression that now I have two image maps (the original one based on the boxwhisker layer and the new one for the marks)

Thanks

Bas

  Re: Add imagemap to marks
Posted by Bas on Jun-28-2011 03:00
| Reply | Monitor
Sorry to bother, Peter. I should have looked in the samples.

If anybody is interested, here's the HTML code to create multiple image maps for one image:

<img src='<%=response.encodeURL("getchart.jsp?"+chart1URL)%>' usemap="#map1" border="0">
<map name="map1"><%=imageMap1%><%=myMarkImageMap.toString()%></map>

Thanks Peter, CD was, is and will be my Charting solution of choice. Not for a minute have we regretted the license we bought.

Bas