1

Esto es un gráfico hecho con la librería de chartJS, muestra datos segun el AÑO y al cambiar de MES. Como dice el titulo, quiero poder graficar los datos de mi DB con HighCharts, pero no se hacerlo, no se como va la ubicación del código o si hay que realizar alguna otra cosa.

HTML

<div class="caja">
     <select name="ANO" id="ANO">
         <option>Seleccione...</option>
         <option value="2014">2014</option>
         <option value="2015">2015</option>
         <option value="2016">2015</option>
     </select>
</div>

<div class="caja">
    <select name="MES" id="MES" onChange="mostrarResultados(this.value)">
        <option>Seleccione...</option>
        <option value="1">ENERO</option>
        <option value="2">FEBRERO</option>
        <option value="3">MARZO</option>
        <option value="4">ABRIL</option>
        <option value="5">MAYO</option>
        <option value="6">JUNIO</option>
        <option value="7">JULIO</option>
        <option value="8">AGOSTO</option>
        <option value="9">SEPTIEMBRE</option>
        <option value="10">OCTUBRE</option>
        <option value="11">NOVIEMBRE</option>
        <option value="12">DICIEMBRE</option>
    </select>
</div>    

JQUERY

$(document).ready(mostrarResultados()); 
function mostrarResultados(MES, ANO){

var _mes = $("#MES").val();
var _ano = $("#ANO").val();

$.ajax({
    type:'POST',
    url:'controlador/procesar.php',
    data: {MES : _mes , ANO : _ano},
    success:function(data){

renderTo: 'container',
$(document).ready(function () {
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: null,
    type: 'line'
},
title: {
    text: "Total dias de mora para la entrega talonarios correctivos y 
preventivos por tecnico."
},

subtitle: {
    text: ''
},

yAxis: {
    title: {
        text: 'Talonarios'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

xAxis: {
    categories: ['DIA_1', 'DIA_2'],
    crosshair: true
},

series: [{
    name: 'DIAS',
    data: [dia1, dia2]

        }]
       });
    });
});
}
}

PHP

<?php require_once('../Connections/conexion.php'); ?>

<?php
$MES = $_POST['MES'];
$ANO = $_POST['ANO'];

$dia1 = mysql_fetch_array(mysql_query("SELECT COUNT(PLANILLA) AS r FROM 
acta_entrega WHERE DAY(FECHA_E_FAC)=1 AND MONTH(FECHA_E_FAC)='$MES' 
AND YEAR(FECHA_E_FAC) = '$ANO'"));
$dia2 = mysql_fetch_array(mysql_query("SELECT COUNT(PLANILLA) AS r FROM 
acta_entrega WHERE DAY(FECHA_E_FAC)=2 AND MONTH(FECHA_E_FAC)='$MES' 
AND YEAR(FECHA_E_FAC) = '$ANO'"));

$data = array(0 => round($dia1['r'],1),
              1 => round($dia2['r'],1)

);  

echo json_encode($data);

?>
2
  • De acuerdo, editare la pregunta.
    – Anderviver
    el 21 sep. 2017 a las 17:39
  • No, eso ya lo hice, quiero es poder graficar con HighCharts los datos mi DB.
    – Anderviver
    el 21 sep. 2017 a las 17:49

2 respuestas 2

1

Organizando las ideas debemos saber que hacer.

1.Crear un Grafico en Highcharts

esto se realiza mediante el comando var chart = new Highcharts.Chart

    var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'mi_grafico'
                    },
                    series: [{
                    name : "serie 1",
                        data: [1, 2, 3]        
                    },{
                    name : "serie 2",
                        data: [3, 12, 43]        
                    }]
                });

en el nombre de las series puedes colocar las series que quieras; a modo ejemplo coloque serie 1 y serie 2 en el grafico observaras estos nombres.

2. Cargar datos via JQUERY/AJAX un HighCharts

Para realizar esta operacion necesitamos pasar por parametros que necesitas y cargarlos en la serie que necesitas

 $.ajax({
        url: "tu_url",
        method: "GET",
        data: { ANO: ANO, MES: MES }
      }).done(function(data) {
          //aqui esta la linea magica
         chart.series[0].setData(......);
      });

como sabemos pasamos los parametros via AJAX a tu PHP, y nos devolvera un resultado.ten en cuenta que el resultado para las series es un arreglo de numeros por lo tanto recibiriamos en nuestra data algo asi:

data.resultado = [[1,2,3],[3, 12, 43] ]

Lo Asignaremos en nuestro HighCharts mas o menos de esta forma:

chart.series[0].setData(data.resultado[0]); //serie 1 
chart.series[1].setData(data.resultado[1]); //serie 2

Ejemplo Practico de lo hablado

jQuery(function ($) {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'mi_grafico'
            },

            series: [{
            name : "mantequila",
                data: [29.9, 71.5, 106.4]        
            },{
            name : "moztaza",
                data: [23,6,9]        
            }]
        });


    $( "#MES" ).change(function() {
    //validamos las fechass
    var ANO = $('#ANO').val();
    var MES = $('#MES').val();
        $.ajax({
        url: "https://jsonplaceholder.typicode.com/posts/",
        method: "GET",
        data: { ANO: ANO, MES: MES }
      }).done(function(data) {
      /* en mi caso esta en duro pero si recibes los valores deberian ser todos 
       as series por tanto deberia ser algo como 
       chart.serie = data.serie*/ 
        chart.series[0].setData([4,6,5]); //serie 1 
chart.series[1].setData([4,9,7]); //serie 2
      });


    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div class="caja">
     <select name="ANO" id="ANO">
         <option>Seleccione...</option>
         <option value="2014">2014</option>
         <option value="2015">2015</option>
         <option value="2016">2015</option>
     </select>
</div>

<div class="caja">
    <select name="MES" id="MES" >
        <option>Seleccione...</option>
        <option value="1">ENERO</option>
        <option value="2">FEBRERO</option>
        <option value="3">MARZO</option>
        <option value="4">ABRIL</option>
        <option value="5">MAYO</option>
        <option value="6">JUNIO</option>
        <option value="7">JULIO</option>
        <option value="8">AGOSTO</option>
        <option value="9">SEPTIEMBRE</option>
        <option value="10">OCTUBRE</option>
        <option value="11">NOVIEMBRE</option>
        <option value="12">DICIEMBRE</option>
    </select>
</div>
<div id="mi_grafico"></div>

6
  • 1
    Disculpa la molestia JackNavaRow, pero soy nuevo en esto de Jquery y HighCharts, me podrías explicar por favor de forma muy simple que tengo que hacer con las variables que obtengo y como debe ser mi array JSON de retorno.
    – Anderviver
    el 21 sep. 2017 a las 19:23
  • creo que esta un poco mejor, espero que sea de tu utilidad el 21 sep. 2017 a las 19:43
  • JackNavaRow, de antemano agradezco tu disposición para ayudarme, pero lo que dices es precisamente agregar otra serie o mejor dicho graficar otra linea, tal vez no me hecho entender; pero lo explico de otra forma. Yo recibo un resultado por cada consulta, como lo coloque arriba, que es dia1 y dia2(nombre de consultas SQL), en realidad es hasta dia31 pero por ahorrar lineas lo deje así. $data = array(0 => round($dia1['r'],1), 1 => round($dia2['r'],1) )0;. Necesito mostrar es el resultado de este array.
    – Anderviver
    el 21 sep. 2017 a las 20:05
  • quieres agregar la serie o la quieres actualizar? el 21 sep. 2017 a las 20:11
  • Quiero actualizarla, cuando selecciono el mes, por eso el método onChange="mostrarResultados(this.value)"
    – Anderviver
    el 21 sep. 2017 a las 20:15
1

Se que ya ha pasado tiempo pero como nadie publico la respuesta correcta lo hago para alguien que de pronto lo necesite.

El problema que encontré era como se llamaban los datos, me faltaba declarar el tipo de datos que me iba a retornar dataType: "json, esto y obviamente el llamado de datos desde HighCharts.

HTML

<script src="../huawei/Highcharts/js/highcharts.js"></script>
<script src="../huawei/Highcharts/js/jquery.js"></script>

<div class="caja">
    <select name="ANO" id="ANO" autofocus="autofocus">
        <option>Seleccione...</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>
</div>
<br>
<div class="caja">
    <select name="MES" id="MES">
        <option>Seleccione...</option>
        <option value="01">ENERO</option>
        <option value="02">FEBRERO</option>
        <option value="03">MARZO</option>
        <option value="04">ABRIL</option>
        <option value="05">MAYO</option>
        <option value="06">JUNIO</option>
        <option value="07">JULIO</option>
        <option value="08">AGOSTO</option>
        <option value="09">SEPTIEMBRE</option>
        <option value="10">OCTUBRE</option>
        <option value="11">NOVIEMBRE</option>
        <option value="12">DICIEMBRE</option>
    </select>
</div>

SCRIPT

jQuery(function ($) {
  var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container'
      },

      series: [{
        name : "Planillas recibidas por dia",
        data: ['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']


      }]
  });

  $( "#MES" ).change(function() {
  //validamos las fechass
  var ANO = $('#ANO').val();
  var MES = $('#MES').val();
      $.ajax({
        url: "controlador/procesar.php",
        method: "POST",
        data: { ANO: ANO, MES: MES },
        dataType: "json"
      })

    .done(function(data) {

      console.log(data);
      console.log(ANO);
      console.log(MES);

      chart.series[0].setData(data);  
    });
  });
});

PHP

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

$MES = $_POST['MES']; 
$ANO = $_POST['ANO'];
$CIUDAD = $_POST['CIUDAD'];

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

for ($i = 1; $i <= 31; $i++) { 
$query= "SELECT SUM(monto_venta) AS r FROM pruebas WHERE 
DAY(fecha_venta)='$i' AND MONTH(fecha_venta)='$MES' AND YEAR(fecha_venta) = '$ANO' AND CIUDAD = '$CIUDAD'"; 

    $result =  mysql_query($query, $conexion); 
    $valor = mysql_result($result, 0); 
    $resultado[] = round($valor, 1); 
}

for ($i = 1; $i <= 31; $i++) { 
$query2= "SELECT SUM(productos) AS prod FROM pruebas WHERE DAY(fecha_venta)='$i' AND MONTH(fecha_venta)='$MES' AND YEAR(fecha_venta) = '$ANO' AND CIUDAD = '$CIUDAD'"; 

    $result2 =  mysql_query($query2, $conexion); 
    $valor2 = mysql_result($result2, 0); 
    $resultado2[] = round($valor2, 1); 
}

for ($i = 1; $i <= 31; $i++) { 
$query3= "SELECT CIUDAD FROM pruebas WHERE DAY(fecha_venta)='$i' AND MONTH(fecha_venta)='$MES' AND YEAR(fecha_venta) = '$ANO' AND CIUDAD = '$CIUDAD'"; 

$result3 =  mysql_query($query3, $conexion); 
$valor3 = mysql_result($result3, 0); 
$resultado3[] = round($valor3, 1); 
}  

echo json_encode([$resultado, $resultado2, $resultado3]);

?>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.