Question

我想制作动态图表输入，由用户发送给ajax函数drawgraph()。

Ajax函数应该将数据发送到PHP，PHP应该将数据发送到$.getJSON("myphpService.php", function(result)。

它没有显示任何内容。

从MySQL数据库用户输入开始日期和结束日期中选择数据。

DrawGraph.html

<html>
  <head>
    <title></title>
  </head> 
<body>
    <div class="container-fluid">

      <div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
    </div>
    </div>
    <input type="date" name="gsdate" id="gsdate"></div>
    <input type="date" name="gedate" id="gedate"></div>
    <select name="gitem" id="gitem">
      <option value="">Select item</option>
      <option value="SetPoint">Set Point</option>
      <option value="SupplyWater">Supply Water</option>
      <option value="ReturnWater">Return Water</option>
      <option value="SupplyAir">Supply Air</option>
      <option value="ReturnAir">Return Air</option>
      <option value="Actuator">Actuator</option>
      <option value="CO2">CO<sub>2</sub></option>
    </select>
    <select name="gAHU" id="gAHU">
      <option value="">Select AHU</option>
      <option value="AHU 1-1">AHU 1-1</option>
      <option value="AHU 1-2">AHU 1-2</option>
      <option value="AHU 2-1">AHU 2-1</option>
      <option value="AHU 2-2">AHU 2-2</option>
      <option value="AHU 3-1">AHU 3-1</option>
      <option value="AHU 3-2">AHU 3-2</option>
      <option value="AHU 4-1">AHU 4-1</option>
      <option value="AHU 4-2">AHU 4-2</option>
      <option value="AHU 5-1">AHU 5-1</option>
      <option value="AHU 5-2">AHU 5-2</option>
      <option value="AHU 6-1">AHU 6-1</option>
      <option value="AHU 6-2">AHU 6-2</option>
      <option value="AHU 7-1">AHU 7-1</option>
      <option value="AHU 7-2">AHU 7-2</option>
      <option value="AHU 8-1">AHU 8-1</option>
      <option value="AHU 8-2">AHU 8-2</option>
      <option value="AHU 9-1">AHU 9-1</option>
      <option value="AHU 9-2">AHU 9-2</option>
      <option value="AHU 10-1">AHU 10-1</option>
      <option value="AHU 10-2">AHU 10-2</option>
      <option value="AHU 11-1">AHU 11-1</option>
      <option value="AHU 11-2">AHU 11-2</option>
      <option value="AHU 12-1">AHU 12-1</option>
      <option value="AHU 12-2">AHU 12-2</option>
      <option value="AHU 13-1">AHU 13-1</option>
      <option value="AHU 13-2">AHU 13-2</option>
      <option value="AHU 14-1">AHU 14-1</option>
      <option value="AHU 14-2">AHU 14-2</option>
      <option value="AHU 15-1">AHU 15-1</option>
      <option value="AHU 15-2">AHU 15-2</option>
      <option value="AHU 16-1">AHU 16-1</option>
      <option value="AHU 16-2">AHU 16-2</option>
      <option value="AHU 17-1">AHU 17-1</option>
      <option value="AHU 17-2">AHU 17-2</option>
      <option value="AHU CP 2-3">AHU CP 2-3</option>
      <option value="AHU CP 3-3 ">AHU CP 3-3 </option>
      <option value="AHU CP 3-4">AHU CP 3-4</option>
      <option value="AHU CP 5-1">AHU CP 5-1</option>
      <option value="AHU CP 5-2">AHU CP 5-2</option>
      <option value="AHU CP 5-3">AHU CP 5-3</option>
      <option value="AHU CP 5-1 PH">AHU CP 5-1 PH</option>
      <option value="AHU CP 6-1">AHU CP 6-1</option>
      <option value="AHU CP 6-2">AHU CP 6-2</option>
      <option value="AHU CP 6-3">AHU CP 6-3</option>
      <option value="AHU CP 6-4">AHU CP 6-4</option>
      <option value="AHU CP 6-1 PH">AHU CP 6-1 PH</option>
    </select>
    <button type="button" id="run" onclick="drawgraph()">Draw Graph</button>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    <script type="text/javascript">
      function drawgraph()
      {
          var gsdate  = $("#gsdate").val();
          var gedate  = $("#gedate").val();
          var gAHU    = $("#gAHU").val();
          var gitem   = $('#gitem').val();


            DataArray = 
          {

            "gsdate"    : gsdate,
            "gedate"    : gedate,
            "gAHU"      : gAHU ,
            "gitem"     : gitem 
          }
          $.ajax({
              type:"POST",
              url : "myphpService.php",
              data : DataArray,
              datatype : 'html',
          }).done(function(data,Status)
          {
            $("#gmessage").html(data);

          })


      }


      $.getJSON("myphpService.php", function(result)
      {
                var dps= [];

      for(var i=0; i<result.length;i++)
      {
         dps.push({
                    "label":result[i].year, 
                    "y":[result[i].minivalue,result[i].maxivalue]
                  });

      }

      var chart = new CanvasJS.Chart("chartContainer",
       {
          animationEnabled:true,
          title:
          {
              text: "BMS Performance Monitroing",
          },
          axisX:
          {
              title: "Date",
          },

          axisY:
            {
              title: "Range",
          },


          data: [{
              type: "rangeColumn",
              dataPoints: dps
                  }]
      });


      chart.render();

      });



    </script>
  </body>
</html>

myphpService.php

<?php
  $con=mysqli_connect("localhost","root","") or 
                             die("Server Error" .mysql_error());
  mysqli_select_db($con,"bms") or die("Database Error" . mysql_error());

       $gsdate = $_POST['gsdate'];
     $gedate    = $_POST['gedate'];
     $gAHU  = $_POST['gAHU'];
     $gitem = $_POST['gitem'];

        $query =  "select AHU,MAX($gitem) as maxivalue,MIN($gitem) as minivalue,
                   cast(dateandtime as date) as sdate 
                 from bmspm WHERE AHU='$gAHU' and 
                   cast(dateandtime as date)>'$gsdate' 
                 and cast(dateandtime as date)<='$gedate'
                   GROUP by cast(dateandtime as date)" ;

              $result = mysqli_query($con,$query)or 
                   die("Query Error".mysql_error());

               $data_points = array();


      while ($row=mysqli_fetch_array($result))
    {       

         $point = array

        (
            'AHU'=>$row['AHU'],
            'maxivalue'=>$row['maxivalue'],
            'minivalue'=>$row['minivalue'],
            'year'=>$row['sdate']
        );

        array_push($data_points, $point);

    }   

      echo json_encode($data_points, JSON_NUMERIC_CHECK);

        mysqli_close($con);         
  ?>

Answer 1

我只能在一定程度上帮助你：

（1）开启PHP error reporting。这通常可以指示您的PHP脚本是否有错误。使用浏览器的开发人员工具来监控和分析请求。

（2）根据我的理解，你应该只需要制作一个ajax请求。用户单击按钮以触发AJAX请求以获取JSON响应。

（3）修改HTML代码并简化JS代码

<!-- wrap input elements within a form -->
<form id="form-graph">
    <input type="date" name="gsdate" id="gsdate"></div>
    <input type="date" name="gedate" id="gedate"></div>
    <select name="gitem" id="gitem">
        <!-- ... -->
    </select>
    <select name="gAHU" id="gAHU">
        <!-- ... -->
    </select>
    <!-- change type to submit -->
    <button type="submit" id="run">Draw Graph</button>
</form>

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script type="text/javascript">

  // when user submits the form
  $('#form-graph').submit(function drawgraph(e) {
      e.preventDefault();
      var form = $(this);
      // make request to PHP script while passing form values
      $.getJSON('myphpService.php', form.serialize(), function (data) {
          // then convert response for the chart
          var dps = $.map(data, function (d) {
              return {
                  "label": d.year, 
                  "y": [d.minivalue, d.maxivalue]
              }
          });

          var chart = new CanvasJS.Chart("chartContainer", /* ... */);

          chart.render();
      })
  });

动态图表php没有将数据发送到$ .getJSON（＆＃34;＆＃34;，function（）{}）

DrawGraph.html

myphpService.php

1 个答案: