Untitled

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

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

    </head>

    <body>
        <canvas id="canvas" height="450" width="600"></canvas>

<!--- 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 myList = ValueList(event_details.event_name,',')>
<!--Dumping valulist to see what it looks like-->
<cfdump var="#myList#">
    <script>

        var barChartData1 = {
    labels: [<cfoutput>"#myList#"</cfoutput>]
    ,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
};


    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData1);

    </script>

<!--- Salted hell you could valuelist it. valuelist(myQuery.labelColumn), valuelist(myQuery.datacolumn), then just spit them out in the js. labels : [<cfoutput>#labellist#</cfoutput], etc.  --->

<!---My attempt to loop and make and avoid JSON --->

    </body>
</html>