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.

Is your query returning data? Also, you have specified the "flash" format. Do you have Flash installed/functioning? — Miguel-F, Jul 01 '13 at 19:05
yes, My query returning data and also i have flash on my system. — Suleman khan, Jul 01 '13 at 19:16
Are `rc.data.totaltruefalse.totaltrue` and `rc.data.totaltruefalse.totalfalse` single values? — Miguel-F, Jul 01 '13 at 19:46

Miguel-F · Answer 1 · 2013-07-01T20:38:36.557

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:

Exactly I am getting this when i view its source. I have make changes in .htaccess file still it doesn't resolved my issue. I have added this lines in .htaccess RewriteCond%{REQUEST_URI} !/CFIDE/GraphData.cfm[NC] RewriteRule/CFIDE/ /bog/off/mate.html[NC,L]. — Suleman khan, Jul 01 '13 at 21:29
it is successfully generating graphs i can see it in charting/cache but the problem is, it is not rendering on browsers. — Suleman khan, Jul 01 '13 at 21:34
There was another file you need to modify as well. Did you do that too and restart CF service? (I can't get to link right now.) — Miguel-F, Jul 02 '13 at 01:00
which file I have to Modify? yes I have restarted my CF server after modification. — Suleman khan, Jul 02 '13 at 09:18
Let's back up a minute. Were you able to browse to `http://yourserver.com/CFIDE/GraphData.cfm`? This should work in a default installation. It will only not work if you have made changes to disallow that URI (done for security). If you followed the ColdFusion lockdown guide it may be blocked. By "work" I don't mean a graph will display. So, what response do you get when browsing to that URI? — Miguel-F, Jul 02 '13 at 12:42
Then this may not apply to you. If the `CFIDE` directory is being blocked you would get a 404, 403, or some such error. However, you did add a rewrite rule. Is that rule still in place? If so, remove that rule that you added and try to browse the URL again. What response do you get? — Miguel-F, Jul 02 '13 at 15:08
when i removed it, it is showing this warning "You don't have permission to access /CFIDE/GraphData.cfm on this server." — Suleman khan, Jul 02 '13 at 15:25
Okay, so it is indeed blocked for you. If my other answer works for you I would just use that instead of messing with other configuration changes. — Miguel-F, Jul 02 '13 at 15:28

Miguel-F · Accepted Answer · 2013-07-02T13:30:29.170

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).

this is really helpful it is generating charts in my images folder successfully but to view this chart i have to manually access it in that folder by double clicking it. I really appreciate that you make me learn something thanks. — Suleman khan, Jul 02 '13 at 15:12

cfchart displaying white spaces

2 Answers2