jquery - haxis - google charts tutorial español

Google Chart dibuja líneas de tendencia con fecha en el eje x

Question

Necesito dibujar un gráfico de líneas de Google con líneas de tendencia, pero utilizo una solicitud de Ajax para obtener datos para poner dentro

En el archivo ajax, inserto en una matriz los elementos del gráfico y luego lo convierto en JSON así:

$reply= json_encode($array);
echo $reply;

Este es el contenido de mi respuesta ajax:

reply = [
    ["Periodo","Rome","Milan","Test"],
    ["20160830",1,2,3],
    ["20160831",2,3,6],
    ["20160901",2,3,20],
    ["20160902",20,30,12]
  ];

En mi programa, puebla el gráfico así:

var replyJSON = JSON.parse(reply);
var data = google.visualization.arrayToDataTable(replyJSON);

Este es un ejemplo similar de lo que tengo y de lo que haría, pero aquí no puedo replicar la llamada ajax: http://jsfiddle.net/roby492/srrrn9sa/384/

Necesito obtener la respuesta JSON, convertir la cadena de fecha en la fecha de jquery para mostrar correctamente las líneas de tendencia.

¿Cómo puedo hacer esto? ¿O cómo puedo enviar por AJAX el JSON con fecha en lugar de una cadena?

Gracias. Roberto R.

Answer 1

eche un vistazo a este gráfico de php a google a través del ejemplo de ajax

recomendar una configuración similar aquí

el ejemplo crea JSON que es aceptable por google

que permite la creación de la DataTable , directamente desde el JSON

Lo que sigue es un fragmento de esa respuesta, que construye el JSON

$rows = array();
$table = array();

$table[''cols''] = array(
    array(''label'' => ''Time'', ''type'' => ''string''),
    array(''label'' => ''Wind_Speed'', ''type'' => ''number''),
    array(''label'' => ''Wind_Gust'', ''type'' => ''number'')
);

while ($row = mysql_fetch_assoc($sqlResult)) {
  $temp = array();
  $temp[] = array(''v'' => (string) $row[''Time'']);
  $temp[] = array(''v'' => (float) $row[''Wind_Speed'']);
  $temp[] = array(''v'' => (float) $row[''Wind_Gust'']);
  $rows[] = array(''c'' => $temp);
}

$table[''rows''] = $rows;

echo json_encode($table);

utilizar una columna de fecha real en el JSON, se vuelve un poco complicado

principalmente porque los números de los meses en JavaScript se basan en cero, a diferencia de php

entonces, si formatea una fecha en php, necesita reducir el número del mes en 1

que hace una declaración de formato largo

para pasar una fecha en JSON, puede usar el siguiente formato, tenga en cuenta que se pasa como una cadena ...

"Date(2016, 8, 28, 15, 34, 40)" -> lo que equivale a la fecha de hoy
de nuevo, el mes está basado en cero (8 = septiembre)

para construir una fecha en este formato en php, puede usar lo siguiente ...

$date1 = new DateTime();
$date2 = "Date(".date_format($date1, ''Y'').", ".((int) date_format($date1, ''m'') - 1).", ".date_format($date1, ''d'').", ".date_format($date1, ''H'').", ".date_format($date1, ''i'').", ".date_format($date1, ''s'').")";

que produce la "Date(...)" muestra arriba

ajustar el fragmento de la otra respuesta para incluir una columna de fecha, podría verse más o menos así ...

$rows = array();
$table = array();

$table[''cols''] = array(
    array(''label'' => ''Date'', ''type'' => ''date''),
    array(''label'' => ''Wind_Speed'', ''type'' => ''number''),
    array(''label'' => ''Wind_Gust'', ''type'' => ''number'')
);

while ($row = mysql_fetch_assoc($sqlResult)) {
  $date1 = $row[''Date''];
  $date2 = "Date(".date_format($date1, ''Y'').", ".((int) date_format($date1, ''m'') - 1).", ".date_format($date1, ''d'').", ".date_format($date1, ''H'').", ".date_format($date1, ''i'').", ".date_format($date1, ''s'').")";

  $temp = array();
  $temp[] = array(''v'' => (string) $date2);
  $temp[] = array(''v'' => (float) $row[''Wind_Speed'']);
  $temp[] = array(''v'' => (float) $row[''Wind_Gust'']);
  $rows[] = array(''c'' => $temp);
}

$table[''rows''] = $rows;

echo json_encode($table);

obteniendo los resultados anteriores a través de ajax de php, puede crear la tabla directamente

var data = new google.visualization.DataTable(reply);

no es necesario analizar el JSON o utilizar arrayToDataTable