Serializing Query data for chartjs/highcharts

<script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>

<!--- Convert the entire query to an array  Function--->
<cffunction name="queryToArray" access="private" returntype="array" output="false">
        <cfargument name="q" type="query" required="yes" />
        <cfargument name="cb" type="any" required="no" />
        <cfscript>
            var local = {};
            if (structKeyExists(server, "railo")) {
                local.Columns = listToArray(arguments.q.getColumnList(false));
            }
            else {
                local.Columns = arguments.q.getMetaData().getColumnLabels();
            }
            local.QueryArray = ArrayNew(1);
            for (local.RowIndex = 1; local.RowIndex <= arguments.q.RecordCount; local.RowIndex++){
                local.Row = {};
                local.numCols = ArrayLen( local.Columns );
                for (local.ColumnIndex = 1; local.ColumnIndex <= local.numCols; local.ColumnIndex++){
                    local.ColumnName = local.Columns[ local.ColumnIndex ];
                    if( local.ColumnName NEQ "" ) {
                        local.Row[ local.ColumnName ] = arguments.q[ local.ColumnName ][ local.RowIndex ];
                    }
                }
                if ( structKeyExists( arguments, "cb" ) ) {
                    local.Row = cb( local.Row );
                }
                ArrayAppend( local.QueryArray, local.Row );
            }
            return( local.QueryArray );
        </cfscript>
    </cffunction>


  <cfquery name="event_details" dataSource="db9">
                    SELECT nCompetitor as competitor_name, nEvent as event_name, nClass as class_name, nScore as score, nDate as competition_date, nSingle, nTriple, nDouble, nKey
                    FROM nDataAll
                    WHERE nCompetitorID = <cfqueryparam cfsqltype="cf_sql_integer" value="1" />
                    ORDER BY nDate DESC
                </cfquery>


<!--- Convert the entire query to an array of structures --->
<cfset arrEventdetArray = queryToArray( event_details ) />
<!---Show Array --->
<cfdump var="#arrEventdetArray#">

 <cfset arrEventDetails = serializeJSON( queryToArray( event_details ) ) />
<cfdump var="#arrEventdetails#">


<!--- <cfset cats = []>
<cfset data = []>
<cfloop query="event_details">


<cfset arrayAppend(cats, competitor_name)>
<cfset arrayAppend(data, score)>
</cfloop>
 --->


<!---   <cfset arrayAppend(cats, media)>
<cfset arrayAppend(data, total)> --->


<body>
    <cfoutput>
<script>

var barChartData1 = new Array(ListQualify(ArrayToList(arrEventDetails), '"'));

    // var barChartData1 = {
    //      labels : ["January","February","March","April","May","June","July"],
    //      datasets : [
    //          {
    //              fillColor : "rgba(220,220,220,0.5)",
    //              strokeColor : "rgba(220,220,220,1)",
    //              data : [65,59,90,81,56,55,40]
    //          },
    //          {
    //              fillColor : "rgba(151,187,205,0.5)",
    //              strokeColor : "rgba(151,187,205,1)",
    //              data : [28,48,40,19,96,27,100]
    //          }
    //      ]

    //  }


</script>
</cfoutput>

<!---[142.4,138.7,138.2,140.8,151.8,140.7,142.0,145.7,151.9,145.8,151.9,142.4,146.5,143.1,152.1,151.6,148.8,152.5,149.1,138.8,142.7,147.0,144.5,141.5,142.5,143.5,143.7,139.9,140.4,142.9,141.8,144.7,141.1,143.1]---->
<div id="chart-container-1" style="width: 400px; height: 400px"></div>

</body>


</html>