Search code examples
javascripthtmlcoldfusiongoogle-visualizationcoldfusion-8

Why is my Google Line Chart not displaying lines?

I am looping through a datasource to grab data. The chart displays with the legend I want and the correct x and y axis but the lines do not display. Any thoughts on to why this is? Source code below:

        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <cfoutput>
            <script type="text/javascript">
                google.load("visualization", "1", {packages:["corechart"]});
                google.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = google.visualization.arrayToDataTable ([
                        ['Date Worked',<cfloop query="name"> '#name#',</cfloop>],
                        <cfloop from="2012-12-18" to="2012-12-18" index="i">
                            <cfquery name="test" datasource="TrackPorter">
                                select  name, COALESCE(date_worked,'2012-12-18')date_worked, COALESCE(hours_worked,0)hours_worked 
                                from users 
                                left join records on  users.id = records.users_id and date_worked = '2012-12-18'
                                where active_pilot = 1 
                                order by date_worked asc 
                            </cfquery>
                            ['#test.date_worked#', #Valuelist(test.hours_worked)#]
                        </cfloop>
                    ]);

                    var options = {
                        title: 'Test'
                    };

                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, options);
                }
            </script>
        </cfoutput>
    <div id="chart_div" style="width: 900px; height: 500px;"></div

Here is the view source:

Here is the view source:




<html>
    <div class="container" align="center">
        <h1>Pilot Timesheet</h1>
            <a href="excel_sheet_downloader.cfm"><button class="btn"       type="button" name="download_pilot_report">Download</button></a>
      <br />
      <br />
    <h1>Grapher</h1>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable ([
                    ['Date Worked', 'Keegan', 'Brady', 'Isaac', 'Christoph', 'Tyler',],

                        ['2012-12-18', 0.0,0.0,0.0,5.5,0.0]

                ]);

                var options = {
                    title: 'Test'
                };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
            }
        </script>

    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</div> <!-- /container -->

Solution

  • Your output needs to be in a format of

    var data = google.visualization.arrayToDataTable ([
 ['Date Worked','2012-12-18'],
 ['Keegan',0],
 ['Brady',0],
 ['Isaac',0],
 ['Christoph',5.5],
 ['Tyler',0]
]);

    You'll have to rework your output to correctly format the JavaScript

    This isn't tested or complete, but this should help get you on the right track of output

    var data = google.visualization.arrayToDataTable ([
 ['Date Worked',
 <cfset count = 0>
 <cfloop from="2012-12-18" to="2012-12-18" index="i">'#i#'<cfif count NEQ numberofloopsneeded (you need to calculate this)>,</cfif><cfset count++></cfloop>],
 <cfloop from="2012-12-18" to="2012-12-18" index="i">
   <cfquery name="test" datasource="TrackPorter">
   select  name, COALESCE(date_worked,'2012-12-18')date_worked, COALESCE(hours_worked,0)hours_worked 
   from users 
   left join records on  users.id = records.users_id and date_worked = '2012-12-18'
   where active_pilot = 1 
   order by date_worked asc 
   </cfquery>
   <cfloop query="test">
    ['#test.name[test.currentrow]#', #test.hours_works[test.currentrow]#]<cfif not thefinaloutput>,</cfif>
   </cfloop>        
 </cfloop>
]);