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

StackOverflow https://stackoverflow.com/questions/1020061

Pregunta

¿Hay alguna forma de trazar un gráfico con la API de gráficos de Google 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 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 el gráfico de Google?

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

¿Fue útil?

Solución

  

ACTUALIZACIÓN Esto ahora se admite directamente en la API de gráficos utilizando los gráficos avanzados "gráfico anotado" característica - https://developers.google.com/chart/interactive/docs/ gallery / annotationchart

He hecho esto en mi ReHash Database Statistics gráfico (aunque las fechas resultaron estar espaciadas uniformemente, por lo que no demuestra exactamente que está haciendo esto).

Primero, desea obtener su período de tiempo general , que será análogo al ancho total de su gráfico. Para hacer esto, restamos la fecha más temprana de la más reciente. Prefiero usar las marcas de tiempo de Unix-epoch ya que son enteros y fáciles de comparar de esta manera, pero podría calcular fácilmente la cantidad de segundos, etc.

Ahora, recorra sus datos. Para cada fecha, queremos el percentil en el período general en que la fecha es desde el principio (es decir, la fecha más temprana es 0, la más reciente 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, "cuán 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 de tiempo general , y luego multiplicamos por 100 y truncamos o redondeamos cualquier decimal para dar nuestra integral coordenada x .

¡Y es tan simple como eso! Sus valores de x variarán de 0 (el lado izquierdo del gráfico) a 100 (el lado derecho) y cada punto de datos se ubicará a una distancia desde el inicio, respectivamente, de su verdadera distancia temporal.

Si tiene alguna pregunta, ¡no dude en preguntar! Puedo publicar pesudocode o PHP si lo deseo.

Otros consejos

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.

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 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

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

1) calcule cuántos caracteres en cada fecha, según el formato (lunes / martes, lunes / martes, 1 de enero / 1 de febrero, 1 de enero, 29 de febrero, 14/2/2010 ..etc) luego calcule cuántas etiquetas puede caber en el ancho de su gráfico (lo que puede volverse retorcido, lo que implica un ancho de caracteres en píxeles (más fácil para fuentes fijas), o solo unos pocos errores de prueba y error).

Por supuesto, sus etiquetas podrían alinearse directamente con cualquier dato.

2) usa múltiples etiquetas del eje X y coloca tus fechas verticalmente.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top