Google chart add another chart next to each other

问题

I made a working chart with mysql and I want to make another chart next to my 1st chart but it does not go well.

my code

<?php
 $con = mysqli_connect('xxxx','xxxx','xxxx','xxxx');
?>
<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>
 1234
 </title>
 <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 = google.visualization.arrayToDataTable([

///Start Chart
 ['Date', 'Total Orders'],
 <?php 
 $query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType";

 $exec = mysqli_query($con,$query);
 while($row = mysqli_fetch_array($exec)){

 echo "['".$row['saleType']."',".$row['count']."],";
 }
 ?>
 ///End Chart

 ]);

 var options = {
 title: 'Total Orders in 2017'
 };
 var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
 chart.draw(data, options);
 }
 </script>
</head>
<body>
 <h3>1234</h3>
 <div id="columnchart" style="width: 600px; height: 500px;"></div>
</body>
</html>

This is my chart but i want to make another one next to each other:

回答1:

highly recommend not mixing php within html / javascript...

instead, use php to return the data in json format...

getdata1.php

<?php
  $query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType";
  $exec = mysqli_query($con,$query);

  $rows = array();
  $table = array();

  $table['cols'] = array(
      array('label' => 'Sale Type', 'type' => 'string'),
      array('label' => 'Total Orders', 'type' => 'number')
  );

  while($row = mysqli_fetch_array($exec)){
    $temp = array();
    $temp[] = array('v' => (string) $row['saleType']);
    $temp[] = array('v' => (int) $row['count']);
    $rows[] = array('c' => $temp);
  }

  $table['rows'] = $rows;

  echo json_encode($table);
?>

then use jquery / ajax to get the data from php and draw the chart...

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {
    callback: function () {
      // draw chart from php data
      $.ajax({
        url: 'getdata1.php',
        dataType: 'json',
        done: function (jsonData) {
          var data = new google.visualization.DataTable(jsonData);
          var options = {
            title: 'Total Orders in 2017'
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
          chart.draw(data, options);
        },
        fail: function(jqXHR, textStatus, errorThrown) {
          console.log(errorThrown + ': ' + textStatus);
        }
      });

      // then just use another php page to get the other data and draw another chart
      $.ajax({
        url: 'getdata2.php',
        dataType: 'json',
        done: function (jsonData) {
          var data = new google.visualization.DataTable(jsonData);
          var options = {
            title: 'Total Other Orders in 2017'
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("columnchart2"));
          chart.draw(data, options);
        },
        fail: function(jqXHR, textStatus, errorThrown) {
          console.log(errorThrown + ': ' + textStatus);
        }
      });
    },
    packages: ['corechart']
  });
</script>

note, also recommend using loader.js to load the library, vs. jsapi

<script src="https://www.gstatic.com/charts/loader.js"></script>

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

来源：https://stackoverflow.com/questions/42230160/google-chart-add-another-chart-next-to-each-other

标签

php

html

mysql

charts

google-visualization