Question

Im trying to using Google Area Chart and PHP to display some data. problem is i just cant get it to work. if anyone can help it will be most appriciated.

Here is my code:

<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 = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'hits');
        data.addRows([
        <?php
$query = mysql_query("SELECT * FROM hits WHERE url='$url' GROUP BY date");
 while ($row = mysql_fetch_array($query)){
$hits=mysql_num_rows($query);
$date=$row['date'];?>
 ['<?php echo "$date";?>', <?php echo ".$hits.";?>],
<?php } ?>
]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                          hAxis: {title: 'Date', titleTextStyle: {color: '#FF0000'}}
                         });
      }
    </script>

    <div id="chart_div"></div>

Answer 1

I would definitely suggest separating your PHP (server side) code from your JavaScript/html (client side) code.

The nice thing about the Google chart and graph APIs is there are several examples one can draw from, but it becomes much harder to reproduce something you’re viewing when you embed PHP with MySQL queries within the blocks that contain your JavaScript and UI elements.

The following is a rough example of how you “might” go about dividing these things. In reality you would want your server side code (PHP in your case) in a totally separate file from your display/user interface code (HTML and JavaScript).

The ‘DATE’ and ‘HITS’ in the “Front end code” block are not actually variables or values, I’m simply indicating this is where you would input your values. Ideally you would pass the data from your MySQL query through the PHP server code to the JavaScript code, and then iterate through it there to build your graph. The passing things back and forth from PHP to JS can be done nicely using the JSON data interchange format. Both PHP and JavaScript (jQuery) have functions for encoding and decoding to/from JSON.

Front End Code:

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('number', 'hits');
    data.addRows(
       ['DATE', 'HITS']
    );

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                      hAxis: {title: 'Date', titleTextStyle: {color: '#FF0000'}}
                     });
  }
</script>

<div id="chart_div"></div>

Back End Code:

<?php
$query = mysql_query("SELECT * FROM hits WHERE url='$url' GROUP BY date");
$data_to_return = array();
while ($row = mysql_fetch_array($query))
{
    $hits=mysql_num_rows($query);
    $date=$row['date'];
    $data_to_return[$date] = $hits; //building array of date=>hits data
}
$data_to_send_to_front_end = json_encode($data_to_return); //ridiculous variable name
?>