-2
// esta es la clase con su respectiva funcion para que pueda ser mostrado en el grafico

<?php

include_once '../SQL/ClasePDO.php';

class data {

    public function grafico() {
        header('Content-Type: application/json');
        $data_points = array();
        $pdo = new ClasePDO();
        $stm = $pdo->prepare("Select count(Equipo) as Cantidad, DATE(fecha) as fecha from Valores group by Date(fecha)");
        $stm->execute();
        foreach($stm as $l)
        {
            $point = array("fecha" => $l['fecha'], "Cantidad" => $l['Cantidad']);
            array_push($data_points, $point);
        }
        echo json_encode($data_points);
    }
}
?>

<?php

$data = new data();
$data->grafico();
?>

//esta es la segunda parte donde el objetivo es mostrar los datos del gráfico
//el problema es que tiene datos vacíos

<html>
    <head>
        <script type="text/javascript">
            window.onload = function () {
                var dataLength = 0;
                var data = [];
                $.getJSON("data.php/grafico", function (result) {
                    dataLength = result.length;
                    for (var i = 0; i < dataLength; i++) {
                        data.push({
                            x: new Date(result[i].fechas),
                            y: parseInt(result[i].cantidad)
                        });
                    }
                    ;
                    chart.render();
                });
                var chart = new CanvasJS.Chart("chart", {
                    title: {
                        text: "Graficos"
                    },
                    axisX: {
                        title: "Fecha",
                    },
                    axisY: {
                        title: "Sensores",
                    },
                    data: [{type: "line", dataPoints: data}],
                });
            }
        </script>
        <script type="text/javascript" src="../assets/scripts/canvasjs.min.js"></script>
        <script type="text/javascript" src="../assets/scripts/jquery-2.2.3.min.js"></script>
    </head>
    <body>
        <div id="chart">
        </div>
    </body>
</html>
1
  • Hola. Tu pregunta carece de la informacion necesaria para que alguno de nosotros pueda ayudarte. Por favor consulta la ayuda para mejorarla.
    – gbianchi
    Commented el 29 may. 2017 a las 15:36

1 respuesta 1

1

Al parecer el problema está en el nombre de las propiedades de cada $point.

En PHP, cada $point tiene los siguientes datos:
- fecha
- Cantidad

Ver línea $point = array("fecha" => $l['fecha'], "Cantidad" => $l['Cantidad']);

En JS, los nombres que usas son:
- fechas (en plural)
- cantidad (c minúscula)

Ver línea data.push({x: new Date(result[i].fechas), y: parseInt(result[i].cantidad)});

Solución:

Podrías corregir el JS, así por ejemplo:

<script type="text/javascript">
window.onload = function () {
  var dataLength = 0;
  var data = [];
  $.getJSON("data.php/grafico", function (result) {
    dataLength = result.length;
    for (var i = 0; i < dataLength; i++) {
      // AQUI usar los nombre correctos
      data.push({
        x: new Date(result[i].fecha),
        y: parseInt(result[i].Cantidad)
      });
    }

    chart.render();
  });
  var chart = new CanvasJS.Chart("chart", {
    title: {
        text: "Graficos"
    },
    axisX: {
        title: "Fecha",
    },
    axisY: {
        title: "Sensores",
    },
    data: [{type: "line", dataPoints: data}],
  });
}
</script>
1
  • Estimado muchas gracias te comento que me sirvio bastante y ya esta solucionado Commented el 29 may. 2017 a las 19:26

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