javascript - tipos - ¿Cómo usar las fechas en el eje X con la API de Google Chart?

google charts tutorial español

Question

¿Hay alguna manera de trazar un gráfico con Google chart API para que los valores del eje X sean días en un mes?

Tengo puntos de datos que no se proporcionan con la misma frecuencia. Por ejemplo:

Date - Value
1/1/2009 - 100
1/5/2009 - 150
1/6/2009 - 165
1/13/2009 - 200
1/20/2009 - 350
1/30/2009 - 500

Quiero hacer una tabla que separe cada punto de datos con la distancia relativa en función del tiempo durante un mes. Esto se puede hacer con Excel, pero ¿cómo puedo calcularlo y mostrarlo con Google Chart?

También son bienvenidas otras soluciones gratuitas similares a Google chart o una biblioteca gratuita que se puede usar con ASP.NET.

Answer 1

ACTUALIZAR Ahora esto se admite directamente en la API de gráficos utilizando la función de gráficos avanzados "gráfico anotado" - https://developers.google.com/chart/interactive/docs/gallery/annotationchart

He hecho esto en mi tabla ReHash Database Statistics ( Estadísticas de la base de datos ReHash) (aunque las fechas resultaron estar espaciadas uniformemente, por lo que no demuestra exactamente que lo esté haciendo).

En primer lugar, desea obtener su período de tiempo general , que será análogo al ancho total de su tabla. Para hacer esto, restamos la fecha más temprana de la última. Prefiero usar marcas de tiempo Unix-epoch ya que son números enteros y fáciles de comparar de esta manera, pero se puede calcular fácilmente la cantidad de segundos, etc.

Ahora, revisa tus datos. Para cada fecha, queremos el percentil en el período total que la fecha es desde el comienzo (es decir, la fecha más temprana es 0, la última es 100). Para cada fecha, primero desea calcular la distancia de la fecha actual desde la fecha más temprana en el conjunto de datos. Esencialmente, "qué tan lejos estamos desde el principio". Por lo tanto, reste la fecha más temprana de la fecha actual. Luego, para encontrar el percentil, dividimos la distancia de la fecha actual por el período total de tiempo , y luego multiplicamos por 100 y truncamos o redondeamos cualquier decimal para dar nuestra coordenada x integral.

¡Y es tan simple como eso! Sus valores de x van desde 0 (el lado izquierdo del gráfico) hasta 100 (el lado derecho) y cada punto de datos se encontrará a una distancia del comienzo respectiva de su distancia temporal real.

¡Si tiene alguna pregunta, sientase con libertad de preguntar! Puedo publicar pesudocode o PHP si lo desea.

Answer 2

Esto se puede hacer con los gráficos de Google con bastante facilidad, pero su aplicación debe calcular las etiquetas

El parámetro chxl chart x label es el que necesita. El siguiente ejemplo etiqueta un eje y con números en 50 pasos, y el inferior con fechas

chxl=0:|0|50|100|150|200|250|300|350|400|450|500|1:|16/01/2009|26/01/2009|6/02/2009

Answer 3

Hai. Estoy pensando en la misma línea que tú. Puedo prever problemas donde las etiquetas se sobrescriben entre sí, y solo se pueden pensar dos enfoques.

1) averiguar cuántos caracteres hay en cada fecha, según el formato (lunes a jueves, lunes y martes, 1 de enero / 1 de febrero, 1 de enero, 29 de febrero, 14/2/2010, etc.) y luego calcular cuántas etiquetas puede caber en el ancho de su gráfico (que puede ser complicado, con ancho de caracteres en píxeles (más fácil para fuentes fijas), o solo unos pocos intentos y errores).

Por supuesto, sus etiquetas pueden alinearse directamente con cualquier dato.

2) use múltiples etiquetas del eje X y coloque sus fechas verticalmente.

Answer 4

Parece que ahora puede hacer esto con gráficos avanzados:

http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html

Answer 5

Tuve el mismo problema, encontré diagramas de dispersión en Google Charts, hace exactamente lo que es necesario.

Aquí está el código con el que terminé (tomó el de ellos como punto de partida):

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn(''date'', ''Date'');
    data.addColumn(''number'', ''Quantity'');
    data.addRow([new Date(2011, 0, 1), 10])
    data.addRow([new Date(2011, 1, 1), 15])
    data.addRow([new Date(2011, 3, 1), 40])
    data.addRow([new Date(2011, 6, 1), 50])


    // Create and draw the visualization.
    var chart = new google.visualization.ScatterChart(
        document.getElementById(''visualization''));
    chart.draw(data, {title: ''Test'',
                      width: 600, height: 400,
                      vAxis: {title: "cr", titleTextStyle: {color: "green"}},
                      hAxis: {title: "time", titleTextStyle: {color: "green"}},
                      lineWidth: 1}
              );
}

Tenga en cuenta que parecen contar meses desde 0, es decir, enero es 0, febrero es 1, ..., diciembre es 11.