如何从两个不同的MySQL表中的两个变量绘制折线图

编程问答 2022-09-17

问题描述

我是PHP的新手，并介绍了如何在MysqL的两个不同表中绘制两个不同温度值的折线图。我可以从一个表中获取数据并将其绘制在图表中，但我无法弄清楚如何从两个不同的表中获取两个温度值。

第一张桌子1： 临时编号 1 20

第二表2： 临时编号 1 25

data.PHP代码：

<?PHP 
 $servername = "localhost";
 $database = "test";
 $username = "test";
 $password = "12345";

 $connect = MysqLi_connect($servername,$username,$password,$database);
 if (!$connect) {
  die("Connection Failed: " . MysqLi_connect_error());
  }

$query = ("SELECT * FROM Table1 UNION SELECT * FROM Table2");
$result = MysqLi_query($connect,$query);

$data = array(); 

if ($result->num_rows > 0) { 
 while ($row = $result->fetch_assoc()) { 

 array_push($data,[$row['time'],floatval($row['temp']),$row['time'],floatval($row['temp'])]); 
 }
 }
  echo json_encode($data);
  MysqLi_close($connect);

?>

JS代码：

setInterval(function () {

  google.charts.load('current',{'packages':['corechart','line']});
  google.charts.setonLoadCallback(drawLineColors);

  function drawLineColors() {

  var data = new google.visualization.DataTable(jsonData);

  data.addColumn('string','Date');
  data.addColumn('number','Temperature');
   
  data.addColumn('string','Temperature2');
   

var jsonData = $.ajax({
    url: "data.PHP",dataType: "json",async: false
    }).responseText;
    
var obj = JSON.parse(jsonData);

data.addRows(obj);

let rowIndex = data.getNumberOfRows() - 1; //gets the row index of last row
let lastTime = data.getValue(rowIndex,0); //gets the first column
let lastTemp = data.getValue(rowIndex,1); //gets second column

let rowIndex2 = data.getNumberOfRows() - 1; //gets the row index of last row
let lastTime2 = data.getValue(rowIndex,0); //gets the first column
let lastTemp2 = data.getValue(rowIndex,1); //gets third column

console.log(` ${lastTemp},${lastTemp2}`);
 
    $(".TempStatus").html(lastTemp + " &deg;C");
    $(".Temp2Status").html(lastTemp2 + " &deg;C");

   var options = {
    hAxis: {
      title: 'Time'
    },vAxis: {
      title: 'Sensors Scale'
    },colors: ['#a52714','#097138']
  };
  var chart = new  google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(data,google.charts.Line.convertOptions(options));
   }
    },5000);

如何从两个表中获取两个温度值？

解决方法

首先，让我们分别查询两个表。
然后合并响应数据Table1和Table2 ... 

<?php
  $servername = "localhost";
  $database = "test";
  $username = "test";
  $password = "12345";

  $connect = mysqli_connect($servername,$username,$password,$database);
  if (!$connect) {
    die("Connection failed: " . mysqli_connect_error());
  }

  $data = array(
    'Table1' => array(),'Table2' => array()
  );

  $query = ("SELECT * FROM Table1");
  $result = mysqli_query($connect,$query);
  if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
      array_push($data['Table1'],[$row['time'],floatval($row['temp'])]);
    }
  }

  $query = ("SELECT * FROM Table2");
  $result = mysqli_query($connect,$query);
  if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
      array_push($data['Table2'],floatval($row['temp'])]);
    }
  }

  echo json_encode($data);
  mysqli_close($connect);
?>

绘制图表时，我们只能有一个x轴。
因此我们需要将时间列上的两个表连接起来。

但是首先，谷歌图表只需加载一次。
并非每次我们绘制图表时。
因此，我们将首先加载google图表。

，我们不知道获取数据和绘制图表需要多长时间。
在第一个抽奖结束后，我们将使用setInterval来代替setTimeout。

google.charts.load('current',{
  packages: ['corechart']
}).then(function () {

  var options = {
    hAxis: {
      title: 'Time'
    },vAxis: {
      title: 'Sensors Scale'
    },colors: ['#a52714','#097138']
  };

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

  google.visualization.events.addListener(chart,'ready',function () {
    setTimeout(drawLineColors,5000);
  });

  drawLineColors();

  function drawLineColors() {
    var data1 = new google.visualization.DataTable();
    data1.addColumn('string','Date');
    data1.addColumn('number','Temperature');

    var data2 = new google.visualization.DataTable();
    data2.addColumn('string','Date');
    data2.addColumn('number','Temperature');

    $.ajax({
      url: 'data.php',dataType: 'json',}).done(function (jsonData) {
      data1.addRows(jsonData.Table1);
      data2.addRows(jsonData.Table2);

      var joinData = google.visualization.data.join(data1,data2,'full',[[0,0]],[1],[1]);

      var rowIndex = data1.getNumberOfRows() - 1;
      var lastTime = data1.getValue(rowIndex,0);
      var lastTemp = data1.getValue(rowIndex,1);
      var rowIndex2 = data2.getNumberOfRows() - 1;
      var lastTime2 = data2.getValue(rowIndex2,0);
      var lastTemp2 = data2.getValue(rowIndex2,1);
      $(".TempStatus").html(lastTemp + " &deg;C");
      $(".Temp2Status").html(lastTemp2 + " &deg;C");

      chart.draw(joinData,options);
    });
  }
});

其他说明...

    已弃用ajax上的
  1. async: false，请改用done回调。
  2. 不需要Google图表中的'line'软件包，它用于材料折线图。
    您使用的是经典折线图-> google.visualization.LineChart
    材料-> google.charts.Line
    同样，不需要转换经典图表的选项，
    已删除-> google.charts.Line.convertOptions
chartsgoogle-visualizationjavascriptmysql