cfcharts plot value-box png (with numbers) from cfquery and cfloop

Question

I need to create a generated png based chart file with plot labels with the numeric value as you see in the example below. I am on Coldfusion 10 so this is using the newer ZingChart engine. The example you see was made by ZingChart Builder.

enter image description here

BTW, I can draw a basic chart to a png file and retrieve it, and see it! I can get my X and Y stuff right. I can get my series presented in a legend, I can do basic positioning stuff, I can do different chart types. I can't seem do anything with the json override stuff especially plot bar labels.

The code that I am providing is from an example I scoured from the interwebs to test with ...but it should fail nicely (just like my whole day).

<cfscript>
    legend = {
        "width":150,
        "height":25,
        "position":"100% 0%",
        "margin-top":10,
        "margin-right":10,
        "margin-left":10,
        "margin-bottom":10,
        "layout":"x2",
        "alpha":0.5,
        "background-color":"##99cc66",
        "background-color-2":"##99cc66",
        "border-color":"##000000",
        "border-width":1,
        "shadow":true,
        "shadow-alpha":1,
        "shadow-color":"##000000",
        "shadow-distance":2,
        "shadow-blur-x":1,
        "shadow-blur-y":1,
        "draggable":false,
        "minimize":false
    };
    type ="bar";
    plot = {
        "value-box":{
            "type":"all",
            "text":"%v",
            "text-align":"center",
            "alpha":0.5,
            "background-color":"##99cc66",
            "background-color-2":"##99cc66",
            "border-color":"##000000",
            "border-width":1
        }
    };
</cfscript>
<cfchart
legend="#legend#"
plot="#plot#"
type="#type#"
showlegend="true"
height="300"
width="1300" 
title="Super fun time!" 
format="png" 
name="moreComplexThanChineseArithmetic">
    <cfchartseries seriescolor="red" seriesLabel="SeriesA"  >
        <cfloop from="1" to="10" index="i">
            <cfchartdata item="" value="#randRange( 5, 100 )#">
        </cfloop>
    </cfchartseries>
    <cfchartseries seriescolor="green"  seriesLabel="SeriesB"  >
        <cfloop from="1" to="10" index="i">
        <cfchartdata item="" value="#randRange( 5, 100 )#">
        </cfloop>
    </cfchartseries>
    <cfchartseries seriescolor="blue" seriesLabel="SeriesC" >
        <cfloop from="1" to="10" index="i">
        <cfchartdata item="" value="#randRange( 5, 100 )#">
        </cfloop>
    </cfchartseries>
</cfchart>
<cfset savedFile = getTempFile("/dynamic/coldfusion/temp/", "moreComplexThanChineseArithmetic") & ".png" />
<cfset fileWrite(savedFile, moreComplexThanChineseArithmetic) />     
<img src="<cfoutput>#savedFile#</cfoutput>" />

I am in a clustered environment, these charts don't serve HTML, hence the png workaround. Plus I have to have it as in image because images scale and I can export to a PDF and it looks right and the server renders and shoots it to the client so I have very little client-side delays.

Now. There are variable replacements in the #plot#, etc... as you can see above (I have not seen 'any' of that json stuff work that I have tried (all day) (so many different ways/combos to make something happen). It either fails with and error (because I made a mistake), or it does nothing (which is amazingly awesome).

There could be problems with that json stuff above, but I again, I overwrote change after change with new json attempts, inline json too, simplified too, etc.

What I believe should happen is that the plot value:box text: v% should (by fairy magic) return whatever the value is in the chartdata value parameter as a nice number above or below the bar (or so I would expect), but it doesn't do anything, so I cannot test my expectations.

Let me know if more details are needed...

PS and FYI: I can't work on other charting packages.

Frank Tudor · Accepted Answer · 2015-02-22T03:46:45.153

Well all you have to do is go to bed totally defeated to fight another day.

Here is the solution (its attached to the chartseries container). >>>> datalabelstyle="value"

<cfchartseries 
    datalabelstyle="value" 
    type="bar" 
    seriescolor="blue" 
    seriesLabel="SeriesC" >
        <cfloop from="1" to="10" index="i">
        <cfchartdata item="" value="#randRange( 5, 100 )#">
        </cfloop>
</cfchartseries>

More importantly. JSON stuff only works with format="html"...It doesn't work with format="png". format="png" doesn't use zingcharts, it falls back to the webcharts3D engine. Coldfusion 10 has two charting engines. I hope this helps someone else who falls into this weirdness. Also, for Coldfusion 11, webcharts3d can work. There is a bug discussion that sheds more light on what to do.

cfcharts plot value-box png (with numbers) from cfquery and cfloop

1 Answers1