douzhang1364 2017-02-14 15:34 采纳率: 0%
浏览 54

Google图表会相互添加另一个图表

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:

enter image description here

  • 写回答

1条回答 默认 最新

  • dsizd368332 2017-02-15 01:00
    关注

    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.

    评论

报告相同问题？

悬赏问题

  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 划分vlan后不通了
  • ¥15 GDI处理通道视频时总是带有白色锯齿
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询（拒绝大模型回答）
  • ¥15 自适应 AR 模型 参数估计Matlab程序
  • ¥100 角动量包络面如何用MATLAB绘制
  • ¥15 merge函数占用内存过大
  • ¥15 使用EMD去噪处理RML2016数据集时候的原理
  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大