jsoncoldfusioncoldfusion-11cfchart

Presence of single or double quotes in SERIESLABEL or ITEMLABEL giving error in CFCHART

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.

Solution

  • 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]#">