cfchart tooltip popup format?

Question

Would anyone know if it is possible to format the tooltip that displays when hovering over a ColdFusion chart (when the attribute tipStyle = "MouseOver" is set)?

I would like it to be formatted as a number style to include two decimal places, even if the value is 0 (ex: 0.00 instead of just 0). I believe this value ties into the axis data format as well, so if it would be at all possible to format the axis numbers, then it might carry over to the tooltip.

I had been thinking to try and override the javascript function call for the onmouseover event that is built into the cfchart tag, but I am not sure the name of this functionor how to go about doing that either. Any thoughts/suggestions would be great. Thanks.

Note that I have also tried formatting the value in Oracle first and passing that to the "value" for the "cfchartdata" tag, but ColdFusion did not like it passing a non-simple type. — Ben

Leigh Leigh · Accepted Answer · 2011-07-26T16:29:32

You could customize the annotation (ie tooltip). Just specify a custom format ie ${value;##.00} to display two decimal places.

For a list of the supported variables see the webcharts3D utility help: Designer => Design => Elements =>Parameters.

<cfsavecontent variable="style"><?xml version="1.0" encoding="UTF-8"?>
<frameChart>
          <frame xDepth="12" yDepth="11"/>
          <yAxis scaleMin="0" />
          <elements drawShadow="true">
               <morph morph="Grow"/>
          <![CDATA[
X Label = $(colLabel)
X Value = ${value;##.00}
          ]]>
          </elements>
          <decoration style="FrameTopBottom" foreColor="white"/>
          <paint palette="Pastel" isVertical="true" min="47" max="83"/>
          <insets right="5"/>
</frameChart></cfsavecontent>
<cfchart format="png" style="#style#">
    <cfchartseries type="bar">
        <cfchartdata item="Apple" value="50">
        <cfchartdata item="Orange" value="76.8">
        <cfchartdata item="Pear" value="100.634">
    </cfchartseries>
</cfchart>

cfchart tooltip popup format?

2 Answers