obtener los valores del formulario por ajax y pasarlo a una consulta

publicado por: Anonymous

Tengo un formulario para filtrar los datos para generar gráficos de los datos de las encuestas

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
    <html>_x000D_
_x000D_
    <head>_x000D_
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />_x000D_
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css">_x000D_
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>_x000D_
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>_x000D_
    </head>_x000D_
_x000D_
    <body>_x000D_
        <br /><br />_x000D_
_x000D_
      _x000D_
        <form id="formulario" class="form-inline" method="post" style="margin-left: 5%;">_x000D_
_x000D_
_x000D_
          <div class="form-group">_x000D_
            <label >Seleccione Asignatura:</label>_x000D_
            <input class="form-control" name="cursos" id="autocomplete">_x000D_
          </div>_x000D_
_x000D_
_x000D_
           <div class="form-group">_x000D_
            <input class="form-control" id="cod_curso" name="cod_curso" style="display:none;">_x000D_
           </div>_x000D_
_x000D_
  _x000D_
           <div id="secciones" class="form-group"></div>_x000D_
      _x000D_
 _x000D_
            <div class="form-group">_x000D_
                <label for="sel1">Seleccione año:</label>_x000D_
                <select class="form-control" name="anio" id="anio" placeholder="" required>_x000D_
                  <option value=2015>2015_x000D_
                  <option value=2016>2016 _x000D_
                  <option value=2017>2017 _x000D_
                  <option value=2018>2018 _x000D_
                  <option value=2019>2019 _x000D_
               </select>_x000D_
            </div>_x000D_
_x000D_
            <div class="form-group">_x000D_
                <label for="sel1">Seleccione semestre:</label>_x000D_
                <select class="form-control" name="semestre" id="semestre" placeholder="" required>_x000D_
                  <option value=Primer>Primer _x000D_
                  <option value=Segundo>Segundo_x000D_
               </select>_x000D_
            </div>_x000D_
            _x000D_
            <div class="form-group text-center" style="margin-left: 50px;">_x000D_
                <button id="myButton" type="button" class="btn btn-default">Generar</button>_x000D_
            </div>_x000D_
_x000D_
        </form>_x000D_
        _x000D_
        <div id="grafico"></div>_x000D_
    </body>_x000D_
_x000D_
    </html>

_x000D_

_x000D_

_x000D_

_x000D_

_x000D_

<script src="//code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>_x000D_
    <script>_x000D_
    _x000D_
$(document).on('ready',function(){       _x000D_
    $('#myButton').click(function(){_x000D_
            var url = "grafico_prueba.php";_x000D_
            $.ajax({                        _x000D_
            type: "POST",                 _x000D_
            url: url,                     _x000D_
            data: $("#formulario").serialize(), _x000D_
            success: function(data)_x000D_
            {_x000D_
             $('#grafico').html(data);               _x000D_
           }_x000D_
       });_x000D_
    });_x000D_
});_x000D_
    _x000D_
_x000D_
   </script>_x000D_
    <script>_x000D_
        var Cursos = [_x000D_
            <?php_x000D_
                $query2 = $mysqli -> query ("SELECT DISTINCT cod_ramo FROM cursos");_x000D_
                $cantidad_cursos = mysqli_num_rows($query2);_x000D_
				$i = 1;	_x000D_
            _x000D_
                while ($valores2 = mysqli_fetch_array($query2)) {_x000D_
                    echo  "'" . $valores2['cod_ramo'] . "'";_x000D_
                    if($i < $cantidad_cursos) {_x000D_
                        echo ", "; _x000D_
                        $i++;_x000D_
                    }_x000D_
                }_x000D_
            ?>_x000D_
        ]_x000D_
_x000D_
_x000D_
        $("#autocomplete").autocomplete({_x000D_
            source: Cursos,_x000D_
            select: function(event, ui) {_x000D_
_x000D_
                    $.ajax({_x000D_
                        url: "secciones.php",_x000D_
                        method: "GET",_x000D_
                        data: {_x000D_
                            cod_ramo: ui.item.value_x000D_
                        },_x000D_
                        success: function(data) {_x000D_
                            $('#secciones').html(data);_x000D_
                        }_x000D_
_x000D_
                });_x000D_
            }_x000D_
        });_x000D_
    </script>

_x000D_

_x000D_

_x000D_

Este formulario tiene un ajax para anidar asignatura con las secciones y otro para encontrar la clave única de ese curso(cod_curso) que esta oculta.

y luego eso valores de los input necesito pasarlo a un gráfico highchart

grafico_prueba.php

_x000D_

_x000D_

<script>    _x000D_
    _x000D_
Highcharts.chart('container', {_x000D_
    chart: {_x000D_
        type: 'column'_x000D_
    },_x000D_
    title: {_x000D_
        text: 'Grafico'_x000D_
    },_x000D_
    xAxis: {_x000D_
        min: 0,_x000D_
        title: {_x000D_
            text: 'Pregunta'_x000D_
        }_x000D_
    },_x000D_
    xAxis: {_x000D_
        categories: [   _x000D_
        <?php _x000D_
		$sql = "SELECT * FROM preguntas";_x000D_
		$result = mysqli_query($mysqli,$sql);_x000D_
		while ($registros = mysqli_fetch_array($result))_x000D_
		{_x000D_
        ?>_x000D_
            '<?php echo $registros["nombre"] ?>',_x000D_
        <?php_x000D_
		}_x000D_
		?>]_x000D_
        _x000D_
    },_x000D_
    yAxis: {_x000D_
        min: 0,_x000D_
        title: {_x000D_
            text: 'Porcentajes'_x000D_
        }_x000D_
    },_x000D_
    tooltip: {_x000D_
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',_x000D_
        shared: true_x000D_
    },_x000D_
    plotOptions: {_x000D_
        column: {_x000D_
            stacking: 'percent'_x000D_
        }_x000D_
    },_x000D_
    series: [{_x000D_
       name: 'no aplica',_x000D_
        data:  <?php _x000D_
				$sql = "FROM preguntas p _x000D_
                        _x000D_
                        LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta _x000D_
                        _x000D_
                        LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_x000D_
_x000D_
                        LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno _x000D_
                        _x000D_
   WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' AND f.semestre = '$semestre' or cod_curso_alumno IS NULL or anio IS NULL or semestre IS NULL)  and tr.tipo = '1'_x000D_
                        _x000D_
                        GROUP BY p.id_pregunta, tr.tipo";_x000D_
				$result = mysqli_query($mysqli,$sql);_x000D_
				?>_x000D_
                [<?php while ($registros = mysqli_fetch_array($result)){ ?><?php echo $registros["cantidad_respuestas"] ?>, _x000D_
                 <?php }?>]_x000D_
    }, {_x000D_
        name: 'muy en desacuerdo',_x000D_
        data:  <?php _x000D_
				$sql = "FROM preguntas p _x000D_
                        _x000D_
                        LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta _x000D_
                        _x000D_
                        LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_x000D_
_x000D_
                        LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno _x000D_
                        _x000D_
   WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' AND f.semestre = '$semestre' or cod_curso_alumno IS NULL or anio IS NULL or semestre IS NULL)  and tr.tipo = '2'_x000D_
                        _x000D_
                        GROUP BY p.id_pregunta, tr.tipo";_x000D_
				$result = mysqli_query($mysqli,$sql);_x000D_
				?>_x000D_
                [<?php while ($registros = mysqli_fetch_array($result)){ ?><?php echo $registros["cantidad_respuestas"] ?>, _x000D_
                 <?php }?>]_x000D_
    }, {_x000D_
        name: 'en desacuerdo',_x000D_
        data:  <?php _x000D_
				$sql = "FROM preguntas p _x000D_
                        _x000D_
                        LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta _x000D_
                        _x000D_
                        LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_x000D_
_x000D_
                        LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno _x000D_
                        _x000D_
   WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' AND f.semestre = '$semestre' or cod_curso_alumno IS NULL or anio IS NULL or semestre IS NULL)  and tr.tipo = '3'_x000D_
                        _x000D_
                        GROUP BY p.id_pregunta, tr.tipo";_x000D_
				$result = mysqli_query($mysqli,$sql);_x000D_
				?>_x000D_
                [<?php while ($registros = mysqli_fetch_array($result)){ ?><?php echo $registros["cantidad_respuestas"] ?>, _x000D_
                 <?php }?>]_x000D_
    }, {_x000D_
        name: 'en acuerdo',_x000D_
        data:  <?php _x000D_
				$sql = "FROM preguntas p _x000D_
                        _x000D_
                        LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta _x000D_
                        _x000D_
                        LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_x000D_
_x000D_
                        LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno _x000D_
                        _x000D_
   WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' AND f.semestre = '$semestre' or cod_curso_alumno IS NULL or anio IS NULL or semestre IS NULL)  and tr.tipo = '4'_x000D_
                        _x000D_
                        GROUP BY p.id_pregunta, tr.tipo";_x000D_
				$result = mysqli_query($mysqli,$sql);_x000D_
				?>_x000D_
                [<?php while ($registros = mysqli_fetch_array($result)){ ?><?php echo $registros["cantidad_respuestas"] ?>, _x000D_
                 <?php }?>]_x000D_
    }, {_x000D_
        name: 'muy de acuerdo',_x000D_
        data:  <?php _x000D_
				$sql = "FROM preguntas p _x000D_
                        _x000D_
                        LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta _x000D_
                        _x000D_
                        LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_x000D_
_x000D_
                        LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno _x000D_
                        _x000D_
   WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' AND f.semestre = '$semestre' or cod_curso_alumno IS NULL or anio IS NULL or semestre IS NULL)  and tr.tipo = '5'_x000D_
                        _x000D_
                        GROUP BY p.id_pregunta, tr.tipo";_x000D_
				$result = mysqli_query($mysqli,$sql);_x000D_
				?>_x000D_
                [<?php while ($registros = mysqli_fetch_array($result)){ ?><?php echo $registros["cantidad_respuestas"] ?>, _x000D_
                 <?php }?>]_x000D_
    }]_x000D_
});_x000D_
_x000D_
_x000D_
</script>

_x000D_

<?php_x000D_
require_once('../conexion.php');_x000D_
mysqli_query($mysqli,"SET NAMES 'utf8'");_x000D_
_x000D_
$cod_curso = $_POST['cod_curso'];_x000D_
$anio  = $_POST['anio'];_x000D_
$semestre  = $_POST['semestre'];_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
?>_x000D_
<html lang="en">_x000D_
<head>_x000D_
    <meta charset="UTF-8">_x000D_
    <title>Document</title>_x000D_
    <script src="../Highcharts-6.0.2/code/highcharts.js"></script>_x000D_
    <script src="../Highcharts-6.0.2/code/themes/grid-light.js"></script>_x000D_
    _x000D_
    _x000D_
    <script src="../Highcharts-6.0.2/code/modules/exporting.js"></script>_x000D_
       <script src="https://code.highcharts.com/modules/export-data.js"></script>_x000D_
</head>_x000D_
<body style="margin: 0">_x000D_
   _x000D_
   <div id="container" style="width: 100%; height: 600px; margin: 0"></div>_x000D_
_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

mi problema al momento de pasar la variable al php, no entiendo muy bien como aplicarlo en el gráfico y que cada vez que se filtra por un curso cambie el dato del gráfico.

Cualquier orientación o ayuda sera bien recibida.

solución

Te dejare este código que utilice en algún momento, presentaba el mismo inconveniente, es muy parecido al tuyo, el código esta probado y funciona correctamente, adáptalo a tus necesidades, y me cuentas.

HTML – Selects para filtrar

<tr>  
    <td width="150" align="right"><font face="arial"><b>AÑO</b></font></td>
    <td>
      <select name="ANO_ACTA" id="ANO_ACTA" autofocus="autofocus">
      <option>Seleccione...</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
      </select>
    </td>
  </tr>

  <tr>
    <td width="150" align="right"><font face="arial"><b>MES</b></font></td>
    <td>
      <select name="MES_ACTA" id="MES_ACTA">
        <option>Seleccione...</option>
        <option value="ENERO">ENERO</option>
        <option value="FEBRERO">FEBRERO</option>
        <option value="MARZO">MARZO</option>
        <option value="ABRIL">ABRIL</option>
        <option value="MAYO">MAYO</option>
        <option value="JUNIO">JUNIO</option>
        <option value="JULIO">JULIO</option>
        <option value="AGOSTO">AGOSTO</option>
        <option value="SEPTIEMBRE">SEPTIEMBRE</option>
        <option value="OCTUBRE">OCTUBRE</option>
        <option value="NOVIEMBRE">NOVIEMBRE</option>
        <option value="DICIEMBRE">DICIEMBRE</option>
      </select>
    </td>   
  </tr>

SCRIPT

jQuery(function ($) {

  var chart = new Highcharts.Chart({
    chart: {

        //Nombre del div contenedor
        renderTo: 'container',
        type: 'spline'
    },

    title: {
      text: '<b></b>Seleccione y Año y Mes...</b>'
    },

    subtitle: {
        text: 'Informe Rollout Mensual'
    },

    yAxis: {
      title: {
        text: 'Valores en Millones'
      }
    },

    xAxis: {
      //Categorías en duro o estaticas
      categories: ['DIA 1','DIA 2','DIA 3','DIA 4','DIA 5','DIA 6','DIA 7','DIA 8','DIA 9','DIA 10','DIA 11','DIA 12','DIA 13','DIA 14','DIA 15','DIA 16','DIA 17','DIA 18','DIA 19','DIA 20','DIA 21','DIA 22','DIA 23','DIA 24','DIA 25','DIA 26','DIA 27','DIA 28', 'DIA 29', 'DIA 30', 'DIA 31']
    },

    //Series o numero de lineas estadísticas 
    series: [

    {
      name : "CUNDINAMARCA",
      data: [],
      marker: {
      lineWidth: 5,
      lineColor: ''

      }

    },

    {
      name : "VALLE",
      data: [],
      marker: {
      lineWidth: 5,
      lineColor: ''
      }

    },

    {
      name : "CAUCA",
      data: [],
      marker: {
      lineWidth: 5,
      lineColor: '',
      fillColor: ''
      }

    },

    {
      name : "META",
      data: [],
      marker: {
      lineWidth: 5,
      lineColor: '',
      fillColor: ''
      }
    }]
  });

    //Funcion que al cambiar el `select` llama los datos
    $( "#MES_ACTA" ).change(function() {
    //validamos las fechass
    var ANO_ACTA = $('#ANO_ACTA').val();
    var MES_ACTA = $('#MES_ACTA').val();


    chart.setTitle({text: "<b></b>Facturación del Mes de <b>" + $("#MES_ACTA option:selected").val() + "</b>"});
    chart.setTitle(null, {text: "<b></b>Informe Rollout Mensual Año: <b>" + $("#ANO_ACTA option:selected").val() + "</b>"});
    //chart.setTitle: permite cambiar el dinamicamente el titulo y el subtitulo('null,') declarando el elemento seleccionado(option:selected) 
    $.ajax({
      url: "procesar.php",
      method: "POST",
      data: { ANO_ACTA: ANO_ACTA, MES_ACTA: MES_ACTA},
      dataType: "json"
    })

    .done(function(data) {
      //Impleméntalo para que ver que te arroja en la consola, o visualizar si tiene un erro
      console.log(ANO_ACTA);
      console.log(MES_ACTA);
      console.log(data);

      chart.series[0].setData(data[0]); 
      chart.series[1].setData(data[1]);
      chart.series[2].setData(data[2]);  
      chart.series[3].setData(data[3]);  
    });
  });
});
</script>

HTML

<table width="1300" border="1" bordercolor="red" align="center">
  <tr>
    <td><div id="container"></div></td>
  </tr>
</table>

PHP

<?php require_once'../Connections/conexion.php';

$MES_ACTA = $_POST['MES_ACTA']; 
$ANO_ACTA = $_POST['ANO_ACTA'];

$resultado = [];
$resultado2 = [];
$resultado3 = [];
$resultado4 = [];

for ($i = 1; $i <= 31; $i++) { 
    $query= "SELECT SUM(VALOR) as total_DIA_1_CUNDINAMARCA FROM rollout_2017 WHERE ANO_ACTA = '$ANO_ACTA' AND MES_ACTA = '$MES_ACTA' AND DIA= '$i' AND DEPARTAMENTO = 'CUNDINAMARCA' AND TIPO_MAT = 'MO'"; 
    $result =  mysql_query($query, $conexion); 
    $valor = mysql_result($result, 0); 
    $resultado[] = round($valor, 1); 
}

for ($i = 1; $i <= 31; $i++) { 
    $query2= "SELECT SUM(VALOR) as total_DIA_1_VALLE_DEL_CAUCA FROM rollout_2017 WHERE ANO_ACTA = '$ANO_ACTA' AND MES_ACTA = '$MES_ACTA' AND DIA = '$i' AND DEPARTAMENTO = 'VALLE DEL CAUCA' AND TIPO_MAT = 'MO'"; 
    $result2 =  mysql_query($query2, $conexion); 
    $valor2 = mysql_result($result2, 0); 
    $resultado2[] = round($valor2, 1); 
}

for ($i = 1; $i <= 31; $i++) { 
$query3= "SELECT SUM(VALOR) as total_DIA_1_CAUCA FROM rollout_2017 WHERE ANO_ACTA = '$ANO_ACTA' AND MES_ACTA = '$MES_ACTA' AND DIA = '$i' AND DEPARTAMENTO = 'CAUCA' AND TIPO_MAT = 'MO'"; 
    $result3 =  mysql_query($query3, $conexion); 
    $valor3 = mysql_result($result3, 0); 
    $resultado3[] = round($valor3, 1); 
}

for ($i = 1; $i <= 31; $i++) { 
    $query4= "SELECT SUM(VALOR) as total_DIA_1_META FROM rollout_2017 WHERE ANO_ACTA = '$ANO_ACTA' AND MES_ACTA ='$MES_ACTA' AND DIA = '$i' AND DEPARTAMENTO = 'META' AND TIPO_MAT = 'MO'"; 
    $result4 =  mysql_query($query4, $conexion); 
    $valor4 = mysql_result($result4, 0); 
    $resultado4[] = round($valor4, 1); 

}
//Si es mas de una "linea" o consulta, tienes que pasar los datos como array
echo json_encode([$resultado, $resultado2, $resultado3, $resultado4]);

?>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *