Kennzahlen dargestellt mit Chart.js, Teil 1

Digitalisierung im Projektmanagement

Sven

Gerade große IT-Projekte sind eine besondere Herausforderung, wenn diese einerseits Agil umgesetzt werden sollen, aber die Erfolgsfaktoren Budget, Zeit und Qualität erreicht werden müssen. Die Gefahr besteht, das Controlling und Planung überhand und mehr Zeit in Anspruch nehmen, als in einem klassischen Vorgehensmodell. Die gewonnene Flexibilität durch das agile Vorgehen wirkt sich hier aus. Wenn die Rahmenbedingungen aber keinen Handlungsspielraum bezüglich der Erfolgsfaktoren zulassen, kann der Weg der Digitalisierung eine Lösungsmöglichkeit bieten, oder anders gesagt: das ist der Ausweg. Agile PM Tools (wie z.B. Jira), aber auch Ressourcenplanungen und weitere liefern wichtige Datengrundlagen. Eine Automatisierung der Zusammenführung aus verschiedenen Quellen und der Aufbereitung der Daten muss möglich werden.

In dieser Serie dokumentiere ich in nächster Zeit einen Prototyp zur automatisierten Darstellung von Leistungskennzahlen (Key Performance Indicator - KPI). Im ersten Teil wird zunächst mit Hilfe der Chart.js API eine Möglichkeit gezeigt, wie diese in Confluence eingebunden werden kann. Weitere Teile beschäftigen sich mit dem Backend unter Einsatz der Node.js, also Java Script auf der Serverseite. Datenspeicherung soll LokiJS übernehmen, eine sehr schnelle In-Memory-Datenbank geschrieben in Java Script. Zum Abschluss soll das Ganze als Add-on in Confluence integriert werden. Wobei die Lösung von den Tools der Firma Atlassian unabhängig funktionieren soll. Ob das alles dann so funktioniert, wie ich mir das vorstelle, oder wie letztendlich die Lösung aussehen muss, das soll der Prototype hervorbringen.

Warum Java Script?

Es gibt die unterschiedlichsten Meinungen für und wider Java Script. Aber diese Diskussion werde ich nicht führen wollen. Für mich ist diese Sprache aufgrund der Verfügbarkeit auf den verschiedensten Plattformen einer der großen Vorteile und erlaubt in diesem Fall die Darstellung von Charts auf meinem PC und auf meinem iPad und einem Android Tablet mit nur einer Codebasis, vielleicht auch integrierbar in einem Tool meiner Wahl (z.B. Confluence). Außerdem gibt es inzwischen sehr viele und ausgereifte APIs. Das Rad muss nicht immer wieder neu erfunden werden und ich kann mich auf das wesentliche konzentrieren. Und aufgrund ihres prototypischen Charakters lassen sich sehr schnelle Ergebnisse erzielen. Früher wurden VBA-Scripte für Excel erstellt oder mit eines der dBase-Derivaten schnell kleine Reportings geschrieben. Da sehe ich Java Script durchaus in der Rolle des würdigen Nachfolgers, zumindest um meine alltäglichen Aufgaben zu vereinfachen.

Einbinden in Confluence

Hier wird beschrieben, was zu tun ist, um Java Script Bibliotheken in Seiten einbinden zu können. Zumindest in der aktuellen Version stimmt das Verzeichnis nicht ganz, deswegen hier meine Version für das Einbinden der Bibliothek: src="/includes/js/Chart.bundle.js"

Zusätzlich muss natürlich die Chart.bundle.js in das entsprechende Verzeichnis kopiert werden.

Der nächste wichtige Schritt, wird hier beschrieben. Das HTML Makro muss aktiviert sein. Dazu wird das „html (html-xhtml)“-Modul im HTML Macro Add-on aktiviert. Jetzt kann über das HTML Makro folgendes Script eingefügt werden:

<canvas id="myChart" style="max-height:400px;max-width:400px;"></canvas>
<script>
var ctx = document.getElementById("myChart");

var data = {
    datasets: [{
        data: [             5,            15,            80,],
backgroundColor: ["#FF6384","#FFCE56","#4BC0C0",],
    },
{        data: [            30,            30,            40,],
backgroundColor: ["#FF6384","#FFCE56","#4BC0C0",],
    },
{        data: [            60,            20,            20,],
backgroundColor: ["#FF6384","#FFCE56","#4BC0C0",],
    },
{        data: [            80,            10,            10,],
backgroundColor: ["#FF6384","#FFCE56","#4BC0C0",],
    }
 ],
    labels: [        "Offen",        "in Arbeit",        "Fertig",    ]
};

var myChart = new Chart(ctx, {
    data: data,
    type: 'pie'
});
</script>

Wichtig ist, die Größe des Canvas über das Style-Attribut festzulegen, da ansonsten der komplette Bereich abgedeckt wird. Width und Height helfen hier (in Confluence) nicht weiter. Das gleiche Script habe ich auch in meinem Blog verwendet.