Come utilizzare le date nell'asse X con l'API del grafico di Google?

Question

C'è un modo per tracciare un grafico con l'API del grafico di Google in modo che i valori dell'asse X siano giorni in un mese?

I punti dati non sono forniti con la stessa frequenza. Per esempio:

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 

Voglio fare un grafico che separerà ogni punto di dati con la distanza relativa in base al tempo nel corso di un mese. Questo può essere fatto con Excel, ma come posso calcolarlo e visualizzarlo con il grafico di Google?

Altre soluzioni gratuite simili a Google chart o una libreria gratuita che può essere utilizzata con ASP.NET sono anche benvenute.

Answer 1

UPDATE Questo è ora supportata direttamente nel Chart API utilizzando i grafici avanzati "grafico annotata" caratteristica - https://developers.google.com/chart/interactive/docs/gallery/annotationchart

ho fatto questo sul mio grafico ReHash Database Statistics (anche se le date si è rivelata in modo uniforme distanziati, quindi non esattamente dimostrare che sta facendo questo).

Per prima cosa, si desidera ottenere il periodo complessivo, che sarà analogo alla larghezza complessiva del grafico. Per fare ciò sottraggono la data più antica dalla più recente. Preferisco usare i timestamp di Unix-epoch perché sono interi e facili da confrontare in questo modo, ma puoi calcolare facilmente il numero di secondi, ecc.

Ora, passa in rassegna i tuoi dati. Per ogni data desideriamo il percentile nel periodo complessivo in cui la data è dall'inizio (vale a dire la prima data è 0, l'ultima è 100). Per ogni data, per prima cosa si desidera calcolare la distanza della data attuale dalla data più recente nel set di dati. In sostanza, "quanto siamo lontani dall'inizio". Quindi, sottrarre la data meno recente dalla data attuale. Quindi, per trovare il percentile, si divide la distanza della presente data dal periodo di tempo complessivo , e quindi moltiplicare per 100 e troncare o rotonda qualsiasi decimale dare ai nostri integrali ascissa.

Ed è così semplice! I valori x vanno da 0 (il lato sinistro del grafico) a 100 (il lato destro) e ciascun punto dati si troverà ad una distanza dall'inizio della rispettiva distanza temporale reale.

Se avete domande, non esitate a chiedere! Posso postare pesudocode o PHP se lo si desidera.

Answer 2

Questo può essere fatto con Google grafici abbastanza facilmente, ma l'applicazione deve calcolare le etichette

Il parametro grafico x etichetta chxl è quello che vi serve. Il seguente esempio etichette un asse y con numeri in 50 passi, e la parte inferiore con date

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

Sembra che ora è possibile farlo con i grafici avanzati:

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

Answer 4

Hai. Sto pensando come te.Posso prevedere problemi in cui le etichette si sovrascrivono a vicenda e possono pensare solo a due approcci.

1) capire quanti caratteri in ciascuna data, a seconda del formato (lun/mar, lunedì/martedì, 1 gennaio/1 feb, 1 gennaio, 29 febbraio, 14/2/2010 .. etc) quindi calcola il numero di etichette che puoi adattare sulla larghezza del grafico (che potrebbe essere irregolare, comportando la larghezza del carattere in pixel (più facile per i caratteri fissi) o solo alcuni errori di prova &).

Ovviamente, le etichette potrebbero essere allineate direttamente con qualsiasi dato.

2) utilizzare più etichette dell'asse X e posizionare le date in verticale.

Answer 5

Ho avuto lo stesso problema, ho trovato scatter plots su Google Charts, fa esattamente ciò che è necessario.

Ecco il codice che ho finito con (loro preso come punto di partenza):

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 che sembrano contare mesi da 0, vale a dire di gennaio è 0, Febbraio è 1, ..., Dicembre è 11.