How to use ZingCharts utility with my existing code in ColdFusion 11?

281 views Asked by At

I recently migrated my application from ColdFusion 10 to ColdFusion 11. Though the migration was successful, the charts have been destroyed. Up until ColdFusion 10 there was a WebCharts JAR file, called wc50.jar, in the \lib directory. It contained, amongst others, chart modules such as com.gp.api.jsp.MxServerComponent. That JAR file is absent from ColdFusion 11. Hence we have decided to update the our "charting code" and decided to use the new ZingChart.

ZingChart is JSON based. I analysed and found there is a utility in ColdFusion 11 for us to convert the XML stuff to JSON. The name of the utility is cfchart_xmltojson.bat. So this is my analysis by far. My question is - how to run/use this utility to do conversion and then modify my charting code?

My current charting code look something like this:

<cfsaveContent variable="chartStyle">
    <cfoutput>
        <?xml version="1.0" encoding="UTF-8"?>
        <frameChart isMultiline="false" is3D="#is3D#">
            <frame outline="##666666"/>
            <yAxis scaleMin="0" scaleMax="100"/>
            <legend allowSpan="true" equalCols="false" placement="Right" isMultiline="true">
                <decoration style="None"/>
            </legend>
            <cfif ShowPyramidNums>
                <dataLabels style="value" placement="Inside" font="Arial-12-bold" >

                </dataLabels>
            </cfif>
            <elements place="Stacked" shape="PyramidCut" shapeSize="100">
                <movie framesPerSecond="2"/>
                <cfset sPerfCtr = 0>
                <cfloop index="i" from="#q_PerformanceDetailsByTemp.RecordCount#" to="1" step="-1">
                    <series index="#Evaluate(sPerfCtr)#">
                        <paint color="###q_PerformanceDetailsByTemp.ChartColor[i]#"/>
                    </series>
                    <cfset sPerfCtr = sPerfCtr+1>
                </cfloop>
            </elements>
            <table>
                <decoration style="Shadow"/>
            </table>
            <background maxColor="white"/>
            <decoration foreColor="white" backColor="##90FFFF"/>
            <popup showOn="Disabled" isAntialiased="true"/>
            <paint palette="Transluent" paint="Plain" max="52"/>
        </frameChart>
    </cfoutput>
</cfsaveContent>
<cfsavecontent variable="chartModel">
    <cfoutput>
        <?xml version="1.0" encoding="UTF-8"?>
        <XML type="default">
            <COL>Fall</COL>
            <COL>Winter</COL>
            <COL>Spring</COL>
            <cfset over100FallFixed = false>
            <cfset over100WinterFixed = false>
            <cfset over100SpringFixed = false>
            <cfloop index="i" from="#ArrayLen(PerfStats)#" to="1" step="-1">
                <cfset rowVal = Evaluate((1/q_PerformanceDetailsByTemp.recordCount)*100)>
                <cfif isDefined("over100Alert")>
                    <!--- This set of if statements is to modify value to show triangle correctly --->
                    <!--- Without this modification, the total ia 100.1 which cuts off the top of the triangle --->
                    <cfif right(PerfStats[i].FallPercentage, 1) GT 0 AND NOT over100FallFixed>
                        <cfset PerfStats[i].FallPercentage = PerfStats[i].FallPercentage - .1>
                    </cfif>
                    <cfif right(PerfStats[i].WinterPercentage, 1) GT 0 AND NOT over100WinterFixed>
                        <cfset PerfStats[i].WinterPercentage = PerfStats[i].WinterPercentage - .1>
                    </cfif>
                    <cfif right(PerfStats[i].SpringPercentage, 1) GT 0 AND NOT over100SpringFixed>
                        <cfset PerfStats[i].SpringPercentage = PerfStats[i].SpringPercentage - .1>
                    </cfif>
                    <ROW col0="#PerfStats[i].FallPercentage#" col1="#PerfStats[i].WinterPercentage#" col2="#PerfStats[i].SpringPercentage#">% #PerfStats[i].Name#</ROW>
                <cfelse>
                    <ROW col0="#round(PerfStats[i].FallPercentage)#" col1="#round(PerfStats[i].WinterPercentage)#" col2="#round(PerfStats[i].SpringPercentage)#">% #PerfStats[i].Name#</ROW>
                </cfif>
            </cfloop>
        </XML>
    </cfoutput>
</cfsavecontent>
<cfscript>
    ImageName = "TierTrans_" & CreateUUID() & ".png";
    oMyWebChart = createObject("Java","com.gp.api.jsp.MxServerComponent");
    oMyApp = getPageContext().getServletContext();
    oSvr = oMyWebChart.getDefaultInstance(oMyApp);
    oMyChart2 = oSvr.newImageSpec();
    if(NOT Session.PDFIng)
    {
        oMyChart2.width = 650;
    } else
    {
        oMyChart2.width = 550;
    }
    oMyChart2.height= 230;
    oMyChart2.type = "png";
    oMyChart2.style = "#chartStyle#";
    oMyChart2.model = "#chartModel#";
</cfscript>
<cfif NOT DirectoryExists(ImagesDir)>
    <CFDIRECTORY ACTION="CREATE" DIRECTORY="#ImagesDir#">
</cfif>

<!--- Save image to a different location --->
<cfset oSvr.saveBytesTo(oMyChart2,"#ImagesDir##ImageName#")>

<cfoutput><img src="Images/Reports/#ImageName#" border="0"/></cfoutput>

It used to draw a chart something like the image below. (The watermark you see is because I copied the wc50.jar from ColdFusion 10 directory to ColdFusion 11 lib directory):

Screenshot of old chart

0

There are 0 answers