php - 如何使用 PHP、MySQL 和 Google Charts 工具在折线图 drwan 中绘制多条线？

Question

我正在使用 Google Charts 工具绘制折线图。我正在从 MySQL 数据库中获取数据，并根据该数据绘制折线图。我想绘制代表单个数据系列的四条这样的线。如果我绘制一个折线图，那么它工作得很好，但是当涉及到多条线时，问题就出现了。我在下面展示了我的 PHP 代码:

<?php 
  $con=mysql_connect("localhost","root","eywaadmin") or die("Failed to connect with database!!!!");
  mysql_select_db("OCN", $con); 
  // The Chart table contains two fields: registration dates and respective no. of registraions on that date

  if($_GET['to_date']!='' && $_GET['from_date']!='' && $_GET['type']!='') {

      list($fd, $fm, $fy) = explode('/', $_GET['from_date']);
      list($td, $tm, $ty) = explode('/', $_GET['to_date']);
    $mk_from_time = mktime (0, 0, 0, $fm, $fd, $fy);
    $mk_to_time   = mktime (0, 0, 0, $tm, $td, $ty);

    $transaction_types = array();
    $transaction_types = explode(',', $_GET['type']);

    if (in_array("all",$transaction_types)) {
      $sth_all  = mysql_query("SELECT transaction_date as TDate, count(*) as cnt FROM user_transaction WHERE transaction_date >= ".$mk_from_time." AND transaction_date <=".$mk_to_time." group by date_format(from_unixtime(transaction_date),'%b %d, %Y'), transaction_status order by transaction_date");
    }

    if(in_array("success",$transaction_types)) {
      $sth_success  = mysql_query("SELECT transaction_date as TDate, count(*) as cnt FROM user_transaction WHERE transaction_date >= ".$mk_from_time." AND transaction_date <=".$mk_to_time." AND transaction_status = 'success' group by date_format(from_unixtime(transaction_date),'%b %d, %Y'), transaction_status order by transaction_date");
    }

    if(in_array("inprocess",$transaction_types)) {
      $sth_inprocess  = mysql_query("SELECT transaction_date as TDate, count(*) as cnt FROM user_transaction WHERE transaction_date >= ".$mk_from_time." AND transaction_date <=".$mk_to_time." AND transaction_status = 'inprocess' group by date_format(from_unixtime(transaction_date),'%b %d, %Y'), transaction_status order by transaction_date");
    }

    if(in_array("cancelled",$transaction_types)) {
      $sth_cancelled  = mysql_query("SELECT transaction_date as TDate, count(*) as cnt FROM user_transaction WHERE transaction_date >= ".$mk_from_time." AND transaction_date <=".$mk_to_time." AND transaction_status = 'cancelled' group by date_format(from_unixtime(transaction_date),'%b %d, %Y'), transaction_status order by transaction_date");
    }
  }     

$rows  = array();
//flag is not needed
$flag  = true;
$table = array();
$table['cols'] = array(
// Labels for the chart to represent the column titles
// One column is in "string" format and another one is in "number" format as line chart only required "numbers" for and string will be used for column title
    array('label' => 'Transaction Date', 'type' => 'string'),
    array('label' => 'All Transactions', 'type' => 'number'),
    array('label' => 'Successful Transactions', 'type' => 'number'),
    array('label' => 'Inprocess Transactions', 'type' => 'number'),
    array('label' => 'Cancelled Transactions', 'type' => 'number')
);

if (in_array("all",$transaction_types)) {
  //First Series
  $rows = array();

  while($r =  mysql_fetch_assoc($sth_all)) { 
    $temp = array();
    // the following line will be used to draw the Line chart
    $temp[] = array('v' => gmdate("d/m/Y", $r['TDate']));

    // Values of each point
    $temp[] = array('v' => (int) $r['cnt']); 

    $rows[] = array('c' => $temp);
  }

  $table['rows'] = $rows;

  $jsonTable = json_encode($table);
  //echo $jsonTable;
}

if(in_array("cancelled",$transaction_types)) {
  //Second Series
  $rows = array();

  while($r =  mysql_fetch_assoc($sth_cancelled)) { 
    $temp = array();
    // the following line will be used to draw the Line chart
    $temp[] = array('v' => gmdate("d/m/Y", $r['TDate']));

    // Values of each point
    $temp[] = array('v' => (int) $r['cnt']); 

    $rows[] = array('c' => $temp);
  }

  $table['rows'] = $rows;

  $jsonTable1 = json_encode($table);
  //echo $jsonTable1;
}


if(in_array("success",$transaction_types)) {
  //Third Series
  $rows = array();

while($r =  mysql_fetch_assoc($sth_success)) { 
    $temp = array();
    // the following line will be used to draw the Line chart
    $temp[] = array('v' => gmdate("d/m/Y", $r['TDate']));

    // Values of each point
    $temp[] = array('v' => (int) $r['cnt']); 

    $rows[] = array('c' => $temp);
  }

  $table['rows'] = $rows;

  $jsonTable2 = json_encode($table);
  //echo $jsonTable2;
}

if(in_array("inprocess",$transaction_types)) {
  //Fourth Series
  $rows = array();
  while($r =  mysql_fetch_assoc($sth_inprocess)) { 
    $temp = array();
    // the following line will be used to draw the Line chart
    $temp[] = array('v' => gmdate("d/m/Y", $r['TDate']));

    // Values of each point
    $temp[] = array('v' => (int) $r['cnt']); 

    $rows[] = array('c' => $temp);
  }
  $table['rows'] = $rows;

  $jsonTable3 = json_encode($table);
  //echo $jsonTable3; 
}
?>
<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 data1 = new google.visualization.DataTable(<?=$jsonTable1?>);
      var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
      var data3 = new google.visualization.DataTable(<?=$jsonTable3?>);
      var options = {
          title: 'User Transaction Data',
          is3D: 'true',
          width: 1000,
          height: 750
        };
      // 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'));
      var obj = data.concat(data1,data2,data3);

      //chart.draw(data, options);
      chart.draw(obj, options);
    }
    </script>
  </head>
  <body>
    <!--this is the div that will hold the line chart-->
    <div id="chart_div"></div>
  </body>
</html>

我要运行此页面的 URL 是

http://localhost/registration_chart/transaction_stats.php?to_date=27/6/2013&from_date=1/10/2002&type=all,cancelled,inprocess,success

谁能帮我画出折线图上的所有四条线？提前致谢。如果您愿意，我可以提供在折线图上绘制的单条线的屏幕截图。

Answer 1

一方面，您引用了 data2 和 data3，但从未设置它们。您在一行中有三个 var data1 语句。

更新:我认为除非 DataTable 有一个未记录的 concat 方法合并来自其他 DataTable 实例的数据，否则您您将需要自己实现这样的函数，或者在您的 PHP 代码中创建合并的构造函数参数。不过，我不确定为什么 .concat 调用没有引发错误。也许 DataTable 实例是一个数组。