Sparklines in Cognos8-Berichten

Mit JavaScript Sparklines in Cognos-Berichten einbauen

Es ist in Berichten häufig interessant, innerhalb einer Liste kleine Diagramme, sog. Sparklines anzuzeigen. Diese zeigen platzsparend z.B. einen Trend oder eine Verteilung an. Natürlich ersetzen Sie kein umfangreiches Diagramm mit Datenwerten und Legende, aber für eine kurze Übersicht finde ich diese Sparklines, die man häufig in Finanzzeitschriften sieht, sehr interessant.

Um solche Sparklines zu verwenden, benötigt man bestimmte JavaScript-Klassen. Die hier vorgestellten Sparklines basieren auf dem JQuery-Framework. Weitere Informationen zu den JQuery-Sparklines findet man hier.

Der Einbau in einen Cognos-Report ist nicht weiter kompliziert. Zuerst muss man die entsprechenden Klassen importieren:

<script type="text/javascript" src="/../jquery/jquery-latest.min.js"></script>
<script type="text/javascript" src="/../jquery/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="/../jquery/jquery.sparkline.min.js"></script>

Dann muss die Funktion zur Erzeugung der Sparklines in einem HTML-Element eingebaut werden:

<script type="text/javascript">
    $(function() {
        /* Inline sparklines take their values from the contents of the tag */
        /* Use 'html' instead of an array of values to pass options to a sparkline with data in the tag */
        $('.inlinebar').sparkline('html', {type: 'bar', barColor: '#0000cc', height:'15px'} );
    });
</script>

Um nun die Sparklines mit Daten zu versorgen, kann man sich in einem Listbaustein mit folgendem Trick behelfen. Dazu muss man in einer entsperrten Listenzelle ein HTML-Element mit folgendem Code einbauen:

<span class="inlinebar"><span style="visibility:hidden">

Direkt dahinter wird dann ein Datenelement eingefügt, dass die einzelnen Werte kommagetrennt enthält. Und zum Abschluss fügt man ein weiteres HTML-Element mit folgendem Code ein:

</span></span>

Mit dieser Vorgehensweise erreicht man, dass in jeder Zeile der Liste ein kleines Diagramm erscheint. Beispiele dazu sind auf der o.g. Webseite zu finden.