Este es mi primer post así que por favor discúlpenme si no es tan bueno.
Este es mi "area_chart.charts.php" donde está el Array:
$data=array(); foreach ($result as $row) { $chartDate = date("d/m", strtotime($row['created_at'])); $chartResultats = $row['traitements']; $chart = array("chartResultats" => $chartResultats,"chartDate" => $chartDate); array_push($data, $chart); }Respuesta JSON: https://prnt.sc/1whxygm
Estoy tratando de recuperar los datos para usarlos con Chart.JS usando Ajax, pero la forma en que lo hago no funciona. ¿Alguien tiene una idea de cómo hacerlo?
El resultado que quiero es:
chartResultats: [10, 30, 20] chartDate: ["16/10", "16/10", "16/10"]Traté de usar Ajax así:
$.ajax({ url:"./inc/charts/area_chart.charts.php", method:"GET", success:function(data) { console.log(data); chartResultats = data["chartResultats"]; chartDate = data["chartDate"]; // Area Chart var ctx = document.getElementById("chartResultats"); var myLineChart = new Chart(ctx, { type: 'line', data: { labels: [chartDate], datasets: [{ data: [chartResulats], }],y Fetch pero no tuvo éxito. Mi gráfico me está devolviendo underfined.
¿Puedes ayudarme o aclararme? ¡Gracias por adelantado!
No dice cómo genera la matriz de $data para que esté disponible para AJAX.
Para generar $data como JSON, debe finalizar su secuencia de comandos con,
header('Content-Type: application/json;charset=UTF-8'); print json_encode($data); exit();Luego puede usar su navegador para abrir la página charts.php e inspeccionar la salida JSON.
Sin embargo, para tener el JSON que necesita, necesita algo como,
$data=array( 'chartResultats' => array(), 'chartDate' => array(), ); foreach ($result as $row) { $data['chartDate'][] = date("d/m", strtotime($row['created_at'])); $data['chartResultats'][] = $row['traitements']; } header('Content-Type: application/json;charset=UTF-8'); print json_encode($data); exit();La salida debería ser como,
{ "chartResultats": [10, 30, 20], "chartDate": ["16/10", "16/10", "16/10"] } En el código que publicaste, creas en cada iteración un nuevo diccionario con un chartResultats r y un chartDate d (llamémoslo { r: 1, d: 1 } ):
$chart = array("chartResultats" => $chartResultats,"chartDate" => $chartDate);y luego empuja este objeto a los datos, obteniendo una matriz de dichos objetos:
array_push($data, $chart); Entonces sus datos son [ { r: 1, d: 1 }, { r: 2, d: 2 }, ... ] (una matriz de diccionarios) en lugar de ser { r: [ 1, 2, ... ], d: [ 1, 2, ... ] } (un diccionario de dos matrices).
Nota.
Creo que de esta manera, ya formateó correctamente las dos matrices; no es necesario formatearlos nuevamente en la devolución de llamada exitosa. Entonces, intenta
data: { labels: data["chartDate"], // Not [chartDate] datasets: [{ data: data["chartResultats"], // Not chartResultats }],O puedes usar eco
echo json_encode($data);
La respuesta de LSerni probablemente conducirá a resolver el problema, ya que aborda lo que considero que lo más importante que falta en la premisa para resolver el chart is returning undefined .
Más allá de eso, veo que cuando obtendría una respuesta, en su función $.AJAX.success es que solo está haciendo una sola asignación que probablemente fallará, porque data.chartResultats y data.chartDate no están definidos. En cambio data son una matriz de objetos que tienen tanto chartResultats como chartDate .
chartResultats = data["chartResultats"]; chartDate = data["chartDate"];Por lo tanto, una solución para producir el resultado previsto (
chartResultats: [10, 30, 20] chartDate: ["16/10", "16/10", "16/10"]) es iterar sobre los datos. Aquí hay una implementación:
var chartResultats = []; var chartDate = []; data.forEach(function(record){ chartResultats.push(record.chartResultats); chartDate.push(record.chartDate); });