Mein Team arbeitet an einer App in Java, die Projekte durch ein Geschäftsprozessmanagement-Tool schiebt. Jedes Projekt enthält etwa 25-30 Aufgaben, die in einer bestimmten Reihenfolge erledigt werden müssen.
Unter diesen Aufgaben befinden sich etwa sechs oder sieben, die „Workback-Datumsereignisse“ darstellen, die jeweils bis zu vordefinierten aufeinanderfolgenden Fristen abgeschlossen werden müssen
In unserer Datenbank haben wir also etwa 7 Aufgaben, die mit jedem Projekt verknüpft sind, jede mit einer Frist und einer Flagge, die uns sagt, welche der Veranstaltungen abgeschlossen wurden.
Was das Unternehmen interessiert, ist eine grafische Oberfläche, die einem Benutzer zeigt:
Bisher habe ich mich mit einigen Javascript-Diagrammbibliotheken wie chart.js befasst, obwohl es nicht so aussieht, als ob die Schnittstelle genau das bietet, was wir wollen, da viele dieser Bibliotheken rein mathematisch zu sein scheinen.
Ich habe das Gefühl, dass wir dies mit einem unästhetischen Tisch leicht genug erreichen könnten, aber wir würden gerne ein ziemlich gutes Aussehen aus dem End-Feature herausholen.
Ich würde vorschlagen, die Google Charts-API zu verwenden, um ein Zeitachsendiagramm zu erstellen - zB:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
</script>
<div id="example2.1" style="height: 200px;"></div>
Erstellt:
Angelo Fuchs