CF Chart - Using WebChart Dial Style?

Report · Jul 25, 2011

Using ColdFusion 7 on Windows Server 2003.

Is there a way to implement Webchart 5.0 Dial chart (template ..\charting\gallery\a-combo-3D\combo-d.wcp) through ColdFusion?

There is no ColdFusion chart type="Dial". But can Webchart style sheet (in XML Style tab) along with JSP coding (in Code View tab) be embedded to drive a dial chart graphic output in Coldfusion page?

Report · Jul 25, 2011

You need to tap into the webcharts engine. Here is a CF8 example

http://www.coldfusionjedi.com/index.cfm/2008/1/18/Coolest-CFCHART-Trick-Ever

Report · Jul 26, 2011

Webcharts 5.0 has <dialChart> rather than <gauge> object in its wcp XML file structure. Does the referenced ColdFusionJedi design work with <dialChart>?

There is a gauge documented in version 5.2. Or is a <gauge> object in 5.0 release that I am not seeing?

Report · Jul 26, 2011

No "gauge" chart in 5.0 that I can see. I was referring to the two styles of dialCharts. One is similar in appearance to "gauge". I think that is the best you can do with 5.0.

Does the referenced ColdFusionJedi design work with
<dialChart>?

The overall code should work. But give it a whirl and see.

Report · Jul 27, 2011

In trying out the design, function 'fileread()' does not exist with ColdFusion 7. Used equivalent (?) method (<cffile action="read" variable="sChartStyle") for pulling in the entire WCP text file into a ColdFusion variable. Also changed IP to local site IP.

Running program results in two output references. The first is the texualized presentation of the HTML image output (<IMG SRC="http://... etc). The second is the HTML image defintion (<IMG SRC="http://xxx.xx.xx.xx/CFIDE/GraphData.cfm?graphCache=wc50&... etc), but no image is given to the browser. Is there an additional ColdFusion or WebChart setting needed? Any assistance with identifying the error is appreciated.

Report · Jul 27, 2011

I took a look and it seems you just need a few tweaks to make it work with dialcharts:

1) Change the tag name from "gauge" to "dialChart"

<cfset iStart = findNoCase("<dialChart",sChartStyle)>
<cfset iEnd = findNoCase("</dialChart>",sChartStyle)>

2) DialCharts use a different XML model. Example:

<cfsavecontent variable="chartModel"><?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<XML type="default">
<COL>2000</COL>
<COL>2001</COL>
<COL>2002</COL>
<COL>2003</COL>
<COL>2004</COL>
<ROW col0="120.0" col1="0.0" col2="100.0" col3="180.0" col4="200.0">Sample 0:</ROW>
</XML></cfsavecontent>

Report · Jul 27, 2011

Here are more details. I am at a loss as how to approach getting the correct display. **Addtional note: running on IIS6 web server.

Previous design above used "dialchart" find string locators and specified a "chartModel" XML as:

Based on ColdFusionJedi article (http://www.coldfusionjedi.com/index.cfm/2008/1/18/Coolest-CFCHART-Trick-Ever) comments (J. Lyle Martin on 9 July 2008, at 11:45 AM; and Raymond Camden on 9 July 2008, at 12:41 PM), played with URL path declarations/substitutions, removing URL domains.

Page now displays the border and legend, but still shows no dial graphic.

Dial as displayed within WebCharts3D:

Current web page display:

Current cfm definiton:

Webchart_Dial_test07.cfm

<cffile action="read" variable="sChartStyle"
file = "D:\directypath...\charts\Webchart_Dial_test00.wcp" >


<cfset iStart = findNoCase("<dialChart",sChartStyle)>
<cfset iEnd = findNoCase("</dialChart>",sChartStyle)>
<cfsavecontent variable="chartStyle">
<cfoutput><?xml version="1.0" encoding="UTF-8"?>
#mid(sChartStyle,iStart,iEnd-iStart+13)#
</cfoutput>
</cfsavecontent>
<cfsavecontent variable="chartModel"><?xml version="1.0" encoding="UTF-8"?>
<XML type="default">
<COL>Area1</COL>
<COL>Area2</COL>
<COL>Area3</COL>
<ROW col0="30.0" col1="50.0" col2="100.0">Set0:</ROW>
<ROW col0="100.0" col1="80.0" col2="20.0">Set2:</ROW>
</XML>
</cfsavecontent>

<cfscript>
oMyWebChart = createObject("Java","com.gp.api.jsp.MxServerComponent");
oMyApp = getPageContext().getServletContext();
oSvr = oMyWebChart.getDefaultInstance(oMyApp);
oMyChart2 = oSvr.newImageSpec();
oMyChart2.width = 375;
oMyChart2.height= 375;
oMyChart2.type = "png";
oMyChart2.style = "#chartStyle#";
oMyChart2.model = "#chartModel#";
</cfscript>

<cfsavecontent variable="chartImgTag">
<cfoutput>#oSvr.getImageTag(oMyChart2,"/CFIDE/GraphData.cfm?graphCache=wc50&graphID=")#</cfoutput>
</cfsavecontent>

<cfset chartImgTag = replace(chartImgTag,"/Images/","/","All")>

<cfoutput>
<p>
#chartimgtag#
</cfoutput>

WebCharts3D system generated wcp definiton used to present "dial" shown in earlier graphic:

Webchart_Dial_test00.wcp

<?xml version="1.0" encoding="UTF-8"?>
<project width="483" height="414" xmlStyleFilename="" embedStyles="true"
imageType="swf" palette="#FDFEF6" xmlModelFilename="" source="Embedded Xml"
annotation="">
<style>
   <dialChart dial="Dial180" minorTicksVisible="true" inside="#CCCCCC" hand="#666666"
    is3D="true" isTransposed="false" seriesTitle="" font="Arial-11"
    foreground="black" isMultiline="false">
    <axis type="Scale" isVisible="true" drawLine="true" isAbsolute="true"
     scaleMin="" scaleMax="" labelCount="0" isReversed="false"
     isBucketed="true" isAntialiased="false">
     <labelFormat style="Number" pattern="#,##0.###">
      <locale/>
     </labelFormat>
     <parseFormat style="None" pattern="#,##0.###">
      <locale/>
     </parseFormat>
     <dateTimeStyle majorUnit="Day" majorStep="1" minorUnit="Day" minorStep="1"/>
     <logStyle type="IncludeEven" base="10"/>
     <labelStyle isMultiline="true" isMultilevel="false" isHideOverlapped="false" orientation="Horizontal"/>
     <titleStyle isVisible="true" margin="0" font="Arial-14-bold" isMultiline="true">
     </titleStyle>
    </axis>
    <handStyle isInside="false" size="6" type="ThickArrow" shadowOffset="4"/>
    <knobStyle color="#CCCCCC" size="12" type="Gradient" shadowOffset="8"/>
    <dialStyle labelStyle="Outside" majorTickStyle="Diamong" majorTickSize="0" minorTickStyle="Rectangle"
     minorTickSize="0" minorTicksPlacement="Outer" dialSize="150" majorTickLength="25"
     minorTickLength="10" showDialLabels="true" isAxisInside="false" fillColor="white">
     <outerBorder size="25" fillColor="white" isGradient="true" min="30"
      max="50"/>
     <innerBorder size="2" fillColor="#999999" isGradient="false" min="30"
      max="40"/>
    </dialStyle>
    <dataLabels style="Value" placement="Inside" extraLines="0" autoControl="false"
     background="#00000000" isAntialiased="false" font="Arial-12" isMultiline="false">
     <decoration style="None" foreColor="black"/>
    <![CDATA[
$(colLabel) $(value)\n$(colPercent) of $(colTotal)
    ]]>
    </dataLabels>
    <legend spacing="5" allowSpan="false" equalCols="true" isVisible="true"
     showColumnLegend="true" placement="Top" valign="Middle" halign="Center"
     useMarkers="false" background="#00000000" isAntialiased="false" isMultiline="true">
     <decoration style="Shadow" foreColor="black"/>
    </legend>
    <elements action="" target="" place="Clustered" shape="Pyramid"
     outline="black" markerSize="8" shapeSize="300" lineWidth="4"
     drawOutline="false" drawShadow="true" showMarkers="true" fixedWidth="5">
     <movie framesPerSecond="16" frameCount="25" stageDelay="0" replayDelay="-1"/>
     <morph morph="Blur" stage="None"/>
     <series index="1" isSecondAxis="false" forceBreak="false">
      <morph/>
      <marker type="Rectangle" bitmap="marker.gif"/>
      <paint image=""/>
      <dataLabel>
      </dataLabel>
     </series>
    </elements>
    <table isVisible="false" placement="Left" isTransposed="false" cellSpacing="0"
     cellPadding="4" negativeForeground="#FF8000" border="Outer">
     <decoration style="Round" foreColor="black"/>
     <colLabels hAlign="Center" vAlign="Middle" isVisible="true" background="#00000000"
      isAntialiased="false" isMultiline="true">
      <decoration style="None" foreColor="black"/>
     </colLabels>
     <rowLabels hAlign="Left" vAlign="Middle" isVisible="true" background="white"
      isAntialiased="false" isMultiline="true">
      <decoration style="None" foreColor="black"/>
     </rowLabels>
     <cells hAlign="Right" vAlign="Middle" isVisible="true" background="#00000000"
      isAntialiased="false" isMultiline="true">
      <decoration style="None" foreColor="black"/>
     </cells>
     <format style="Number">
      <locale/>
     </format>
     <heatmap isEnabled="false" isAbsolute="true" minColor="red" maxColor="green"
      minLevel="0.0" maxLevel="0.0" bucketCount="0" palette="UseMinMax"
     />
    </table>
    <title placement="Top" valign="Middle" halign="Center" spacing="5"
     background="#00000000" isAntialiased="false" font="Arial-16-bold" isMultiline="true">
     <decoration style="Shadow" foreColor="black"/>
    </title>
    <background type="PlainColor" minColor="white" maxColor="blue" imagePlacement="Centered"
     imageLocation=""/>
    <decoration style="ThinRound" foreColor="black"/>
    <popup showOn="MouseOver" decoration="Simple" background="#80FFFF00" isAntialiased="false"
     foreground="blue" isMultiline="false"/>
    <paint palette="Standard" paint="Shade" isVertical="true" min="26"
     max="60" image=""/>
    <insets left="0" top="25" right="0" bottom="0"/>
   </dialChart>
</style>
<model>
<![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
<XML type="default">
<COL>Area1</COL>
<COL>Area2</COL>
<COL>Area3</COL>
<ROW col0="30.0" col1="50.0" col2="100.0">Set0:</ROW>
<ROW col0="100.0" col1="80.0" col2="20.0">Set2:</ROW>
</XML>
]]>
</model>
<importOptions filename="" sep="," quote="" hasColLabels="false"
   hasRowLabels="false" isCrosstab="false"/>
<databaseOptions driver="sun.jdbc.odbc.JdbcOdbcDriver" connection="jdbc:odbc:..." username="" encryptedPassword=""
   isCrosstab="false" hasRowLabels="false">
</databaseOptions>
</project>

Report · Jul 27, 2011

> <dialChart dial="Dial180"

Was your WCP file generated with the MX7 version of webcharts?

Did you try it with the default settings first? Those worked fine for me. Start with the vanilla chart. If it is successful, add in one customization at a time until it breaks.

Message was edited by: -==cfSearching==-

Report · Jul 27, 2011

Page now displays the border and legend, but still shows no dial graphic.

You are going to laugh. I think it is because the width/height are too small. Increase it to 500x500 and it shows.

Just set the axis minimum to 0, to adjust the needle position and you are all set.

ie <axis scaleMin="0">

Report · Jul 28, 2011

.cfm code:

oMyChart2 = oSvr.newImageSpec();
oMyChart2.width = 500;
oMyChart2.height= 350;
oMyChart2.type = "png";
oMyChart2.type = "swf";
oMyChart2.style = "#chartStyle#";

Thank you so much! Setting width to 500, display now works. (Changing type to "swf" smooths out the dial's visual presentation.)

In wcp file, changed <axis> element attribute from scaleMin="" to scaleMin="0".

Is there a method to dynamically move the needle from zero to the target value (similar to bar graphs' growth from the starting axis)?

Report · Jul 28, 2011

Is there a method to dynamically move the needle from zero
to the target value (similar to bar graphs' growth from the
starting axis)?

At a guess, it seems like the needle value is determined by the first "col0" value in the first "ROW". But I would review their xml schema to be certain.

ie ROW col0="40.0"

Report · Jul 28, 2011

Thanks again. I was lost without your guidance.

Still searching for a technique for ColdFusion/WebChart/SWF to dynamically "spin" (moive / morph ?) the dial. But what's defined does the job.

Here is a preminary dial chart design close to what's needed:

WCP Code (colors)

CFM Code (layout ranges)

<cfsavecontent variable="chartModel"><?xml version="1.0" encoding="UTF-8"?>
<XML type="default">
<COL>Red < 80% completed on time</COL>
<COL>Yellow - 80 to 90% completed on time</COL>
<COL>Green - 90 to 100% completed on time</COL>
<ROW col0="95.0" col1="0.0" col2="100.0">PointerActual(0)MinDialSet(1)MaxDialSet(2)</ROW>
<ROW col0="80.0" col1="10.0" col2="10.0">ColorRange1(0)ColorRange2(1)ColorRange3(2)</ROW>
<!--
The second series of data defines the ranges on the dial. Each value is a
percentage of the dial that will be colored using the corresponding element color. For
example, values 50, 30 and 20 will result in half of the dial being red, 30% green and
20% blue.

If the second row is not specified, the edge of the dial will remain uncolored.
-->
<ROW col0="40.0" col1="80.0" col2="20.0">Set2:</ROW>
</XML>
</cfsavecontent>

Report · Jul 28, 2011

When you say spin, do you just mean set the initial position of the needle to 90 (or some number)?

Report · Jul 29, 2011

"Spin" means using a Flash output medium (<project imageType="swf"...>), setting the Movie/Morph element attributes in WebChart WCP template, and having the dial chart needle start at the base number (0 %), and rotate to the end position (98 of 100 %). Basically this is what happens when bar charts morph from their base axis (zero postion) to their actual value.

Is this dynamic an implementable feature within WebChart's Dial Charts?

Report · Jul 29, 2011

I was afraid that was what you meant Unfortunately, I have no clue about that one.

Report · Jul 29, 2011

First thing this morning the test dial chart page stopped displaying successfully. Page is unchanged from yesterday. The browser is left in a "waiting" state for the image to display.

Example output web page Source Code:

<p>

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
 codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,2,0"
 ID="Images_2883500040100014_swf" name="Images_2883500040100014_swf" WIDTH="430" HEIGHT="320">
     <PARAM NAME="movie" VALUE="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/2883500040100014.swf"/>
     <PARAM NAME="quality" VALUE="high"/>
     <PARAM NAME="bgcolor" VALUE="#FFFFFF"/>
<EMBED src="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/2883500040100014.swf" 
          quality="high" bgcolor="#FFFFFF" WIDTH="430" HEIGHT="320" TYPE="application/x-shockwave-flash"
 PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>

Could this have something to do with WebChart's image directory placement?

Report · Jul 29, 2011

Above problem with image not displaying "solved" (?): Rebooted workstation, Page now displays...

Has anyone implemented WebCharts Dial Chart with a dynamic needle display?

Thanks

Report · Jul 29, 2011

Has anyone implemented WebCharts Dial Chart with a dynamic
needle display?

If you mean morph/spin appearance, it is possible that feature is not implemented. You would probably have better luck asking a webcharts3d user about that though. If they have their own forums, try asking there.

Best of Luck

-Leigh

Report · Jul 29, 2011

I am not sure. If it were not .swf format, I would say check the cache directory and see if you can view it directly in your browser.

ie URL in the object/embed code

/xxxxxxxx/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/2883500040100014.swf

One other remote possibility. I seem to recall something about needing to initializing the webcharts engine once. Try generating a regular cfchart first. Anything, just as long as you use cfchart tags. Then try your dial chart page again. Any difference?

CF Chart - Using WebChart Dial Style?

1 Correct answer

li.media.uploader-dialog.title