cfchart displaying white spaces

Question

I am counting response of a specific question and wants to display its response count through charts. I am using this code for counting response.

<cfquery name="questions">
                        SELECT
                              questions.id,
                              questions.question as question,
                              questiontypes.name as questiontype,
                              questiontypes.template as template,
                              surveys.name as surveysname
                        FROM
                              questions
                        LEFT JOIN answers ON questions.id = answers.fkquestionid
                        INNER JOIN questiontypes ON questions.fkquestiontypeid = questiontypes.id
                        INNER JOIN surveys ON questions.fksurveyid = surveys.id 
                        WHERE fksurveyid = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.surveyid#">
             </cfquery>
             <cfset response.question = questions> 

              <cfloop query="questions">
                   <cfswitch expression ="#questions.template#"> 
                       <cfcase value="truefalse"> 
                           <cfquery name="gettotaltruefalse">
                                 SELECT COUNT( IF(result.truefalse = 1,1,NULL )) AS totaltrue, 
                                        COUNT( IF(result.truefalse = 0,0,NULL )) AS totalfalse, 
                                        COUNT( IF(result.truefalse = 1,1,NULL ))/COUNT(0)*100 AS trueperc,
                                        COUNT( IF(result.truefalse = 0,0,NULL ))/COUNT(0)*100 AS falseperc
                                FROM results result
                                WHERE fkquestionid = <cfqueryparam cfsqltype="cf_sql_integer" value="#questions.id#">
                                AND NOT ISNULL(result.truefalse)
                                GROUP BY result.fkquestionid
                           </cfquery>
                           <cfset response.totaltruefalse = gettotaltruefalse>
                        </cfcase> 

I am using this code to display charts.

<cfoutput query="rc.data.questions" group="id">
    <cfchart format="flash" chartwidth="575" chartheight="575" show3d="yes">
                                       <cfchartseries type="pie" paintstyle="raise" seriescolor="blue" datalabelstyle="pattern">
                                           <cfchartdata item="true" value="#rc.data.totaltruefalse.totaltrue#">
                                           <cfchartdata item="false" value="#rc.data.totaltruefalse.totalfalse#">
                                       </cfchartseries> 
                        </cfchart>
</cfoutput>

my problem is, it is showing white space instead of chart even i have tried this in all browsers.

Answer 1

My other answer has to do with server configuration settings based on if you have blocked access to the CFIDE directory. Another approach would be to bypass that behavior by saving the generated chart yourself (a flash file .SWF) to the web server and then displaying that file instead.

It's really easy with ColdFusion. Just add the name attribute to your <cfchart> tag. This will tell ColdFusion to store the binary chart data into the variable named with that attribute. Like this:

<cfchart format="flash" name="chartname" chartwidth="575" chartheight="575" show3d="yes">
    <cfchartseries type="pie" paintstyle="raise" seriescolor="blue" datalabelstyle="pattern">
        <cfchartdata item="true" value="#rc.data.totaltruefalse.totaltrue#">
        <cfchartdata item="false" value="#rc.data.totaltruefalse.totalfalse#">
    </cfchartseries> 
</cfchart>

In that code I have named the variable chartname. Next, write the data to a file with a .SWF extension. You need to write this file to a browsable directory on your server (like an images folder or some such). Like this:

<cffile action="write" file="C:\webroot\images\mychart.swf" output="#chartname#" />

In that code I wrote the file mychart.swf to the C:\webroot\images\ folder. It can be any directory you wish as long as it is accessible under your web root. The output attribute must match the variable name given in the <cfchart> tag's name attribute and must be within #.

Next, include that SWF file in your HTML code. Like this:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,2,0"
    WIDTH="575" HEIGHT="575">
    <PARAM NAME="movie" VALUE="/images/mychart.swf"/>
    <PARAM NAME="quality" VALUE="high"/>
    <PARAM NAME="bgcolor" VALUE="#FFFFFF"/>
    <EMBED src="/images/mychart.swf" 
        quality="high" bgcolor="#FFFFFF" WIDTH="575" HEIGHT="575" TYPE="application/x-shockwave-flash"
        PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
    </EMBED>
</OBJECT>

In that code the value attribute of the <param> tag and the src attribute of the <embed> tag must match the location of the written .SWF file above (the images folder in this example).

Answer 2

I am guessing it has to do with setup/security on your ColdFusion server. Can you navigate to http://yourserver.com/CFIDE/GraphData.cfm (replace yourserver.com with your domain)? In order for <cfchart> to work it needs access to the CFIDE directory (NOTE - that file does not actually exist. It is merely an alias for the ColdFusion charting).

It also needs access to the CFIDE/scripts directory and the CF_RunActiveContent.js JavaScript file found there.

If you view the source of your generated page (with the blank chart) you will see something like:

<html>
    <head><title>Test</title></head>
    <body>
    <div>

    <NOSCRIPT>
    <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  
        codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,2,0"
        ID="Images_5281548670100005_SWF" name="Images_5281548670100005_SWF" WIDTH="575" HEIGHT="575">
        <PARAM NAME="movie" VALUE="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/5281548670100005.SWF"/>
        <PARAM NAME="quality" VALUE="high"/>
        <PARAM NAME="bgcolor" VALUE="#FFFFFF"/>
    <EMBED src="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/5281548670100005.SWF" 
        quality="high" bgcolor="#FFFFFF" WIDTH="575" HEIGHT="575" TYPE="application/x-shockwave-flash"
        PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
    </EMBED>
    </OBJECT>
    </NOSCRIPT>
    <script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/CF_RunActiveContent.js'></script>
    <script type="text/javascript" charset='utf-8'>
    CF_RunContent('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  \r\n codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,2,0"\r\n ID="Images_5281548670100005_SWF" name="Images_5281548670100005_SWF" WIDTH="575" HEIGHT="575">\r\n\t<PARAM NAME="movie" VALUE="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/5281548670100005.SWF"/>\r\n\t<PARAM NAME="quality" VALUE="high"/>\r\n\t<PARAM NAME="bgcolor" VALUE="#FFFFFF"/>\r\n<EMBED src="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/5281548670100005.SWF" \r\n\t\tquality="high" bgcolor="#FFFFFF" WIDTH="575" HEIGHT="575" TYPE="application/x-shockwave-flash"\r\n PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">\r\n</EMBED>\r\n</OBJECT>');
    </script>

    </div>
    </body>
</html>

Notice the references to the CFIDE directory. If that directory is not accessible the <cfchart> tag will not work correctly (you will get a blank chart).

Two relevant discussions about this with potential work arounds:

• On the Adobe forums

• By Brandon Purcell