0

I want to make dynamic chart input given by user send to ajax function drawgraph().

Ajax function should send data to PHP, and PHP should send data to $.getJSON("myphpService.php", function(result).

It does not show anything.

Data select from MySQL database user input start date and end date.

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);         
  ?>
Brandon Minnick
  • 13,342
  • 15
  • 65
  • 123
Sajjad Mustafa
  • 51
  • 1
  • 1
  • 3

1 Answers1

0

I can only help you to a certain extent:

(1) Turn on your PHP error reporting. This usually gives you an indication if your PHP script has errors. Use your browser's developer tools to monitor and analyze the request.

(2) From what I understood, you should only need to make ONE ajax request. User clicks button to fire an AJAX request to get back a JSON response.

(3) Modify your HTML code and simplify your JS code

<!-- 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();
      })
  });
Mikey
  • 6,728
  • 4
  • 22
  • 45