Diagramme – Graphen – Geschäftsgrafiken

Die Aufbereitung und Visualisierung von Daten spielt bei immer größer werdenden Datenmengen eine ebenso zunehmende Rolle. Eine Möglichkeit der Darstellung besteht in der Verwendung von Diagrammen.

In diesem Artikel zeige ich Ihnen, wie Sie Diagramme mit CONZEPT 16 benutzen und gestalten können.

Zur Erzeugung von Diagrammen steht das Chart-Objekt zur Verfügung. Es verfügt über zahlreiche Eigenschaften über die die Darstellung des Diagramms angepasst werden kann.

Der Chart-Designer

In der CodeLibrary finden Sie das Beispiel „Chart-Designer“ der Ihnen dabei hilft, das passende Diagrammdesign für Ihre Applikation und Ihren Anwendungsfall zu finden. Der Chart-Designer funktioniert ähnlich wie der Dialog-Designer in CONZEPT 16. Sie können sämtliche Eigenschaften des Chart-Objektes ansehen und verändern und direkt nachvollziehen, welche Auswirkungen sie haben.

Der Chart-Designer beinhaltet bereits eine Handvoll an beispielhaften Designs, an denen Sie sich orientieren können:

Chart-Designer Stil „Lavendel“

Chart-Designer Stil „Minimal“

Chart-Designer Stil „Torte“

Das Chart-Objekt

Haben Sie sich mit dem Chart-Objekt vertraut gemacht, können Sie sich der Programmierung widmen: Mit den Funktionen ChartOpen(), ChartSave() und ChartClose() kann ein Chart-Objekt geöffnet, gespeichert und wieder geschlossen werden.

Das Diagramm kann als Bild in eine Datei oder ein Memory-Objekt gespeichert werden. Ein als Bild gespeichertes Diagramm kann sehr universell weiterverarbeitet werden, beispielweise kann es als binäres Objekt zur Archivierung in der Datenbank abgelegt oder über einen Web-Server auf Basis des SOA-Service ausgeliefert werden.
Die Speicherung in ein Memory-Objekt ist eine praktische Alternative, um das Diagramm ohne den Umweg über eine Datei in ein Picture-Objekt zu laden und anzuzeigen.

Mit den Funktionen ChartDataOpen() und ChartDataClose() kann ein Chart-Objekt mit Daten gefüllt werden.

Beispiel

main
()

  local
  {
    tChart     : handle;
    tChartData : handle;
  }

{
  // Diagramm öffnen und Diagrammtyp, -breite, -höhe und -titeltext setzen
  tChart # ChartOpen(_ChartXY, 450, 300, 'Titel');
  if (tChart > 0)
  {
    // Titel der X-Achse des Koordinatendiagramms
    tChart->spChartXYTitleX     # 'X-Achse';
    // Titel der Y-Achse des Koordinatendiagramms
    tChart->spChartXYTitleY     # 'Y-Achse';
    // Diagrammbereich des Graphen
    tChart->spChartArea         # RectMake(60, 50, 380, 250);
    // Titelbereich
    tChart->spChartTitleArea    # RectMake(0, 0, 450, 0);
    // Tiefe des Koordinatendiagramms
    tChart->spChartXYDepth      # 10;
    // Hintergrundfarbe des Diagramms
    tChart->spChartColBkg       #
      ColorMake(ColorRgbMake(240, 240, 240));
    // Hintergrundfarbe des Titels
    tChart->spChartTitleColBkg  #
      ColorMake(ColorRgbMake(0, 32, 192), 128);
    // Vordergrundfarbe des Titels
    tChart->spChartTitleColFg   #
      ColorMake(ColorRgbMake(255, 255, 255));
    // Hintergrundfarbe des Koordinatendiagramms
    tChart->spChartXYColBkg     #
      ColorMake(ColorRgbMake(255, 255, 255));
    // Alternative Hintergrundfarbe des Koordinatendiagramms
    tChart->spChartXYColBkgAlt  #
      ColorMake(ColorRgbMake(0, 32, 192), 240);
    // Balkenschattierung des Koordinatendiagramms
    tChart->spChartXYBarShading # _ChartXYBarShadingGradientBottom;

    // Datenstil des Koordinatendiagramms (pro Datenreihe)
    tChart->spChartXYStyleData  # _ChartXYStyleDataBar;
    // Rahmenfarbe des Koordinatendiagramms (pro Datenreihe)
    tChart->spChartXYColBorder  #
      ColorMake(ColorRgbMake(255, 255, 255), 160);
    // Datenfarbe des Koordinatendiagramms (pro Datenreihe)
    tChart->spChartXYColData    #
      ColorMake(ColorRgbMake(0, 32, 192), 128);

    // Datenreihe für Werte und Beschriftungen öffnen
    tChartData # tChart->ChartDataOpen(5,
      _ChartDataValue | _ChartDataLabel);
    if (tChartData > 0)
    {
      // Beschriftung
      tChartData->ChartDataAdd('A', _ChartDataLabel);
      // Wert
      tChartData->ChartDataAdd(6, _ChartDataValue);

      tChartData->ChartDataAdd('B', _ChartDataLabel);
      tChartData->ChartDataAdd(2, _ChartDataValue);
      tChartData->ChartDataAdd('C', _ChartDataLabel);
      tChartData->ChartDataAdd(7, _ChartDataValue);
      tChartData->ChartDataAdd('D', _ChartDataLabel);
      tChartData->ChartDataAdd(3, _ChartDataValue);
      tChartData->ChartDataAdd('E', _ChartDataLabel);
      tChartData->ChartDataAdd(5, _ChartDataValue);

      // Datenreihe schließen
      tChartData->ChartDataClose();
    }

    // Diagramm speichern
    tChart->ChartSave('C:\Chart.png', _ChartFormatAuto);

    // Diagramm schließen
    tChart->ChartClose();
  }
}

Die obige Funktion erzeugt das folgende Diagramm:

Balkendiagramm