4

I'm using CF Pie chart for one of my application. But it is working weird. The following code is the chart code and it is giving an error. It doesn't even display the chart. I know that, it is due to the presence of double quotes in the value of query column, col1.

<cfoutput>
    <script type="text/javascript">
        function Navigate(test){
            alert(test);
        }
    </script>

<cfset testquery = queryNew("col1,Col2", "varchar,varchar") >
<cfset queryAddRow(testquery, 1)>
<cfset querySetCell(testquery, "col1", 'This is the "first" row') >
<cfset querySetCell(testquery, "Col2", 5000) >
<cfset queryAddRow(testquery, 1)>
<cfset querySetCell(testquery, "col1", 'This is the second row') >
<cfset querySetCell(testquery, "Col2", 2500) >
<cfset queryAddRow(testquery, 1)>
<cfset querySetCell(testquery, "col1", 'This is the third row') >
<cfset querySetCell(testquery, "Col2", 8500) >

    <CFCHART Format="Html"  CHARTWIDTH="600" CHARTHEIGHT="650" TITLE="Pie Chart in CF11" URL="javascript:Navigate('$SERIESLABEL$')">
        <CFCHARTSERIES TYPE="pie" COLORLIST="##CA5940,##6FCF42,##4286CF" >
        <CFLOOP FROM="1" TO="#testquery.RecordCount#" INDEx="i">
            <CFCHARTDATA ITEM="#testquery.col1[i]#" VALUE="#testquery.Col2[i]#">
        </CFLOOP>
        </CFCHARTSERIES>
    </CFCHART>
</cfoutput>

enter image description here

I've checked the chart's JSON in the viewsource, it is fine. But code giving the above error. So not sure why it is giving error. Without double quotes the code is working as expected, but I need the double quotes, it'll impact the application, if I remove the same.

I also tried by replacing the double quotes to single quotes, in that case, the chart is displaying, but if we click on the first row area, it is giving the same error in console.

enter image description here

So using quotes is the major problem here. But I need the above code to display the chart and while clicking on the area, it should show the corresponding label as it is.

I'm not sure I've missed something, or else anything wrong in the code.

Rajesh Manilal
  • 1,104
  • 9
  • 20

1 Answers1

4

Have you tried escaping the quotes within your JSON string?

Like this for example:

<cfset querySetCell(testquery, "col1", 'This is the \"first\" row') >

I created a gist of your sample code on trycf.com and it seems to work

http://trycf.com/gist/e3321edb3481411078b75ad187cae52b/acf11?theme=monokai

I also tried that exact same code on one of our ColdFusion 11 servers and it works fine too. So are you saying your sample code is not working or are you saying your actual code is still not working? If it is your actual code then there must be something else at play that is not shown in your example. If your data is coming from a database then you need to be sure that those characters are being escaped correctly at the point that ColdFusion is parsing it.

Now that you see how the character needs to be escaped you can use ScottJibben suggestion from the comments and just call JSStringFormat() to escape these characters for you.

<CFCHARTDATA ITEM="#JSStringFormat(testquery.col1[i])#" VALUE="#testquery.Col2[i]#">
Miguel-F
  • 13,450
  • 6
  • 38
  • 63
  • It worked when I tried it on trycf.com using your sample. I will add a gist to the answer. – Miguel-F Jan 26 '17 at 20:50
  • 1
    Wouldn't it be simpler to use JSStringFormat() instead of manually escaping strings? – Scott Jibben Jan 27 '17 at 00:53
  • 1
    Would this work? – Scott Jibben Jan 27 '17 at 00:56
  • @Miguel-F You won't believe, I've tried this escape character, but it not worked yesterday. I'm wondering it is working now. Anyway thank you :) – Rajesh Manilal Jan 27 '17 at 05:43
  • @ScottJibben The same, even I've tried with JSStringFormat too. But now only these fixes are working. Hope it might be some server cache issue yesterday I think. Anyway thanks a lot guys. – Rajesh Manilal Jan 27 '17 at 05:44
  • 1
    @ScottJibben yes that is easier but I was trying to point out that the character just needed to be escaped to work properly. That is better shown by seeing the actual escape sequence versus a function call. I will add your suggestion to my answer so that others will see it. Thanks. – Miguel-F Jan 27 '17 at 11:39