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

Message ListMessage List     Post MessagePost Message

  Custom tooltip for pie chart
Posted by Andrew Philipp on Sep-28-2014 17:17
| Reply | Monitor
I have a pie chart that has a customized tooltip showing the general statistics. To this
tooltip I also want to add the information about the sector label and value. The general
statistics information remains always the same, however the sector label and value in the
tooltip should be updated based on the sector on which i am doing my mouse hover. Could
you give me an idea on how to update sector label and value in the tooltip based on the
on the respective sector on which I do mouse hover.

Currently I do it as follows in Java;


StringBuilder toolTip = new StringBuilder();

toolTip.append("<table>\n");
toolTip.append("<tr><th align=\"left\">Average:</th><td>" + avg+ "</td></tr>");
toolTip.append("<tr><th align=\"left\">Total:</th><td>" + total+ "</td></tr>");
toolTip.append("</table>");

String toolTipString = createTooltipString(toolTip);

chartViewer.setToolTipText(toolTipString);


Thank you
Andrew

  Re: Custom tooltip for pie chart
Posted by Andrew Philipp on Sep-29-2014 16:51
| Reply | Monitor
Hi Peter,

After browsing through the sample examples given for Pie chart I see
the following

       //include tool tip for the chart
        viewer.setImageMap(c.getHTMLImageMap("clickable", "",
            "title='{label}: US${value}M ({percent}%)'"));

But how do I get the above piece of code integrated to my code in the previous note

Thanks in advance for your reply
Andrew

  Re: Custom tooltip for pie chart
Posted by Peter Kwan on Sep-30-2014 02:35
| Reply | Monitor
Hi Andrew,

You can just append the tooltips together. For example:

//include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "",
"title='<html>" + toolTip.ToString() + "<br>{label}: US${value}M ({percent}%)</html>'"));

Note that in the above, the toolTip is assumed not to contain the single quote character.

Hope this can help.

Regards
Peter Kwan

  Re: Custom tooltip for pie chart
Posted by Andrew Philipp on Sep-30-2014 16:50
| Reply | Monitor
Hi Peter,

Only the sector label and value appears. Remaining information about the general
statistics are lost.

The method createTooltipString(toolTip) is already returning me an html formatted
tooltip.


String htmlImageMap = pie.getHTMLImageMap("", "", "title='{label}:{value}'");
      final StringBuilder myhtmlBuilder = new StringBuilder();
      myhtmlBuilder .append("<table>\n");
      myhtmlBuilder .append("<tr><th align=\"left\"></th><td>" +htmlImageMap + "
</td></tr>");
      myhtmlBuilder .append("</table>");


StringBuilder toolTip = new StringBuilder();

toolTip.append("<table>\n");
toolTip.append("<tr><th align=\"left\">Average:</th><td>" + avg+ "</td></tr>");
toolTip.append("<tr><th align=\"left\">Total:</th><td>" + total+ "</td></tr>");
toolTip.append("</table>");


After that I gave it to the method

String tooltip = createTooltipString(toolTip + "\n" + myhtmlBuilder.toString());

I see the Html document correctly on debug.

Then I give it to imagemap as follows

viewer.setImageMap(c.getHTMLImageMap("", "",
          "title="+toolTip));

However on mouse hover in my tooltip only the sector label and value are appearing. All
the remaining statistical information are lost.

Please advice

Thank you
Regards
Andrew

  Re: Custom tooltip for pie chart
Posted by Peter Kwan on Oct-01-2014 00:11
| Reply | Monitor
Hi Andrew,

The code you use has several issues. First, the htmlImageMap is not a tooltip. It is some
HTML structure (<area> tags) that defines a region (the sectors) and associated tooltips
with that region.

I am not sure what exactly does createTooltipString do. If its purpose is to create some
HTML formatted tooltip, then it would not work with image maps, because image maps
are not just tooltips.

Instead, the static tooltips should be incorporated into the image map, like:

// Your static tooltip
StringBuilder toolTip = new StringBuilder();
toolTip.append("<table>\n");
toolTip.append("<tr><th align=\"left\">Average:</th><td>" + avg+ "</td></tr>");
toolTip.append("<tr><th align=\"left\">Total:</th><td>" + total+ "</td></tr>");
toolTip.append("</table>");

// The sector tooltip
String sectorToolTip = "<table><tr><td>{label}:{value}</td></tr>";

// Create the image map
viewer.setImageMap(c.getHTMLImageMap("clickable", "",
    "title='<html>" + toolTip.toString() + sectorToolTip + "</html>'"));

// You can use the toolTip in setToolTipText if you like (this part is not related to the
chart).

viewer.setToolTipText(createTooltipString(toolTip));

Hope this can help.

Regards
Peter Kwan