Google Charts with PHP and MySQL: works on local machine, not on remote server

411 views
Skip to first unread message

Ardal Powell

unread,
Feb 26, 2014, 6:31:53 PM2/26/14
to google-visua...@googlegroups.com
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.


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> 

Ardal Powell

unread,
Feb 26, 2014, 7:24:44 PM2/26/14
to google-visua...@googlegroups.com
Hi People,

I found the answer, here.

The remote server doesn't have short tags enabled. So in line 17

<?=$jsonTable?>

 needs to be replaced with

<?php echo $jsonTable; ?>

Cheers,
Ardal
Reply all
Reply to author
Forward
0 new messages