[visualization-api] Google Charts with PHP and MySQL: works on local machine, not on remote server

Wed, 26 Feb 2014 15:32:12 -0800 

Dear Collective Wisdom,

The following code to query a MySQL database and display the results as a 
Google Chart works just dandy on my local machine. But when I upload the 
exact same code (logins changed to protect the innocent) to a remote 
server, the div that is supposed to contain the chart is empty. The page 
shows only the raw JSON table on which it is based.

The page is at http://rilm.info/licensing/json.php

Chrome reports "Uncaught SyntaxError: Unexpected token < " on line 17 of 
the code, which (with display line numbers) reads:

var data = new google.visualization.DataTable(<?=$jsonTable?>);


Can anyone see what is preventing the chart from showing? 

Thanks for your help,
Ardal

Here's the code in full:

<?php

 $DB_NAME = '**********';
 $DB_HOST = '127.0.0.1';
 $DB_USER = '**********';
 $DB_PASS = '**********';

$mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);

if (mysqli_connect_errno()) {
  printf("Connect failed: %s\n", mysqli_connect_error());
  exit();
}
$query = "select * from score";

if ($result = $mysqli->query($query)) {
    {
    $rows = array();
    $table = array();
    $table['cols'] = array(
            array('label' => 'Proj_month', 'type' => 'string'),
            array('label' => 'Licenses', 'type' => 'number')
    );

    while ($row = $result->fetch_assoc()) {
            $temp = array();
            $temp[] = array('v' => (string) $row['Proj_month']);
            $temp[] = array('v' => (int) $row['Licenses']);
            $rows[] = array('c' => $temp);
            }
   }
 }

$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi";></script>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js";></script>
 <script type="text/javascript">
 // Load the Visualization API and the piechart package.

 google.load('visualization', '1', {'packages':['corechart']});

 // Set a callback to run when the Google Visualization API is loaded.
 google.setOnLoadCallback(drawChart);

 function drawChart() {

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(<?=$jsonTable?>);
  var options = {
       title: 'My Licenses',
      is3D: 'true',
      width: 800,
    height: 600
    };
  // Instantiate and draw our chart, passing in some options.
  // Do not forget to check your div ID
  var chart = new 
google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {curveType: "function"});

}
</script>
</head>

<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
    <?php echo $jsonTable; ?>
 </body>
 </html> 

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

Reply via email to