Databases
StackOverflow2013
Postsdbo
POcreating dynamic charts using google charts, mysql, and php
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcreating dynamic charts using google charts, mysql, and php
    text
    copied!<p>I need some help. I want to create a dynamic line chart using Google's chart api and data obtained via MySql. I'm using PHP to create the pages. I was able to create a simple chart with hard-coded values no problem. Now I am trying to use some MySql data instead, but with no luck. My webpage looks like this:</p> <pre><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "graphData.php", dataType:"json", async: false }).responseText; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); var options = {'title':'Ticket Sales', 'width':500, 'height':400}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data,options); } &lt;/script&gt; &lt;? PrintHeader($buf,$username,$userid,$session); echo("&lt;div id='chart_div'&gt;&lt;/div&gt;"); ?&gt; &lt;/html&gt; </code></pre> <p>Then my graphData.php page looks like this:</p> <pre><code>$sql = "SELECT MONTHNAME(DATE_SOLD), COUNT(*) FROM TICKET_SALES WHERE YEAR(DATE_SOLD) = 2012 GROUP BY MONTHNAME(DATE_SOLD) ORDER BY MONTH(DATE_SOLD);"; $result = mysql_query($sql, $conn) or die(mysql_error()); //start the json data in the format Google Chart js/API expects to recieve it $JSONdata = "{ \"cols\": [ {\"label\":\"Month\",\"type\":\"string\"}, {\"label\":\"Ticket Sales\",\"type\":\"number\"} ], \"rows\": ["; //loop through the db query result set and put into the chart cell values while($row = mysql_fetch_row($result)) { $JSONdata .= "{\"c\":[{\"v\": " . $row[0] . "}, {\"v\": " . $row[1] ."}]},"; } //end the json data/object literal with the correct syntax $JSONdata .= "]}"; echo $JSONdata; ?&gt; </code></pre> <p>When I load the page in my browser I just get a red box that says "Table has no columns." Can anyone tell me what I am doing wrong? Or perhaps a better/easier method? Any help would be greatly appreciated!!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload