Bene, sembra che tu stia cercando più di una vista di diagramma di Gantt, anche se se vuoi semplicemente segnare la data dovrebbe essere completata una pietra miliare, allora una tempistica funzionerebbe.
Google API di visualizzazione
Prima di tutto sarebbe quella di prendere uno sguardo al Google Visualization API. Nello specifico il annotated timeline visualization.Questo è in realtà molto simile alla timeline utilizzata su Google finance website. Usando questa vista ogni progetto potrebbe essere una linea orizzontale attraverso la vista, con le pietre miliari rilevanti contrassegnate per ogni progetto. Si noti che i marker sono interattivi. Poiché questo è tutto Javascript, puoi anche disporre di controlli incrociati, quindi fare clic su qualcosa sulla timeline potrebbe modificare un'altra visualizzazione sulla stessa pagina, ad esempio.
È possibile provare diverse configurazioni di tutte le visualizzazioni disponibili utilizzando lo Google Code Playground. Questo dovrebbe fornire un modo semplice per verificare se questo (o uno diverso) soddisferà le tue esigenze.
Ho fatto qualche esperimento con il parco giochi del codice. Prova il codice qui sotto se vuoi. Puoi copiarlo/incollarlo nell'editor del codice playground.
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Project');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Project');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows(7);
data.setValue(0, 0, new Date(2008, 1 ,1));
data.setValue(0, 1, 1);
data.setValue(0, 2, 'P1:MS1');
data.setValue(0, 3, 'Project begins');
data.setValue(1, 0, new Date(2008, 1 ,2));
data.setValue(1, 1, 1);
data.setValue(1, 4, 2);
data.setValue(1, 5, 'P2:MS1');
data.setValue(1, 6, 'Project begins');
data.setValue(2, 0, new Date(2008, 1 ,3));
data.setValue(2, 1, 1);
data.setValue(2, 4, 2);
data.setValue(3, 0, new Date(2008, 1 ,4));
data.setValue(3, 1, 1);
data.setValue(3, 4, 2);
data.setValue(3, 5, 'P2:MS2');
data.setValue(3, 6, 'Completed development');
data.setValue(4, 0, new Date(2008, 1 ,5));
data.setValue(4, 1, 1);
data.setValue(4, 2, 'P1:MS2');
data.setValue(4, 3, 'Completed testing');
data.setValue(4, 4, 2);
data.setValue(5, 0, new Date(2008, 1 ,6));
data.setValue(5, 1, 1);
data.setValue(5, 4, 2);
data.setValue(6, 0, new Date(2008, 1 ,7));
data.setValue(6, 4, 2);
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
annotatedtimeline.draw(data, {
'displayAnnotations': true,
'displayExactValues': true,
'displayRangeSelector' : false,
'displayZoomButtons': false,
'legendPosition': 'newRow',
'max': 3,
'min': 0,
'scaleType': 'allfixed',
'thickness': 2,
});
}
Google Charts API
Un'altra opzione sarebbe quella di utilizzare il Google Charts API per generare un diagramma di Gantt. Questo è un po 'più complicato dal momento che non ha una visualizzazione per questo fuori dalla scatola. Tuttavia, usando un grafico a barre orizzontale sarebbe possibile girare il tuo. This article vi porta attraverso i passi necessari per fare un diagramma di Gantt che sembra qualcosa di simile:
Il punto interessante è che il diagramma di Gantt sopra è generato dinamicamente tramite i grafici API utilizzando un URL. Prova a cliccare sul seguente URL:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
Beh credo che sia così piuttosto fresco.
FusionWidgets v3
Come suggerimento finale si poteva guardare FusionWidgets, che ha alcune molto potenti opzioni di visualizzazione. Tutti i loro widget sono basati su flash. Questo è elencato per ultimo perché non è opensource e non è gratuito. Non l'ho usato personalmente, a differenza dei due precedenti, ma gli esempi sembrano grandiosi.
Spero che questi suggerimenti siano d'aiuto.
Una cronologia con collegamenti ipertestuali? – tster
sì. . . . . . – leora
Se volevi uno strumento probabilmente dovresti averne chiesto uno. –