CODEWITHSUNDEEP
highchartscoldfusion
spacerobot
spacerobot

Reputation: 297

Highcharts dynamic name with coldfusion

I am using Highcharts to display a pie chart. I am trying to output a coldfusion query that has two fields. A classification name and a count. I am struggling to have the name display. When I hard the name as something like 'Classification' it works and builds the chart based on the counts. If I add the #classification# variable to the name it does not display anything.

Here is what I am trying that produces no results.

series: [{
    name: 'Classification',
    colorByPoint: true,
    data: [
    <cfoutput query="qryCounts">
    {
        name: #classification#,
        y: #count#
    },
    </cfoutput>
  ]
}]

This is what works, but displays the same name for every classification.

series: [{
        name: 'Classification',
        colorByPoint: true,
        data: [
        <cfoutput query="qryCounts">
        {
            name: 'Classification',
            y: #count#
        },
        </cfoutput>
      ]
    }]

Any ideas on what I am doing wrong?

Upvotes: 0

Views: 118

Answers (1)

AndreasRu
AndreasRu

Reputation: 1138

Always try using encodeForJavascript() whenever you output a cfml variable as direct Javascript code.

That will ensure that:

  • strings are properly escaped, so your Javascript won't break (e.g. when an apostrophe, backslashes , linebreaks or other special characters are inside your string)
  • your application gets safer against XSS attacks

For detecting such Javascript erros created by non-escaped variables, look at your console output in your browsers web development tool (as already mentioned by one of the commenters). There you'll see the code and the string that is breaking the Javascript with an exception.

Also, if you are injecting Javascript into an html attribute, such as 'onClick' you better also encode using encodeForHTMLAttribute() , for example:

<cfsavecontent variable="alertText">
 "This text has linebreaks,
slashes like / or \ and apostrophes ' that
would break any javascript code on output" but also german umlaute lke ä or ö or ü
</cfsavecontent>
<cfoutput>

    <button onClick="alert('#encodeForHTMLAttribute( encodeForJavascript( alertText ) )#');">Working click me</button>

    <button onClick="alert('#alertText#');">Broken click me</button>

</cfoutput>

Upvotes: 2

Related Questions