Friday 15 July 2011

Tooltips On Charts

If you don't know what a "tooltip" on a chart is, it is the little piece of text that pops up when you hover over a segment on the graph. In the Apex Chart Wizard, it is referred to as a hint. When you select the "Hints" checkbox in the wizard, the tooltips are enabled.

While tooltips are available through the Apex Chart Wizard, very little of their real functionality is made available to you directly by the wizard. For example, my customer wanted the following:

1.  A specific font and text colour for the tooltip.
2.  The tooltip needed to show both the value and the percentage of the total.

My first reaction was "that's not possible." But, a bit of research and effort determined that not only was it possible but that we can do all sorts of cool things with the tooltips.






Like everything in Apex charts, it is handled through the XML.  There is a tag for <tooltip_settings> and defines the tooltip functionality. Here is how my XML for the above tooltip looks:


<tooltip_settings enabled="true">
      <format><![CDATA[{%SeriesName}{enabled:False} -
           {%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,} -
          {%YPercentOfTotal}{numDecimals:0}%]]>
      </format>
       <font family="Arial" size="10" color="#808080" />
      <position anchor="Float" valign="Top" padding="10" />
</tooltip_settings>

As you can see, within the <tooltip_settings> tag there are a number of other tags such as <format>, <font> and <position>. There are also other tags as well that I have not used here.

The format section specifies what information will appear in the tooltip and how it will be formatted. The values in the tooltip are specified by keywords (they have a % in front of them). Here is the information in my tooltip and below are the keywords associated with them:

Air     -               4              -  57%
%SeriesName    %Value        %YPercentOfToal

Typically, Apex will insert the %Value keyword for you when you specify Hints in the Wizard. But that is rather limited. There are a large number of keywords you can use to show other values. For example, I have used %YPercentOfTotal which displays the percentage of the total bar represented by %Value amount. Take a look at some of the cool keywords available to you:

%YPercentOfCategory - the percentage of all the points with the same name
%YPercentOfSeries      - the percentage of the series represented by the point
%High                          - the high value of the point (candlestick)
%Low                          - the low value of the point (candlestick)
%Name                        - the name of the point
%Range                       - the range of the point
%YPercentOfTotal       - the percentage of all the series on the chart

After each keyword is the format definition for that keyword.  For example, {numDecimals:0} set the number of decimals displayed to zero. If you want no formatting at all, you can use {enabled:False} immediately after the keyword.

While the wizard in Apex will get you started, by using "custom XML" for your chart, you can have complete control of the tooltips and make them even more meaningful for your users. Try it out for yourself.

Here is a reference that will assist you in unlocking the power ot tooltips:

Tooltip settings and formatting

8 comments:

  1. Thank you so much for sharing this. I am having a problem with the tooltip in a resource gantt chart. I would like to display the project name for example. For now, it displays the resource name, start date, end date, % of completion. How can I add this? If not possible, how can I add the project name to the datagrid in the chart, i.e. the left side column?

    Thanks for your help!

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Thank you so much for these tips, however I want to include some info from the database in the name of the series, but it seems the name of the string is taken ad literam. Not sure how to display the extra information though, as the series won't let me rename the series the way I want
    Alice G.

    ReplyDelete
  6. Thanks for sharing very important information. It help me a lot.

    ReplyDelete
  7. Hi, I found this chart solution very useful. However I want to show X-axis value in tooltip instead of Y-axis value. My XML code for chart is


    X-axis value is based on label data so how can I use label data in xmls pls. Many thanks. Iqbal

    ReplyDelete
  8. Got it. Actually I used %Name and it works for me. thanks.

    ReplyDelete