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, Jul 26 '11 at 15:18

score 1 · Accepted Answer · answered Jul 26 '11 at 16:29

1

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>

answered Jul 26 '11 at 16:29

Leigh

28,765
10
55
103

Thanks for the reply, that was definitely helpful. However, I can't seem to get the pattern to actually format the data. In your example above, it will simply display "X Value = ${value;##.00}" instead of the actual data value. But if I leave off the pattern, it will display the value properly. – Ben Jul 26 '11 at 17:41
@Ben - Are you running the example "as is", and what CF version? It produces "X Value = 50.00" under CF9. – Leigh Jul 26 '11 at 18:10
I'm sorry, I completely forgot to mention that this is for CF7. And no, I was just plugging that syntax into what I already had. Sorry about the confusion. – Ben Jul 26 '11 at 18:16
@Ben - Wait. I just tried it under 7 and got the same results. Maybe it is not supported in that version of webcharts. Let me check. – Leigh Jul 26 '11 at 18:24
@Ben - Unfortunately the CF7 webcharts version does not support custom formats. For the X-Axis you may have to resort to some serious hackery. Such as capturing the output and doing a regex replace on the html. That is the best I am coming up with for CF7. – Leigh Jul 26 '11 at 18:58
Thanks, Leigh, that's what I had been wondering about trying. But I'm not sure it's worth that much "hackery." Thanks for looking into this though. – Ben Jul 26 '11 at 19:03
The code is not too bad. But I agree, it is probably a bit too much hoop jumping just for a tooltip ;) Cheers – Leigh Jul 26 '11 at 19:10
Do you by chance know if it would be possible to upgrade the version of WebCharts3D within ColdFusion MX 7? I saw on their website that you should be able to download the install.zip file and extract the files to the proper place, restart the server, and use the updated version with a new license. However, I was just curious if you had any experience/issues with doing this at all. – Ben Jul 26 '11 at 21:12

score 0 · Answer 2 · answered Jul 26 '11 at 19:27

0

Just as a note I don't think you could intercept cfchart's onmouseover event in Javascript easily because cfchart uses Flash or static images, so you'd have to do some sort of funky ActionScript <-> Javascript wizardry to intercept the event.

answered Jul 26 '11 at 19:27

marta.joed

366
3
6

Depends on the chart type. For png, jpg, etcetera it can be done easily. But you are correct about the Flash format being different. That type may not even expose the mouseover events.. – Leigh Jul 26 '11 at 20:16
Yes, I am pretty sure that there is no way to see the mouseover events with the flash version of the charts. It seems to create a swf and embed that with html. So I would assume the swf is where it hides those events. – Ben Jul 26 '11 at 20:26
Yeah, I assumed he meant the onmouseover event over a certain point within the chart (ie mousing over a bar in a barchart) which is hidden within the swf as you guys pointed out too – marta.joed Jul 27 '11 at 22:01

cfchart tooltip popup format?

2 Answers2