Does not show data [closed]

-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>
    
asked by FranciscoBarreraPeñaloza 29.05.2017 в 17:33
source

1 answer

1

Apparently the problem is in the name of the properties of each $point .

In PHP , each $point has the following data:
- fecha
- Cantidad

See line $point = array("fecha" => $l['fecha'], "Cantidad" => $l['Cantidad']);

In JS , the names you use are:
- fechas (plural)
- cantidad ( c lower case)

See line data.push({x: new Date(result[i].fechas), y: parseInt(result[i].cantidad)});

Solution:

You could correct the JS , so for example:

<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>
    
answered by 29.05.2017 в 17:46