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

Question

¿Hay alguna forma 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 un gráfico que separará 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 se aceptan otras soluciones gratuitas similares a la tabla de Google o una biblioteca gratuita que se puede usar con ASP.NET.

Answer 1

ACTUALIZACIÓN Esto se admite ahora directamente en la API gráfico utilizando las gráficas avanzadas característica "anotada gráfico" - https://developers.google.com/chart/interactive/docs/gallery/annotationchart

he hecho esto en mi carta ReHash Database Statistics (a pesar de que la fecha resultó ser uniformemente espaciados, por lo que no demuestra exactamente que está haciendo esto).

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

Ahora, revise sus datos. Para cada fecha, queremos 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 debe 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 de la fecha actual por el período total de tiempo, y luego multiplicamos por 100 y truncamos o redondeamos cualquier decimal para obtener nuestra integral coordenada x.

¡Y es así de simple! Sus valores de x variarán desde 0 (el lado izquierdo del gráfico) hasta 100 (el lado derecho) y cada punto de datos se encontrará a una distancia desde el inicio respectiva de su verdadera distancia temporal.

¡Si tiene alguna pregunta, no dude en 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 tabla x etiqueta chxl es el que necesita. El siguiente ejemplo etiquetas de un eje y con números en pasos de 50, y la parte 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

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

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

Answer 4

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 en cada fecha ,, dependiendo del formato (lunes a jueves, lunes/martes, 1 de enero/1 de febrero, 1 de enero, 29 de febrero, 14/2/2010 ..etc) a continuación, calcule la cantidad de etiquetas que puede caber en el ancho de su tabla (que puede ser complicado, involucrando ancho de página en píxeles (más fácil para fuentes fijas), o solo algunos errores de prueba &).

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

2) utilice varias etiquetas del eje X y coloque las fechas en vertical.

Answer 5

Tuve el mismo problema, encontré scatter plots en Google Charts, hace exactamente lo que es necesario.

Aquí está el código que terminó con (Tomé 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} 
      ); 
} 

Nota que parecen contar desde 0 meses, es decir, enero es 0, febrero es 1, ..., Diciembre es 11.