Gráfica desde Base de Datos

[olallaip]

Estoy intentando hacer una gráfica con los datos sacados de una Base de Datos en MySQL.
En MySQL tengo varias columnas: Date, Pcr

Mis archivos son: Data.php y Chart.php

Data.php
$query = "SELECT * FROM `table1` ORDER BY Date LIMIT 0 , 100";
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());

$dates=array();

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$dates[] = $row['Date'];
$dates[] = $row['Pcr'];
}
echo json_encode($dates);

Obtengo el siguiente array:
["2015-06-14","0.77","2015-06-20","0.79","2015-09-24","0.88","2015-10-26","0.8","2015-10-30","0.7"]

Me gustaría crear una gráfica dinámica, ya que los datos del array se van actualizando cada vez que se introduce un nuevo valor en la base de datos.

Por ahora lo que tengo es una gráfica estática con los arrays obtenidos.

Chart.php
$(document).ready(function(){
$.ajax({
type:'POST',
url:'data.php',

success:function(data){

var valores = eval(data);
var date1 = valores[0];
var pcr1 = valores[1];
var date2 = valores[2];
var pcr2 = valores[3];
var date3 = valores[4];
var pcr3 = valores[5];
var date4 = valores[6];
var pcr4 = valores[7];


var Datos = {
labels : [date1,date2,date3,date4],
datasets : [
{

fillColor : 'rgba(255,0,0,0.1)',
strokeColor :'rgba(255,0,0,100)',
pointColor : 'rgba(255,0,0,100)',
pointStrokeColor:"#e32636",
pointHighlightFill:"#bbf",
pointHighlightStroke:"rgba(255,0,0,255)",

data : [pcr1,pcr2,pcr3,pcr4]
}
]
}

var contexto = document.getElementById('grafico').getContext('2d' );
window.Barra = new Chart(contexto).Line(Datos, { responsive : true });
}
});
return false;
}
)

¿Podría alguien ayudarme a entender qué es lo que tengo que poner en Labels:[], y en Data:[]?

Gracias de antemano

[matake]

No es una solución a tu problema pero así a la primera vista tienes una cosa sin sentido en Data.php

Esto esta mal

Código PHP:

//esto esta ok
$dates=array();
 
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
//esto no tiene sentido
//esto solo hace que el valor actual reemplaza el antiguo valor en el array $dates
//O sea siempre vas a quedar con el ultimo valor aunque tengas muchas siempre te quedas con el ultimo valor
$dates[] = $row['Date'];
//al fin y a cabo es solo esto que se va a quedar en $dates y esto solo la ultima vez que pasa por while
$dates[] = $row['Pcr']; 
}
echo json_encode($dates);
 

Necesitas ante todo entender un poco lo que haces para poder avanzar porque lo de antes no es que tenga algun error ... es que no tiene sentido

Lo logico seria algo asi:

Código PHP:

//esto esta ok
$dates=array();
 
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
//o sea añadir los valores actuales sin borrar los antiguos
//ademas los he puesto en un array [] para luego tenerlos juntos ya que son de la misma fila $row
array_push($dates,[$row['Date'],$row['Pcr']]);
 
//esto es solo un ejemplo depende como quieres que se envian al cliente
}
echo json_encode($dates);
 

Como he dicho al principio esto no resuelve tu problema pero es un paso en la dirección correcta

[Alexis88]

Estimado matake:

La forma de añadir elementos al array que utiliza olallaip, no solo es correcta sino que es más eficiente que la función array_push(), la cual se recomienda utilizar para añadir varios elementos a la vez.

Pienso que añadir cada par fecha-valor en un array y luego este al principal, podría ayudar a llevar un control, pero primero habría que saber qué plugin está utilizando para poder ver qué se puede mejorar.

Un saludo

[matake]

Tienes toda la razon Alexis88
Confundi $dates[] = $row['Date']; con $dates = $row['Date'];

Entonces el consejo que di a olallaip de "entender primero lo que haces" se me aplica primero a mi

Perdon por haberme metido en donde no debia

Saludos

[olallaip]

Gracias por las respuestas. Efectivamente, los arrays salen bien, pero después no se cómo llevarme esos datos a la gráfica...
Algún consejo sobre cómo puedo poner aquí en labels: los datos recogidos en forma de array por json?

Código PHP:

  $(document).ready(function(){ 
$.ajax({ 
type:'POST', 
url:'data.php', 
 
success:function(data){ 
 
var Datos = { 
labels : [date1,date2,date3,date4]  
   

Hasta ahora sólo he conseguido sacar algo escribiendo los arrays 1 por 1:

Código PHP:

  var date1 = valores[0]; 
var pcr1 = valores[1]; 
var date2 = valores[2]; 
var pcr2 = valores[3]; 
var date3 = valores[4]; 
var pcr3 = valores[5]; 
var date4 = valores[6]; 
var pcr4 = valores[7];  
   

Pero me gustaría tener algo más genérico, donde se actualice la gráfica sola, cada vez que se introduce un nuevo valor.

Gracias

[Alexis88]

Sería más cómodo si agruparas las fechas en un array antes de devolver la respuesta desde PHP, de esta manera, podrías asignar directamente el array resultante a labels. Para esto, tendrías que devolver un array que contenga a dos arrays; uno con las fechas y el otro con los otros datos.

Por cierto, si en el método $.ajax() añades la propiedad dataType con el valor "json", no será necesario el uso de la función eval() cuyo uso es poco recomendable por temas de seguridad. Incluso podrías usar el método JSON.parse() en su lugar.

Un saludo