CODEWITHSUNDEEP
phphtmlmysqlchartsgoogle-visualization
Andy Shearer
Andy Shearer

Reputation: 187

Using PHP to with data taken from a database, in Google GeoChart

I am trying to display data on a GeoChart, that is extracted from the 'population' database, with the code shown below:

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([

       <?php 
        echo '["City","Population"],';
        require_once('connect_population.php');
        try{
        $query = "SELECT City, People FROM population";

        $statement = $db->query($query);
        while($row = $statement->fetch(PDO::FETCH_ASSOC)){
            echo '["'.$row["City"].'",'.$row["People"].'],';
        }

        }catch(PDOException $e){
            $message = '<p>Something went wrong!</p><p>' . $e->getMessage() . '</p>';
        }
        ?>

      ]);

      var options = {
        region: 'GB',
        displayMode: 'markers',
        colorAxis {colors: ['red', 'yellow']}
      };

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

PHP is only used when adding data into the 'data' variable, and after the php section, should contain this:

var data = google.visualization.arrayToDataTable([

["City","Population"],["London",7172091],["Bristol",420556],["Liverpool",469017],["Leeds",443247],["Birmingham",970892],["Manchester",394269],["Newcastle",655875],["Leicester",330574],["Belfast",276459],["Glasgow",629501],["Sheffield",439866],["Edinburgh",430082]    

]);

I am getting a problem when running the file in a browser, as nothing is being displayed. Using 'inspect element', it shows an unexpected token error on the line:

colorAxis {colors: ['red', 'yellow']}

which is in the options variable.

I thought that this was the correct way to set the colorAxis for a GeoChart?

Any help would be much appreciated as I am still learning how to use PHP and SQL.

Upvotes: 3

Views: 842

Answers (1)

davidkonrad
davidkonrad

Reputation: 85558

You simply lack a colon :

var options = {
   region: 'GB',
   displayMode: 'markers',
   colorAxis : {colors: ['red', 'yellow']}
};
             ^

otherwise your code works well -> http://jsfiddle.net/tnxhg08r/

Upvotes: 1

Related Questions