Question

所以，我做了一个包含来自Pingdom的大量数据的页面。该页面本身包含多个Google线条图，当我只显示单个checkid的信息时，这些图表工作正常。

但是，当我尝试添加多行时（为了能够在一个图表中显示多个checkid），它就不会按预期工作。

正在绘制线条，但它们并不是相互叠加的！：（

以下是我尝试在折线图中添加多行的代码。请注意，从数据库中获取信息的php文件通过$ _GET变量执行此操作（您稍后会在JavaScript代码中看到为什么我试图将所有数据集合并为一个数据集）

注意：目前，以下部分代码需要大量额外工作，因此请不要指出安全漏洞。我需要图表才能继续工作并修复安全问题。

PHP：

<?php
$dt = new DateTime();
$dt->setTimeZone(new DateTimeZone('Europe/Oslo'));

$con=mysqli_connect("127.0.0.1","root","","PingdomStats");
$checkId = $_GET['checkId'];


// first we need to list out all the internal checks
$sql = "SELECT CheckId, CheckName, Category FROM Checks WHERE CheckId=$checkId ";
$checkList = mysqli_query($con,$sql);

$checkListCopy = $checkList;
$sqlResponseTimes = "";

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

$table['cols'] = 
array
(
  array('label' => 'Check name', 'type' => 'string'),
  array('label' => 'Response time', 'type' => 'number')
);


if(mysqli_num_rows($checkList) > 0)
{

  while($row = mysqli_fetch_row($checkList))
  {
    $sqlResponseTimes = "   SELECT 
                            FROM_UNIXTIME(Resp.checkTime, '%Y-%m-%d %h:%i:%s') AS CheckTime,
                            Resp.ResponseTime AS '$row[1]'
                            FROM ResponseTimes AS Resp
                            WHERE
                            Resp.Checkid = $row[0]
                            ORDER BY Resp.Id DESC LIMIT 10 ";




    //do a new query based on the sql query we just created.

    $responseTimeList = mysqli_query($con,$sqlResponseTimes);

    while($rowInner = mysqli_fetch_array($responseTimeList,MYSQLI_ASSOC))
    {
        $temp = array();
        $temp[] = array('v' => (string)$row[1]." ".$rowInner['CheckTime']); 
        $temp[] = array('v' => (int) $rowInner[$row[1]]); 

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

$table['rows'] = $rows;

echo json_encode($table);
}

这是JS代码：

var jsonData0 = 
$.ajax(
{
   url: "important_test.php?checkId=1575894",
   dataType:"json",
   async: false
}).responseText;

var data0 = new google.visualization.DataTable(jsonData0);

var jsonData1 = 
$.ajax(
{
   url: "important_test.php?checkId=1653903",
   dataType:"json",
   async: false
}).responseText;

var data1 = new google.visualization.DataTable(jsonData1);

var jsonData2 = 
$.ajax(
{
   url: "important_test.php?checkId=1575824",
   dataType:"json",
   async: false
}).responseText;

var data2 = new google.visualization.DataTable(jsonData2);

var jsonData3 = 
$.ajax(
{
   url: "important_test.php?checkId=1579531",
   dataType:"json",
   async: false
}).responseText;

var data3 = new google.visualization.DataTable(jsonData3);

var jsonData4 = 
$.ajax(
{
   url: "important_test.php?checkId=1645709",
   dataType:"json",
   async: false
}).responseText;

var data4 = new google.visualization.DataTable(jsonData4);

var options = 
{
   curveType: 'function',
   is3D: true,
   width: document.getElementById('internalLineGraph').clientWidth,
   height: 400,

};

var join_data0_Data1 = new google.visualization.data.join(data0,data1,'full',[[0,0]],[1],[1]);

var join_data2_Data3 = new google.visualization.data.join(data2,data3,'full',[[0,0]],[1],[1]);

var data0_to_data3 = new google.visualization.data.join(data0_Data1,data2_Data3,'full',[[0,0]],[1,2],[1,2]);

var chart = new google.visualization.LineChart(document.getElementById('internalLineGraph'));

chart.draw(data0_to_data3, options);

见附图： Graph showing info from internal Pingdom database

Answer 1

我忘了添加一个公共ID，以便能够加入JSON表。现在它应该工作了！

在Google折线图中添加多行

1 个答案: