Sparklines (Win/Loss Grafik)

Hiermit möchte ich mal meine Begeisterung für Sparklines öffentlich machen! Ein großes Danke an Herrn Tufte für diese super Idee!

Wie komme ich nun gerade drauf? Ich bin ja am Vorbereiten für meine SQLDays Vorträge und in diesen wird es auch um Sparklines gehen.

Hier ein erstes Beispiel aus meinem Tool:

Cool, was? Das ist mal echte Raketenwissenschaft, oder? :o)

Ok, was ist das..?

Dieser putzige Haufen Pixels ist eine Sparkline Win/Loss Grafik. Grün/Oben für gewonnen und Rot/Unten für verloren. Was lässt sich damit nun ausdrücken? Diese Darstellungsform ist äussert flexibel einsetzbar. Hinter diesen 24 Balken könnten sich zum Beispiel:

• die letzten 24 Monate im durchwachsenen Leben eines Vertriebsmitarbeiters verstecken. Bei Grün hat er seine Ziele erreicht, bei Rot halt nicht.
• die letzten 24 Anrufe eines Callcenter Agents. Zeitschriften Abo verkauft oder nicht.
• die letzten 24 verkauften Reisen im Reisebüro um die Ecke mit bzw. ohne verkaufter Rücktrittsversicherung.

Es kommt halt auf den Kontext an, aber bevor der Analyst im OLAP Client oder auch ein "einfacher" Konsument eines Berichts 17 oder mehr Zahlen vergleichen muss mit Zielen usw., ist so ein "auf-einen-Blick" Ding eine feine Sache.

Wie habe ich das erstellt? Mit ein paar Zeilen asp.net Code, weil das Ziel für die Vorträge sind ja Webclients.

Ich übergebe zwei Parameter:

• v ist eine Bitmask, jede 1 = Grün, jede 0 = Rot
• l ist die Anzahl der Blöcke (getestet ist das bis 64 Blöcke)

Die eigentliche Anwendung im Hintergrund muss dann "natürlich" für die jeweilige Berechnung der Bitmask sorgen!

void Page_Load(Object sender, EventArgs e)
{
    int i;
    int l = Convert.ToInt32(Request["l"]);
    Int64 value = Convert.ToInt64(Request["v"]);
    int x;

    Bitmap objBitmap = new Bitmap(5*l+20,30);

    Graphics objGraphic = Graphics.FromImage(objBitmap);
    SolidBrush redBrush   = new SolidBrush(Color.Red);
    SolidBrush greenBrush = new SolidBrush(Color.Green);
    SolidBrush whiteBrush = new SolidBrush(Color.White);

    objGraphic.FillRectangle(whiteBrush, 0, 0, 5*l+20, 30);

    for (i = 0; i < l; ++i)
    {
        x = (int)(value >> i)  & 1;
        if( x == 1)
        objGraphic.FillRectangle(greenBrush, 10 + (i * 5), 10, 4, 7);
        else
        objGraphic.FillRectangle(redBrush, 10 + (i * 5), 18, 4, 7);
    }

    Response.ContentType = "image/jpeg";
    objBitmap.Save (Response.OutputStream, ImageFormat.Jpeg);

}