31 votos

Cómo utilizar las fechas en el eje X con Google chart API?

Es allí una manera de trazar un diagrama con Google chart API para que los valores del eje X son los días en un mes?

Tengo los datos de los puntos que no se incluyen 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 va a separar a cada punto de datos con la distancia relativa con base en el tiempo durante un mes. Esto se puede hacer con Excel, pero ¿cómo puedo calcular y mostrar con gráficos de Google?

Otras soluciones libres similares a los gráficos de Google o una biblioteca libre que puede ser utilizado con ASP.NET también son bienvenidos.

19voto

defines Puntos 4618

ACTUALIZAR ahora se admite directamente en la API de gráficos de uso de los gráficos avanzados", con anotaciones de la línea de tiempo de la función" - http://code.google.com/apis/chart/interactive/docs/gallery/annotatedtimeline.html

He hecho esto en mi Refrito de la Base de datos de Estadísticas de la tabla (aunque las fechas resultó ser espaciados uniformemente, por lo que no es exactamente de demostrar que es hacer esto).

En primer lugar, usted desea conseguir su total período de tiempo, que será similar al de la anchura total de la tabla. Para ello restamos la primera fecha de la última. Yo prefiero usar Unix epoch marcas de tiempo como son números enteros y fáciles de comparar de esta manera, pero fácilmente podría calcular el número de segundos, etc.

Ahora, el bucle a través de sus datos. Para cada fecha queremos que el percentil en el período total que a la fecha es desde el principio (es decir, la fecha más temprana es 0, la última es de 100). Para cada fecha, primero se desea calcular la distancia de la presente fecha a partir de la fecha más temprana en el conjunto de datos. Esencialmente, "¿qué tan lejos estamos desde el principio". Así, reste la primera fecha a partir de la presente fecha. Entonces, para encontrar el percentil, dividimos la distancia de la presente fecha por el general período de tiempo, y luego se multiplica por 100 y truncar o alrededor de cualquier decimal para dar a nuestros integral de la coordenada x.

Y es tan simple como eso! El x-valores van desde 0 (el lado izquierdo de la gráfica) a 100 (el lado derecho) y cada punto de datos se sitúan a una distancia desde el inicio respectivos de es cierto que la distancia temporal.

Si usted tiene alguna pregunta, no dude en preguntar! Me pueden enviar pesudocode o PHP, si lo desea.

9voto

egor83 Puntos 646

Yo tenía el mismo problema, encontrar los diagramas de dispersión en Google Charts, que hace exactamente lo que es necesario.

Aquí está el código que terminó con (tomó el suyo como un 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 meses a contar desde 0, es decir, de enero es 0, febrero es 1, ..., diciembre 11.

8voto

BrianAdkins Puntos 548

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

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

1voto

David Caunt Puntos 30636

Esto se puede hacer con Google charts con bastante facilidad, pero su aplicación debe calcular las etiquetas

El chxl x del gráfico de la etiqueta de parámetro es el que usted necesita. El siguiente ejemplo las etiquetas de un eje y con los números en 50 pasos, y la parte inferior con las fechas

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

0voto

Mawg Puntos 7387

Hai. Estoy pensando que a lo largo de las mismas líneas. Puedo prever los problemas donde las etiquetas de sobrescribir el uno al otro, y pueden pensar sólo dos enfoques.

1) averiguar cómo muchos de los personajes en cada fecha, según formato (lun/mar, el lunes/martes, 1 de enero/1 de febrero, 1 de enero, 29 de febrero, 14/2/2010 ..etc), a continuación, calcular cuántas etiquetas se puede encajar en su gráfico de ancho (que podría ser retorcido, involucrando char ancho en píxeles (más fácil para las fuentes fijas), o simplemente un par de ensayo y errores).

Por supuesto, las etiquetas se podría alinear directamente con los datos.

2) el uso de múltiples etiquetas del eje X y el lugar de su fechas verticalmente.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X