formulario para gestionar graficas

[elmoikano]

Hola amigos del foro, pues vengo con esta duda:

estoy generando graficas con JSON y con HighCharts, y todo muy suabe ya se generan lo gráficos correctamente; ahora la tabla que manejo tiene datos de diferentes años y quisiera saber somo podría hacer un formulario muy sencillo en el que sólo seleccione el año del que quiero la gráfica, hasta ahora tengo esto:

formulario html

Código HTML:

<form method="post" action="datacol.php">
	
	<select name="medio" tabindex="6">
					<option value='2014' selected>2014</option>
					<option value='2015' >2015</option>
					<option value='2016' >2016</option>
					<option value='2017' >2016</option>
					<option value='2018' >2016</option>
				</select>
	
	<input type="submit"/>
</form> 

el action lo envío al archivo datacol.php que es el siguiente:

Código PHP:

  <?php 
$con = mysql_connect("localhost","root"," "); 
 
if (!$con) { 
  die('Could not connect: ' . mysql_error()); 
} 
 
mysql_select_db("encuestas", $con); 
 
$query = mysql_query("SELECT YEAR (fecha) as Y,MONTH(fecha) as MES, MONTHNAME(fecha) AS NOMBRE,fecha,  ROUND(AVG(profun),2) as profavg,ROUND(AVG(orden),2) as ordavg,ROUND(AVG(claridad),2) as claAVG,  ROUND(AVG(mat_didactico),2) as matavg,ROUND(AVG(ac_dudas),2) as acavg,ROUND(AVG(m_tiempo),2) as  mtavg from dbencuestas group by MES"); 
 
$category = array(); 
$category['name'] = 'MES'; 
 
$series1 = array(); 
$series1['name'] = 'Profundidad'; 
 
$series2 = array(); 
$series2['name'] = 'Orden'; 
 
$series3 = array(); 
$series3['name'] = 'Claridad'; 
 
$series4 = array(); 
$series4['name'] = 'Mat_Didáctico'; 
 
$series5 = array(); 
$series5['name'] = 'Aclara_Dudas'; 
 
$series6 = array(); 
$series6['name'] = 'Manejo_Tiempo'; 
 
 
while($r = mysql_fetch_array($query)) { 
    $category['data'][] = date ("M-Y", strtotime ($r ['fecha'])); //date("g:i:s - A",strtotime($row['duracion'])); 
    $series1['data'][] = $r['profavg']; 
    $series2['data'][] = $r['ordavg']; 
    $series3['data'][] = $r['claAVG']; 
    $series4['data'][] = $r['matavg'];   
    $series5['data'][] = $r['acavg'];   
    $series6['data'][] = $r['mtavg'];    
} 
 
$result = array(); 
array_push($result,$category); 
array_push($result,$series1); 
array_push($result,$series2); 
array_push($result,$series3); 
array_push($result,$series4); 
array_push($result,$series5); 
array_push($result,$series6); 
 
 
print json_encode($result, JSON_NUMERIC_CHECK); 
 
mysql_close($con); 
?>   

este archivo es el que proporciona los datos para graficar en el archivo prom_satisfacción.php, pero no se como enviar datacol.php a este que es el que muestra el grafico

Código PHP:

          <script type="text/javascript"> 
        $(document).ready(function() { 
            var options = { 
                chart: { 
                    renderTo: 'container', 
                    type: 'column', 
                    marginRight: 130, 
                    marginBottom: 25 
                }, 
                title: { 
                    text: 'Promedio de Satisfacción Mensual', 
                    x: -20 //center 
                }, 
                subtitle: { 
                    text: '', 
                    x: -20 
                }, 
                xAxis: { 
                    categories: [] 
                }, 
                yAxis: { 
                    title: { 
                        text: '% satisfacción' 
                    }, 
                    plotLines: [{ 
                        value: 0, 
                        width: 1, 
                        color: '#808080' 
                    }] 
                }, 
                tooltip: { 
                    formatter: function() { 
                            return '<b>'+ this.series.name +'</b><br/>'+ 
                            this.x +': '+ this.y +'%';  
                    } 
                }, 
                legend: { 
                    layout: 'vertical', 
                    align: 'right', 
                    verticalAlign: 'top', 
                    x: -10, 
                    y: 100, 
                    borderWidth: 0 
                }, 
                series: [] 
            } 
             
            $.getJSON("datacol.php", function(json) { 
                options.xAxis.categories = json[0]['data']; 
                options.series[0] = json[1]; 
                options.series[1] = json[2]; 
                options.series[2] = json[3]; 
                options.series[3] = json[4]; 
                options.series[4] = json[5]; 
                options.series[5] = json[6]; 
                chart = new Highcharts.Chart(options); 
            }); 
        }); 
        </script> 
         
         
        <script src="http://code.highcharts.com/highcharts.js"></script> 
        <script src="http://code.highcharts.com/modules/exporting.js"></script>  
  

Algúna idea? agradezco su ayuda.. Un cordial saludo.

[loncho_rojas]

Si el name es name="medio"

tendrías que recibir la variable $_GET['medio'];

$year= $_GET['medio']; y a tu consulta colocarle un WHERE

WHERE year = '".$year."' group by MES"

No se como se llama tu campo como para que puedas extraer el año que necesitas... solo como ejemplo... en todo caso si no es con tu DB tendrís que ver como usas esa variable MEDIO que trae consigo el valor del año para que te filtre ya sea el JSON o lo que uses, pero creo que puedes lograrlo ya en el SQL

[elmoikano]

Hola loncho_rojas, gracias por tu ayuda amigo. claro como lo mencionas habia olvidado lo básico, jajaja ok, peo ahora queda la duda te explico con los códigos:

Mi idea es poner este combo en una pagina se llama grsficas.html y es sólo para establecer de que año quiero la gráfica:

Código HTML:

<form method="post" action="datacol.php">
	
	<select name="year" tabindex="6">
					<option value='2013' selected>2013</option>
					<option value='2014' >2014</option>
					<option value='2015' >2015</option>
					<option value='2016' >2016</option>
					<option value='2017' >2017</option>
					<option value='2018' >2018</option>
				</select>
	
	<input type="submit"/>
</form> 

commo se ve en el action va hacia el archivo datacol.php, que es donde recibe la variable y esta la consulta:

Código PHP:

  <?php 
//recibe variable 
$year = $_POST['year']; 
 
//esta es mi consulta donde se colocaría el año que señalo en '%$year%' 
$query = mysql_query("SELECT YEAR (fecha) as Y,MONTH(fecha) as MES, MONTHNAME(fecha) AS NOMBRE,fecha, 
ROUND(AVG(profun),2) as profavg,ROUND(AVG(orden),2) as ordavg,ROUND(AVG(claridad),2) as claAVG,  
ROUND(AVG(mat_didactico),2) as matavg,ROUND(AVG(ac_dudas),2) as acavg,ROUND(AVG(m_tiempo),2) as   
mtavg from dbencuestas WHERE fecha LIKE '%$year%' GROUP by MES"); 
// y el arreglo y demas 
$category = array(); 
$category['name'] = 'MES'; 
 
$series1 = array(); 
$series1['name'] = 'Profundidad'; 
 
$series2 = array(); 
$series2['name'] = 'Orden'; 
 
$series3 = array(); 
$series3['name'] = 'Claridad'; 
 
$series4 = array(); 
$series4['name'] = 'Mat_Didáctico'; 
 
$series5 = array(); 
$series5['name'] = 'Aclara_Dudas'; 
 
$series6 = array(); 
$series6['name'] = 'Manejo_Tiempo'; 
 
 
while($r = mysql_fetch_array($query)) { 
    $category['data'][] = date ("M-Y", strtotime ($r ['fecha'])); //date("g:i:s - A",strtotime($row['duracion'])); 
    $series1['data'][] = $r['profavg']; 
    $series2['data'][] = $r['ordavg']; 
    $series3['data'][] = $r['claAVG']; 
    $series4['data'][] = $r['matavg'];   
    $series5['data'][] = $r['acavg'];   
    $series6['data'][] = $r['mtavg'];    
} 
 
$result = array(); 
array_push($result,$category); 
array_push($result,$series1); 
array_push($result,$series2); 
array_push($result,$series3); 
array_push($result,$series4); 
array_push($result,$series5); 
array_push($result,$series6); 
 
 
print json_encode($result, JSON_NUMERIC_CHECK); 
 
mysql_close($con); 
?>   

hasta aqui tío de este odo super, el lio es que no se como hacer el envío de este archivo al prom_satisfaccion.php, que es donde recibe el JSON y grafica los resultados obtenidos en la encuesta (la grafica la genero con la librería HighCharts) y este es el archivo que recibe los resultados de la consulta:

Código PHP:

  <!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <title>Column chart with data from MySQL using Highcharts</title> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
        <script type="text/javascript"> 
        $(document).ready(function() { 
            var options = { 
                chart: { 
                    renderTo: 'container', 
                    type: 'column', 
                    marginRight: 130, 
                    marginBottom: 25 
                }, 
                title: { 
                    text: 'Promedio de Satisfacción Mensual', 
                    x: -20 //center 
                }, 
                subtitle: { 
                    text: '', 
                    x: -20 
                }, 
                xAxis: { 
                    categories: [] 
                }, 
                yAxis: { 
                    title: { 
                        text: '% satisfacción' 
                    }, 
                    plotLines: [{ 
                        value: 0, 
                        width: 1, 
                        color: '#808080' 
                    }] 
                }, 
                tooltip: { 
                    formatter: function() { 
                            return '<b>'+ this.series.name +'</b><br/>'+ 
                            this.x +': '+ this.y +'%';  
                    } 
                }, 
                legend: { 
                    layout: 'vertical', 
                    align: 'right', 
                    verticalAlign: 'top', 
                    x: -10, 
                    y: 100, 
                    borderWidth: 0 
                }, 
                series: [] 
            } 
             
            $.getJSON("datacol.php", function(json) { 
                options.xAxis.categories = json[0]['data']; 
                options.series[0] = json[1]; 
                options.series[1] = json[2]; 
                options.series[2] = json[3]; 
                options.series[3] = json[4]; 
                options.series[4] = json[5]; 
                options.series[5] = json[6]; 
                chart = new Highcharts.Chart(options); 
            }); 
        }); 
        </script> 
         
         
        <script src="http://code.highcharts.com/highcharts.js"></script> 
        <script src="http://code.highcharts.com/modules/exporting.js"></script> 
         
    </head> 
    <body> 
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html>  
  

algúna idea???