使用datepicker的新数据刷新PHP中的getJSON

我有两个文件，index.php和showday.php。使用datepicker的新数据刷新PHP中的getJSON

index.php应该与canvasjs

的canvasjs本数据来源于showday.php的帮助下，它运行的MySQL查询来提取数据

这里显示的时候就显示了恰当的图表年的文件显示图形，月和日变量在showday.php中有硬编码值，因此我知道这个概念有效。

我的问题是： - 如何使用发送到showday.php当前日期加载index.php和 - 如何刷新$.getJSON由日期选择器

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jqueryui/themes/sunny/jquery-ui.css"> 
    <link rel="stylesheet" href="jqueryui/style.css"> 
    <script src="jquery/jquery-3.1.0.js"></script> 
    <script src="jqueryui/jquery-ui.js"></script> 
    <script src="canvas/jquery.canvasjs.min.js"></script> 
    <script> 

    $(function() { 
     $("#datepicker").datepicker({ 
      changeMonth: true, 
      changeYear: true 
     }); 
    }); 


I guess that changedate function goes here with new date. 
But how to put that date in the call to: 
$.getJSON("showday.php", function (result) ??? 

Also, I would like that the page loads with current date, 
and then a user can refresh the graph with a chosen date 
with help of datepicker. How to do that? 

    $(document).ready(function() 
     { 

      $.getJSON("showday.php", function (result) 
       { 
        var chart = new CanvasJS.Chart("chartContainer", 
         { 
          zoomEnabled: true, 
          axisY:{ 
           title: "Power", 
           includeZero: false, 
           suffix : " kW", 
           }, 
          axisX: { 
           title: "Time", 
           }, 
          data: [ 
           { 
            type: "spline", 
            lineColor: "#FFAA00", 
            lineThickness: 2, 
            markerColor: "#007700", 
            dataPoints: result 
           } 
          ] 
         } 
        ); 
        chart.render(); 
       } 
      ); 
     } 
    ); 

    </script> 
</head> 

<body> 
<div id="chartContainer" style="width: 800px; height: 400px;"></div> 
<form action=""> 
    Date: <input type="text" id="datepicker" onchange="changedate(this.value)"> 
</form> 

</body> 
</html>

showday.php

<?php 

    $con = mysqli_connect('localhost', 'db', 'password', 'table'); 

// Check connection 
if (mysqli_connect_errno($con)) 
{ 
    echo "Failed to connect to DataBase: " . mysqli_connect_error(); 
}else 
{ 
    $data_points = array(); 

**How the new date vlues coming from index.php can be plugged in here?** 

    $query = "SELECT Hour, Minute, PAC as kW FROM `logdata` WHERE (Year=?) AND (Month=?) AND (Day=?)"; 
    $result = mysqli_query($con, $query); 

    while($row = mysqli_fetch_array($result)) 
    { 
    $Time = $row['Hour'].":".$row['Minute']; 
     $point = array("label" => $Time , "y" => $row['kW']); 

     array_push($data_points, $point);   
    } 

    echo json_encode($data_points, JSON_NUMERIC_CHECK); 
} 
mysqli_close($con); 

?>

选择新的日期

来源

2016-08-07 araut

创建功能：

function updateChart() { 
    $.getJSON("showday.php", {date: $('#datepicker').datepicker('getDate')}, function (result) 
      { 
       var chart = new CanvasJS.Chart("chartContainer", 
        { 
         zoomEnabled: true, 
         axisY:{ 
          title: "Power", 
          includeZero: false, 
          suffix : " kW", 
          }, 
         axisX: { 
          title: "Time", 
          }, 
         data: [ 
          { 
           type: "spline", 
           lineColor: "#FFAA00", 
           lineThickness: 2, 
           markerColor: "#007700", 
           dataPoints: result 
          } 
         ] 
        } 
       ); 
       chart.render(); 
      } 
     ); 
}

拨打updateChart()在datepicker select和$(document).ready()。 Pass data through $.getJSON通过传递一个对象作为第二个参数。

使用php（在您的showday.php）使用$_GET['date']访问date。有关如何从提供的字符串中提取年/日/月的信息，请参阅this post。

来源

2016-08-07 19:46:17 FrankerZ

你好FrankerZ，我只是试过你的建议。有用！非常非常感谢你。 – araut

使用datepicker的新数据刷新PHP中的getJSON

回答

相关问题