时间戳

首页 > 解决方案 > 根据从 datepicker 中选择的日期绘制折线图（图表数据来自 mysql）（日期来自 mysql 表）

javascript - 根据从 datepicker 中选择的日期绘制折线图（图表数据来自 mysql）（日期来自 mysql 表）

问题描述

我试图做的事情是根据日期选择器中提到的日期和 ID 绘制折线图，​​如下所示 在这里我选择 ID 和日期

我想如何根据 ID 和日期填充折线图

下面是我目前用来填充折线图的我的代码

HTML 代码（显示图表）

<html>
<head>
    <title>Temperature chart</title>
</head>
<body>
                        <div id="chart-container">
                            <canvas id="mycanvas"></canvas>
                        </div>

    <script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

data.php（使用此文件从 mysql 获取数据并使用 json 打印）

<?php
//setting header to json
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://localhost:8080/hurry/data.php', false);
//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'canvasjs_db');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
  die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT `temp`, `formatedate` FROM `datapoints` WHERE `device_id` = '50' AND `formatedate` >= '2019-04-02 09:26:00' AND `formatedate` <= '2019-04-03 13:26:00'");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
  $data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);
?>

app.js（使用此文件填充图表中的数据）

$(document).ready(function(){
  $.ajax({
    url: "http://localhost:8080/Notifications/NewNotification/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var player = [];
      var score = [];

      for(var i in data) {
        player.push(data[i].formatedate);

        score.push(data[i].temp);
      }


      var chartdata = {
        labels: player,
        datasets : [
          {
            label: 'Temperature ',           
           hoverBackgroundColor: 'rgba(30, 0, 200)',
            hoverBorderColor: 'rgba(200, 200, 197)',
            data: score
          }

        ]

      };



      var ctx = $("#mycanvas");

      var lineGraph = new Chart(ctx, {
        type: 'line',

        data: chartdata
      });
    },
    error: function(data) {
      console.log(data);
    }

  });
});

标签： javascriptphpjquerymysqlajax

解决方案

推荐阅读