// 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>
-
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
Añade un comentario
|
1 respuesta
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>
-
Estimado muchas gracias te comento que me sirvio bastante y ya esta solucionado Commented el 29 may. 2017 a las 19:26