我的图形未显示未定义的元素

时间:2019-08-07 17:30:19

标签: php ajax postgresql chart.js

下午好,javascript向我展示了我未定义的查询,我想做的是绘制图形,我已经在寻找它,但是找不到解决方案,希望您能为我提供帮助,或者如果还有其他解决方案,请不要那样做。

$(document).ready(function(){

  $.ajax({
    type : "POST",
    url : "consulta_reporte.php",

    success : function(data){
      alert(data);

      var sample_id = [];
      var expected_value_reporte = [];
      var min_2std_reporte = [];
      var plus_2std_reporte = [];

      for(var i in data) {
        sample_id.push(data[i].sample_id);
        expected_value_reporte.push(data[i].expected_value);
        min_2std_reporte.push(data[i].min_2std);
        plus_2std_reporte.push(data[i].plus_2std);
      }

      var chartdata = {
        labels: sample_id,
        datasets: [
          {
            label: "expected_value",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(59, 89, 152, 0.75)",
            borderColor: "rgba(59, 89, 152, 1)",
            pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
            pointHoverBorderColor: "rgba(59, 89, 152, 1)",
            data: expected_value_reporte
          },
          {
            label: "min_2std",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(29, 202, 255, 0.75)",
            borderColor: "rgba(29, 202, 255, 1)",
            pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
            pointHoverBorderColor: "rgba(29, 202, 255, 1)",
            data: min_2std_reporte
          },
          {
            label: "plus_2std",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(211, 72, 54, 0.75)",
            borderColor: "rgba(211, 72, 54, 1)",
            pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
            pointHoverBorderColor: "rgba(211, 72, 54, 1)",
            data: plus_2std_reporte
          } 
        ]
      };

      var ctx = $("#resultado");

      var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error : function(data) {

    }
  });
});

我的php查询就是这个,在这里我称之为嵌套查询,在这里我选择了三个组合,最后显示了图形,下面是这个脚本。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <html>
  <head>
    <title> Generar Reporte</title>

    <style>
      .chart-container {
        width: 640px;
        height: auto;
      }
    </style>
    <!-- javascript -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="Chart.min.js"></script>
    <script type="text/javascript" src="linegraph.js"></script>

  </head>
  <body>

    <?php

    $host = '127.0.0.1';
    $port = '5432';
    $database = 'pos';
    $user = 'postgres';
    $password = '';

    $cnx = pg_connect(
      'host=' . $host . ' port=' . $port . ' dbname=' . $database .
      ' user=' . $user . ' password=' . $password
  );

    $qr = "select * from vw_dhqc_report";

    $year = 'year';
    $id_control = 'id_control';
    $element = 'element';    

    // header("Content-Type: text/html;charset=utf-8");
    $query4 = "SELECT
        DISTINCT year, id_control, element,
        returned_value, expected_value,
        sample_id, min_2std, plus_3std, plus_2std
      FROM vw_dhqc_report
      WHERE
      '$_POST[$year]' = year AND 
      '$_POST[$id_control]'= id_control AND
      '$_POST[$element]'= element
    ";
    $result4 = pg_query($query4);

    ?>
    <?php

    $resutado = array();
    while ($row = pg_fetch_assoc($result4)) {
      $resutado[] = $row;
    }
    http_response_code(200);
    header("Content-Type →application/json; charset=utf-8");
    // echo json_encode($resutado);
    pg_close($cnx);   

    ?>

    <div class="chart-container">
      <canvas id="resultado"></canvas>
    </div>

  </body>
  </html>

这是我的index.php,我在这里填满连击

 <form  id="formulario" action="" method="post">
    <h3>Seleccione una Opci&oacute;n<h3>
    <!-- <h3>year</h3> -->
    <select name="year" id="year_id">
    <option value="">Seleccionar</option>
    <?php
     $query = "select distinct $year from vw_dhqc_report order by year desc";
     $result = pg_query($query);

     while($fila=pg_fetch_array($result)){
     echo "<option value='".$fila['year']."'>".$fila['year']."</option>";
     }
    ?>
    </select>
    <!-- <h3>id_control</h3> -->
    <select name="id_control" id="control_id">
    <option value="0">Seleccionar</option>
     </select>
     <!-- <h3>Element</h3> -->
     <select name="element" id="element_id">
    <option value="0">Seleccionar</option>
     </select>
    <br><br>
      <?php

      ?>
    </form>

    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
    $(document).ready(function(){
        $('#year_id').on('change', function(){
            var year = $(this).val();
            if(year){
                $.ajax({
                    type:'POST',
                    url: 'control.php',
                    data:'year='+year,
                    success:function(data){
                        $('#control_id').html(data);   
                  }   

                }); 
            }else{
                $('#control_id').html('<option value="">Select year</option>');
            }
        });

    $('#control_id').on('change', function(){
            var id_control = $(this).val();
            var year =$('#year_id').val();

            // var  element = {'year':year,'id_control':id_control};
            if(id_control){
                $.ajax({
                    type:'POST',
                    url:'element.php',
                     data: element = {'year':year,'id_control':id_control},

                    success:function(data){
                        $('#element_id').html(data);  
                    }
                });
            }else{
                $('#element_id').html('<div value="">Select id_control</div>');
            }
         });
      $('#element_id').on('change', function(){
            var id_element = $(this).val();
            var year =$('#year_id').val();
             var id_control =  $('#control_id').val();

            if(id_element){
                $.ajax({
                    type:'POST',
                    url:'consulta_reporte.php',

                    data: element = {'element':id_element,'year':year,'id_control':id_control},

                    success:function(data){
                        $('#resultado').html(data);

                    }
                });
            }else{
                $('#resultado').html('<div value="">Mostrar Tabla</div>');
            }
         });
        });
      </script>

<div id="resultado">

        </div>
</body>
</html>

this is the capture that shows me 希望你能帮助我谢谢

0 个答案:

没有答案