Forum Replies Created by Sajjad Mustafa

Viewing 2 posts - 1 through 2 (of 2 total)
  • <----------------------------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>
    

    Browser did no show any error and how i can share my code here.

Viewing 2 posts - 1 through 2 (of 2 total)