Tipps, Regeln und Beispiele zum Customizen von Charts

Datumswerte pro Monat stapeln

Ziel

Will man ein gestapeltes Chart mit Datumswerten bauen und diese pro Monat stapeln, aber die Datumswerte sind nicht am gleichen Tag, werden die Datenpunkte nicht gestapelt.

Lösung

Achsencustomizing öffnen
- X-Achse (DateTime)
  - IntervalType = "Months" – Nur Monate auf der X-Achse anzeigen
  - LabelFormat = "MMM" – Nur Monatskürzel als Beschriftung
  - RoundToIntervalType = "true" – Datumswerte auf Monatsanfang runden

Die Ticks auf den Achsen sind das Ende eines Monats, nicht der Anfang des Nächsten.

Spalten- und Balken-Charts mit mehreren Datenserien

Ziel

Bei Spalten- und Balken-Charts wird für jede Datenserie für den X- bzw. Y-Wert ein eigener Bereich reserviert. Sind z. B. 3 Datenserien und 3 X-Werte vorhanden, erhält jede Datenserie 1/3 des Platzes pro X-Wert.
Ist die Gruppierung aktiviert, entstehen ebenfalls mehrere Datenserien – das gleiche Problem tritt dann auf.

Lösung

Mit dem Parameter Gruppierung der Datenserie können mehrere Datenserien auf demselben X-Wert zusammengefasst werden.

Gilt nur für Versionen vor dem Release Web 3.1.0 – ab diesem Release ist die Gruppierung nicht mehr erforderlich.

Beispiele

JSON-Einstellungen für Risiko-Charts

Ziel

JSON-Einstellungen für eine Risiko-Chart mit Legende sowie beschrifteten X- und Y-Achsen.

Lösung

Chart-Einstellungen:

JSON

{
    "Chart": {
        "Type": "Risk",
        "Title": "@chart_project_by_risk"
    },
    "Legend": {
        "Enabled": "true",
        "Position": "Auto"
    },
    "YAxis": {
        "Labels": [
            "@chart_label_project_by_risk_low",
            "@chart_label_project_by_risk_medium",
            "@chart_label_project_by_risk_high"
        ],
        "Title": "@chart_label_project_by_risk_chance"
    },
    "XAxis": {
        "Labels": [
            "@chart_label_project_by_risk_low",
            "@chart_label_project_by_risk_medium",
            "@chart_label_project_by_risk_high"
        ],
        "Title": "@chart_label_project_by_risk_damage"
    },
    "Serieses": {
        "SeriesSet": [
            {
                "Series": {
                    "Text": "amount",
                    "ActionDF": "chart_action",
                    "Area": "source_project_by_risk_grouped",
                    "XValue": "dmg_dimension",
                    "YValue": "probability"
                }
            }
        ]
    }
}

Beispiel

Risiko-Charts mit mehreren Dimensionen

Ziel

JSON-Konfiguration für eine Risiko-Chart mit mehr als drei Dimensionen. Die Standardfarben können mit dem Parameter ColorPalette überschrieben werden – in diesem Fall verteilen sich die Farben annähernd gleichmäßig über das gesamte Chart.

Lösung

Chart-Einstellungen:

JSON

{
    "Chart": {
        "Type": "Risk"
    },
    "Serieses": {
        "Marker": {
            "Enabled": "false"
        },
        "SeriesSet": [
            {
                "Series": {
                    "Text": "counter",
                    "Area": "chart_risks_grouped",
                    "InitiallyVisible": "true",
                    "XValue": "dmg_dimension",
                    "YValue": "probability"
                }
            }
        ]
    },
    "XAxis": {
        "Type": "Category",
        "Labels": [
            "$Unbedeutend",
            "$Niedrig",
            "$Mittel",
            "$Hoch",
            "$Kritisch"
        ],
        "Title": "@chart_x_title"
    },
    "YAxis": {
        "Type": "Category",
        "Labels": [
            "$Unbedeutend",
            "$Niedrig",
            "$Mittel",
            "$Hoch",
            "$Kritisch"
        ],
        "Title": "@chart_y_title"
    }
}

Beispiel

Risiko-Charts mit Farbmatrix

Ziel

JSON-Konfiguration für eine Risiko-Chart mit bestimmten Farbbereichen, die über den Parameter ColorMatrix festlegt werden.
- Damit können feste Farben für bestimmte Risikobereiche definiert werden.

Chart-Einstellungen:

JSON

{
    "Chart": {
        "Type": "Risk"
    },
    "Serieses": {
        "Marker": {
            "Enabled": "false"
        },
        "SeriesSet": [
            {
                "Series": {
                    "Text": "counter",
                    "Area": "chart_risks_grouped",
                    "InitiallyVisible": "true",
                    "XValue": "dmg_dimension",
                    "YValue": "probability"
                }
            }
        ]
    },
    "Heatmap": {
        "ColorMatrix": [[ 1, 1, 2, 2], [0, 1, 1, 2], [0, 0, 1, 2], [0, 0, 0, 1]],
        "ColorRanges": [
            { "From": 0, "To": 0, "Color": "#438757" },
            { "From": 1, "To": 1, "Color": "#ffdf8c" },
            { "From": 2, "To": 2, "Color": "#ef0000" }
        ]
    },
    "XAxis": {
        "Type": "Category",
        "Labels": [
            "$Niedrig",
            "$Mittel",
            "$Hoch",
            "$Kritisch"
        ],
        "Title": "@chart_x_title"
    },
    "YAxis": {
        "Type": "Category",
        "Labels": [
            "$Niedrig",
            "$Mittel",
            "$Hoch",
            "$Kritisch"
        ],
        "Title": "@chart_y_title"
    }
}

Beispiel

Prozess-Chart

Ziel

JSON-Konfiguration für eine Prozess-Chart zur Darstellung von Projektphasen. Jeder Schritt zeigt den Phasennamen (XValue) oberhalb der Timeline an und wird über YValue (Boolean) als aktuelle Phase gekennzeichnet.
- Schritte vor der aktuellen Phase werden als abgeschlossen dargestellt, der aktuelle Schritt als aktiv, die folgenden als ausstehend.

Chart-Einstellungen:

JSON

{
    "Chart": {
        "Type": "Process",
        "Title": "@chart_process_phase"
    },
    "Serieses": {
        "SeriesSet": [
            {
                "Series": {
                    "Area": "source_process_phase",
                    "XValue": "phase_name",
                    "YValue": "phase_is_current_pr_phase",
                    "InitiallyVisible": "true"
                }
            }
        ]
    }
}

Prozess-Chart mit Status-Text pro Schritt

Ziel

Wird für eine Datenserie der Parameter Text gesetzt, erscheint unterhalb jedes Schritts eine zweite Zeile:
- Abgeschlossene Schritte zeigen ein Häkchen gefolgt vom Wert des Text-Datenfelds – typischerweise ein Datum wie beispielsweise 12.11.24.
- Der aktive Schritt ist mit dem Status „In Bearbeitung" gekennzeichnet.
- Ausstehende Schritte zeigen den Status „Ausstehend" an.
Wird im Datenfeld Text kein Wert gesetzt, ist die Statuszeile vollständig ausgeblendet.

Chart-Einstellungen:

JSON

{
    "Chart": {
        "Type": "Process",
        "Title": "@chart_process_phase"
    },
    "Serieses": {
        "SeriesSet": [
            {
                "Series": {
                    "Area": "source_process_phase",
                    "XValue": "phase_name",
                    "YValue": "phase_is_current_pr_phase",
                    "Text": "phase_completion_date",
                    "InitiallyVisible": "true"
                }
            }
        ]
    }
}

Datenfeld-Matrix-Chart

Ziel

JSON-Einstellungen für eine Datenfeld-Matrix-Chart zur Darstellung von Datenfeldwerten – z. B. Ressourcen-Avatare – in einer Matrix aus X- und Y-Kategorien.

Chart-Einstellungen:

JSON

{
    "Chart": {
        "Type": "DataFieldMatrix"
    },
    "Serieses": {
        "Marker": {
            "Enabled": "false"
        },
        "SeriesSet": [
            {
                "Series": {
                    "ImageDf": "avatar",
                    "Area": "image_source",
                    "XValue": "influence_id",
                    "YValue": "interest_id"
                }
            }
        ]
    },
    "XAxis": {
        "Type": "Category",
        "Labels": [
            "$niedrig",
            "$mittel",
            "$hoch"
        ],
        "Title": "$Einfluss"
    },
    "YAxis": {
        "Type": "Category",
        "Labels": [
            "$niedrig",
            "$mittel",
            "$hoch"
        ],
        "Title": "$Interesse"
    }
}

Meilenstein-Chart mit Vergangenheitsfarben

Ziel

Damit der Parameter PastDatesColor bei einer Datums-Zeit-Y-Achse greift, muss der Parameter am Y-Achsen-Objekt gesetzt werden – der Wert an der X-Achse wird dabei ignoriert.
- In diesem Fall muss der Parameter RangePadding ebenfalls an der Y-Achse gesetzt sein.