簡體   English   中英

如何使用PHP,MySQL和Google Charts工具在折線圖drwan中繪制多條線?

[英]How to draw multiple lines in a line chart drwan using PHP, MySQL and Google Charts tool?

我正在使用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>

我要運行該頁面的網址是

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

誰能幫我在折線圖上繪制所有四條線? 提前致謝。 如果您願意,我可以提供折線圖上繪制的一條線的屏幕截圖。

一方面,您引用的是data2data3 ,但從未設置它們。 您連續有三個var data1語句。

更新:我認為,除非有一個未concatDataTable concat方法可以合並其他DataTable實例的數據,否則您將需要自己實現此類功能或在php代碼中創建合並的構造函數參數。 我不確定為什么.concat調用沒有引發錯誤。 也許DataTable實例是一個數組。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM