Passing json a grafica hihgchart

Question

Passing json a grafica hihgchart

Navigation

#1 by (0 votes)

0

Dear, I have a problem of how to pass a json encode for the part categories of the script.

filter.php

<?php
    require("../conexion.php");
    mysqli_query($mysqli,"SET NAMES 'utf8'");
?>
<!DOCTYPE html>
<html>
    <head>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
    </head>
    <body>
        <div class="container-fluid" style="margin-left: -50px;">
           <div class="row">
            <form id="formulario" class="form-inline" method="post" style="margin-left: 5%; margin-top: 2%;">
                <div class="form-group">
                <label >Seleccione Asignatura:</label>
                <input class="form-control" name="cursos" id="autocomplete">
               </div>


           <div class="form-group" >
            <input class="form-control" id="cod_curso" name="cod_curso" style="display:none;">
           </div>

  
           <div id="secciones" class="form-group"></div>
      
 
            <div class="form-group">
                <label for="sel1">Seleccione año:</label>
                <select class="form-control" name="anio" id="anio" placeholder="" required>
                  <option value=2015>2015
                  <option value=2016>2016 
                  <option value=2017>2017 
                  <option value=2018>2018 
                  <option value=2019>2019 
               </select>
            </div>
                
                <div class="form-group">
				  <label>Ingrese dimension:</label>
				      <select type="text" class="form-control" id="id_dimension" name="id_dimension" required>
                           <?php
                            
                           $query = $mysqli -> query ("SELECT * FROM dimension where id_encuesta_p = '1'");
											
                            while ($valores = mysqli_fetch_array($query)) {
												
                            echo '<option value="'.$valores[id_dimension].'">'.$valores[id_dimension].' '.$valores[nombre_dimension].'</option>';
													
                             }
    
                          ?> 
                          
                        </select>
                </div>


                <div class="form-group">
                    <button id="myButton" type="button" class="btn btn-default">Generar</button>
                </div>
            </form>
            </div>
        </div>
        <div id="grafico" style="width: 1350px; height: 550px;"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>    
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script>
            $(document).ready(function() {       
                $('#myButton').click(function(){
                    $.ajax({
                        url: "graficodimension.php",
                        data: $("#formulario").serialize(),
                        type: "POST",
                        dataType: "json",
                        success: function(data) {
                            console.log(data);
                            Highcharts.chart('grafico', {
                                chart: {
                                    type: 'column'
                                },
                                title: {
                                    text: 'Grafico'
                                },
                                xAxis: {
                                    min: 0,
                                    title: {
                                        text: 'Pregunta'
                                    }
                                },
                                xAxis: {
                                    categories:   [   
        <?php 
		$sql = "SELECT * FROM preguntas where id_dimension_p = '$id_dimension'";
		$result = mysqli_query($mysqli,$sql);
		while ($registros = mysqli_fetch_array($result))
		{
        ?>  
            
            '<?php echo $registros["nombre"],$registros["id_pregunta"] ?>',
        <?php
		}
		?>]

                                },
                                yAxis: {
                                    min: 0,
                                    title: {
                                        text: 'Porcentajes'
                                    }
                                },
                                tooltip: {
                                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                                    shared: true
                                },
                                plotOptions: {
                                    column: {
                                        stacking: 'percent'
                                    }
                                },
                                series: [{
                                   name: 'no aplica',
                                    data:  deDataAUnArreglo(data.consulta1.cantidad_respuestas)
                                }, {
                                    name: 'muy en desacuerdo',
                                    data: deDataAUnArreglo(data.consulta2.cantidad_respuestas)
                                }, {
                                    name: 'en desacuerdo',
                                    data:  deDataAUnArreglo(data.consulta3.cantidad_respuestas)
                                }, {
                                    name: 'en acuerdo',
                                    data:  deDataAUnArreglo(data.consulta4.cantidad_respuestas)
                                }, {
                                    name: 'muy de acuerdo',
                                    data:  deDataAUnArreglo(data.consulta5.cantidad_respuestas)
                                }]
                            });
                        },
                        error: function(xhr) {console.log(xhr.responseText);},
                    }).fail(function( jqXHR, textStatus, errorThrown ){
                        if (jqXHR.status === 0){
                            alert('No hay coneccion con el servidor, debe comunicarte con el administrador');
                        } else if (jqXHR.status == 404) {
                            alert('La pagina solicitada no fue encontrada: error 404, debes comunicarte con el administrador');
                        } else if (jqXHR.status == 500) {
                            alert('Error interno del servidor, debes comunicarte con el administrador');
                        } else if (textStatus === 'parsererror') {
                            alert('Error en la respuesta JSON, debes comunicarte con el administrador');
                        } else if (textStatus === 'timeout') {
                            alert('Se ha excedido el tiempo de respuesta, debes comunicarte con el administrador');
                        } else if (textStatus === 'abort') {
                            alert('La peticion fue abortada, debes comunicarte con el administrador');
                        } else {
                            alert('Error desconocido, debes comunicarte con el administrador');
                        }
                    });   
               });
                function deDataAUnArreglo(data) {
                    var arreglo = [];
                    $.each (data, function (key, value) {
                        arreglo.push(parseInt(value));
                    });
                    return arreglo;
                }
             });
            
        </script>
    </body>
</html>
<script src="//code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>

    <script>
        var Cursos = [
            <?php
                $query2 = $mysqli -> query ("SELECT DISTINCT cod_ramo FROM cursos");
                $cantidad_cursos = mysqli_num_rows($query2);
				$i = 1;	
            
                while ($valores2 = mysqli_fetch_array($query2)) {
                    echo  "'" . $valores2['cod_ramo'] . "'";
                    if($i < $cantidad_cursos) {
                        echo ", "; 
                        $i++;
                    }
                }
            ?>
        ]


        $("#autocomplete").autocomplete({
            source: Cursos,
            select: function(event, ui) {

                    $.ajax({
                        url: "secciones.php",
                        method: "GET",
                        data: {
                            cod_ramo: ui.item.value
                        },
                        success: function(data) {
                            $('#secciones').html(data);
                        }

                });
            }
        });
    </script>

graficodimension.php

<?php
    require("../conexion.php");
    $arreglo = array();
    $cursos = $_POST['cursos'];
    $cod_curso = $_POST['cod_curso'];
    $seccion = $_POST['seccion'];
    $anio = $_POST['anio'];
    $id_dimension = $_POST['id_dimension'];
    $consulta1 = array();
    $consulta2 = array();
    $consulta3 = array();
    $consulta4 = array();
    $consulta5 = array();

//    $consulta6 = array();
    
//    $sql = "SELECT * FROM preguntas WHERE id_dimension_p = '$id_dimension'";
//    $result = mysqli_query($mysqli,$sql);
//    while ($registros = mysqli_fetch_array($result)){
//        $consulta6["id_dimension"][] = $registros["id_dimension"];
//        $consulta6["nombre"][] = $registros["nombre"];
//        $consulta6["id_dimension_p"][] = $registros["id_dimension_p"];
//    }
//    $arreglo['consulta6'] = $consulta6; 
    
    $sql = "SELECT p.id_pregunta, tr.tipo, COUNT(r.id_respuesta) as cantidad_respuestas
            FROM encuesta e 
            LEFT JOIN dimension d on e.id_encuesta = d.id_encuesta_p
            LEFT JOIN preguntas p on d.id_dimension = p.id_dimension_p
            LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta_tr 
            LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_r
            LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno 
            WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' or cod_curso_alumno IS NULL or anio IS NULL) 
            AND (tr.tipo = '1') AND (d.id_dimension = '$id_dimension')
            GROUP BY p.id_pregunta, tr.tipo";
    $result = mysqli_query($mysqli,$sql);
    while ($registros = mysqli_fetch_array($result)){
        $consulta1["id_pregunta"][] = $registros["id_pregunta"];
        $consulta1["tipo"][] = $registros["tipo"];
        $consulta1["cantidad_respuestas"][] = $registros["cantidad_respuestas"];
    }
    $arreglo['consulta1'] = $consulta1;

    $sql = "SELECT p.id_pregunta, tr.tipo, COUNT(r.id_respuesta) as cantidad_respuestas
            FROM encuesta e 
            LEFT JOIN dimension d on e.id_encuesta = d.id_encuesta_p
            LEFT JOIN preguntas p on d.id_dimension = p.id_dimension_p
            LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta_tr 
            LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_r
            LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno 
            WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' or cod_curso_alumno IS NULL or anio IS NULL) 
            AND (tr.tipo = '2') AND (d.id_dimension = '$id_dimension')
            GROUP BY p.id_pregunta, tr.tipo";
    $result = mysqli_query($mysqli,$sql);
    while ($registros = mysqli_fetch_array($result)){
          $consulta2["id_pregunta"][] = $registros["id_pregunta"];
        $consulta2["tipo"][] = $registros["tipo"];
        $consulta2["cantidad_respuestas"][] = $registros["cantidad_respuestas"];
    }
    $arreglo['consulta2'] = $consulta2;


    $sql = "SELECT p.id_pregunta, tr.tipo, COUNT(r.id_respuesta) as cantidad_respuestas
            FROM encuesta e 
            LEFT JOIN dimension d on e.id_encuesta = d.id_encuesta_p
            LEFT JOIN preguntas p on d.id_dimension = p.id_dimension_p
            LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta_tr 
            LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_r
            LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno 
            WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' or cod_curso_alumno IS NULL or anio IS NULL) 
            AND (tr.tipo = '3') AND (d.id_dimension = '$id_dimension')
            GROUP BY p.id_pregunta, tr.tipo";
    $result = mysqli_query($mysqli,$sql);
    while ($registros = mysqli_fetch_array($result)){
          $consulta3["id_pregunta"][] = $registros["id_pregunta"];
        $consulta3["tipo"][] = $registros["tipo"];
        $consulta3["cantidad_respuestas"][] = $registros["cantidad_respuestas"];
    }
    $arreglo['consulta3'] = $consulta3;
    
        $sql = "SELECT p.id_pregunta, tr.tipo, COUNT(r.id_respuesta) as cantidad_respuestas
            FROM encuesta e 
            LEFT JOIN dimension d on e.id_encuesta = d.id_encuesta_p
            LEFT JOIN preguntas p on d.id_dimension = p.id_dimension_p
            LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta_tr 
            LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_r
            LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno 
            WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' or cod_curso_alumno IS NULL or anio IS NULL) 
            AND (tr.tipo = '4') AND (d.id_dimension = '$id_dimension')
            GROUP BY p.id_pregunta, tr.tipo";
    $result = mysqli_query($mysqli,$sql);
    while ($registros = mysqli_fetch_array($result)){
          $consulta4["id_pregunta"][] = $registros["id_pregunta"];
        $consulta4["tipo"][] = $registros["tipo"];
        $consulta4["cantidad_respuestas"][] = $registros["cantidad_respuestas"];
    }
    $arreglo['consulta4'] = $consulta4;

        $sql = "SELECT p.id_pregunta, tr.tipo, COUNT(r.id_respuesta) as cantidad_respuestas
            FROM encuesta e 
            LEFT JOIN dimension d on e.id_encuesta = d.id_encuesta_p
            LEFT JOIN preguntas p on d.id_dimension = p.id_dimension_p
            LEFT JOIN tipo_respuesta tr on p.id_pregunta = tr.id_pregunta_tr 
            LEFT JOIN respuesta r on tr.id_tipo = r.id_tipo_r
            LEFT JOIN form_alumnos f on r.id_form_alumno_fk = f.id_form_alumno 
            WHERE (f.cod_curso_alumno = '$cod_curso' AND f.anio = '$anio' or cod_curso_alumno IS NULL or anio IS NULL) 
            AND (tr.tipo = '5') AND (d.id_dimension = '$id_dimension')
            GROUP BY p.id_pregunta, tr.tipo";
    $result = mysqli_query($mysqli,$sql);
    while ($registros = mysqli_fetch_array($result)){
        $consulta5["id_pregunta"][] = $registros["id_pregunta"];
        $consulta5["tipo"][] = $registros["tipo"];
        $consulta5["cantidad_respuestas"][] = $registros["cantidad_respuestas"];
    }
    $arreglo['consulta5'] = $consulta5;
    echo json_encode($arreglo);  


    
   
?>

in the filter.php in the category part as I must call it using json_enconde, I have tried it as commented on the filtrodimension.php inside the same json_encode but I get an error, the data I want to show in categories are string.

Any help or guidance will be welcome

javascript php json highcharts

asked by claudia24 19.12.2017 в 04:23

source

1 answer

Select Rand () between From GroupBy and with OrderBy Retrieve data from several checkboxes when editing a Laravel form

score 0 · Answer 1

First, if you declare twice xAxis you will only take into account the second one. You have to declare only once with all the properties:

xAxis: {
   min: 0,
   title: {
     text: 'Pregunta'
   }
   categories:   [   ...  ]
}

Second. Suppose your query yields a set of results of the type

nombre | id_pregunta
____________________
juan   | 1
pedro  | 2
diego  | 3

Then the result of the loop

<?php 
$sql = "SELECT * FROM preguntas where id_dimension_p = '$id_dimension'";
$result = mysqli_query($mysqli,$sql);
while ($registros = mysqli_fetch_array($result)) {
?>  
  '<?php echo $registros["nombre"],$registros["id_pregunta"] ?>',
<?php
}
?>

It's like telling Highcharts what categories it is

['juan1','pedro2','diego3',]

In that case it would be easier to do:

<?php 
$categories=[];
$sql = "SELECT * FROM preguntas where id_dimension_p = '$id_dimension'";
$result = mysqli_query($mysqli,$sql);
while ($registros = mysqli_fetch_array($result)) {
    array_push($categories, $registros["nombre"].$registros["id_pregunta"]);
} 
?>

xAxis: {
   min: 0,
   title: {
     text: 'Pregunta'
   }
   categories:   <?php echo json_encode($categories); ?>
}