FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Dynamic Chart php did not send data to $.getJSON() using PHP,MYSQL,CanvasJS › Reply To: Dynamic Chart php did not send data to $.getJSON() using PHP,MYSQL,CanvasJS

January 8, 2018 at 10:32 am #18609

Sajjad Mustafa 
<----------------------------DrawGraph.html-------------------->
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div class="container-fluid">
      <p>IN container </p>
      <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>
    </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>
    </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://cdn.canvasjs.com/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>