9 Die Microsoft Chart-Controls

Kapitel 9

Die Microsoft Chart-Controls

In diesem Kapitel:
Allgemeine Chart-Features 652
Einführung in die Chart-Datenbindung 659
Spezielle Chart-Datenbindungsmethoden 662
How-to-Beispiele 672

651
652 Kapitel 9: Die Microsoft Chart-Controls

Mit Visual C# 2010 hält endlich auch ein Chart-Control Einzug in die Toolbox, der Programmierer ist also
nicht mehr auf Fremdkomponenten angewiesen.
Die sowohl für Windows Forms als auch für [Link] verfügbaren Microsoft Chart Controls ermöglichen die
grafische Präsentation von Daten auf vielfältige Weise.
So lassen sich mit den Komponenten 35 verschiedene Diagrammtypen in 2D/3D-Darstellung anzeigen, Sie
als Programmierer haben Einfluss auf Farben, Schatten etc., es dürfte für jeden Anspruch bzw. Geschmack
etwas dabei sein.

HINWEIS Gemäß der Zielstellung dieses Buchs richtet sich unser Fokus auf die Chart-Features zur Datenbindung. Das
vorliegende Kapitel kann deshalb keine umfassende Beschreibung der Chart-Controls liefern.

Mehr zu den Chart-Controls siehe

WWW [Link]

Allgemeine Chart-Features
Da ein Chart-Control ein ziemlich komplexes und tief gestaffeltes Objektmodell hat und eine verwirrende
Vielfalt von Datenbindungsmethoden anbietet, sollen zunächst einige Grundbegriffe geklärt und das Funk-
tionsprinzip anhand der simplen [Link]-Methode erläutert werden.

HINWEIS Im Weiteren beschränken wir uns auf die Darstellung des Charts für Windows Forms-Anwendungen. Wie das
How-to 9.3 »... mit [Link] ein Diagramm anzeigen?» beweist, ist es problemlos möglich, dieses Wissen auch im Rahmen einer
[Link]-Anwendung zu nutzen, ohne große Änderungen vornehmen zu müssen.

Serien/Reihen und Datenpunkte direkt erzeugen

Von zentraler Bedeutung für die Diagrammdarstellung sind die Begriffe der Serien bzw. Reihen und der
Datenpunkte.

HINWEIS Eine Serie bzw. Reihe besteht aus mehreren Datenpunkten, von denen jeder einzelne durch einen X- und einen
Y-Wert festgelegt ist. Jeder einzelne Datenpunkt kann beispielsweise durch eine bestimmte Säule eines Balkendiagramms
dargestellt werden.

Wenn Sie ein Chart-Control von der Toolbox abziehen und auf dem Formular absetzen, verfügt es bereits
über eine Standard-Serie, die Sie aber, beispielsweise mittels der [Link]()-Methode, noch mit Daten-
punkten füllen müssen. Weitere Serien können Sie durch Aufruf der [Link]()-Methode hinzufügen.
Allgemeine Chart-Features 653

BEISPIEL
Ein einfaches Balkendiagramm mit zwei Serien erzeugen

Die Standard-Serie erhält eine neue Bezeichnung:

[Link][0].Name = "Umsätze Kühlschränke";

Fünf Datenpunkte zuweisen:

[Link][0].[Link](2006, 10);
[Link][0].[Link](2007, 25);
[Link][0].[Link](2008, 75);
[Link][0].[Link](2009, 110);
[Link][0].[Link](2010, 130);

Die zweite Serie wird hinzugefügt:

[Link]("Umsätze Waschmaschinen");

Fünf Datenpunkte:
[Link][1].[Link](2006, 150);
[Link][1].[Link](2007, 75);
[Link][1].[Link](2008, 25);
[Link][1].[Link](2009, 10);
[Link][1].[Link](2010, 15);

Abbildung 9.1 Das Anzeigeergebnis

Den Diagrammtyp ändern

Standardmäßig wird jede Serie als Balkendiagramm (ChartType = Column) angezeigt. Die Umstellung auf
einen anderen Diagrammtyp ist für jede Serie einzeln vorzunehmen und kann entweder zur Entwurfszeit
oder aber per Code erfolgen.
654 Kapitel 9: Die Microsoft Chart-Controls

Es gibt insgesamt 35 Diagrammtypen für die unterschiedlichsten Ansprüche, man kann sie zur Entwurfszeit
bequem im Series-Auflistungs-Editor zuweisen (erreichbar über die Series-Eigenschaft).

Abbildung 9.2 Auswahl Diagrammtyp

Überschaubarer und vor allem auch zur Laufzeit änderbar ist eine Zuweisung des Diagrammtyps per Code.

BEISPIEL
Das Vorgängerbeispiel soll als Liniendiagramm dargestellt werden. Es wird lediglich der ergänzende Code ge-
zeigt:
using [Link];
...

Zwecks besserer Optik wird die Linie verstärkt:

[Link][0].BorderWidth = 5;

Das Zuweisen des neuen Diagrammtyps:

[Link][0].ChartType = [Link];
...

Dasselbe für die zweite Serie:

[Link][1].BorderWidth = 5;
[Link][1].ChartType = [Link];

Das Ergebnis zeigt die Abbildung 9.3.

Allgemeine Chart-Features 655

Abbildung 9.3 Ausgabeergebnis

HINWEIS Wie Sie sehen, werden bei einem Liniendiagramm die einzelnen Datenpunkte einer Serie/Reihe miteinander
verbunden.

Soll der Diagrammtyp für alle Serien gleichzeitig geändert werden (das ist meistens der Fall), so kann der
Code mit einem Schleifenkonstrukt vereinfacht werden (siehe folgendes Beispiel):

BEISPIEL
Die Serien des Vorgängerbeispiels werden als Flächendiagramme dargestellt
foreach (Series ser in [Link])
{
[Link] = [Link];
}

Abbildung 9.4 Laufzeitdarstellung des Diagramms

656 Kapitel 9: Die Microsoft Chart-Controls

3D-Darstellung
Alle Diagrammtypen lassen sich in der Regel auch räumlich darstellen. Sie können dazu den Chart-
Area-Auflistungs-Editor verwenden, mit welchem allgemeine Eigenschaften eines Diagramms (Achsenbe-
schriftungen etc.) zugewiesen werden können1.

BEISPIEL
Das Vorgängerbeispiel in 3D-Darstellung
[Link][0].Area3DStyle.Enable3D = true;

Abbildung 9.5 Ausgabeergebnis

Farben für Serien und Datenpunkte

Das Chart-Control bietet verschiedene Wege, um Farben für Serien und Datenpunkte zuzuweisen.

Farbpalette auswählen
Es gibt 12 eingebaute Paletten, von denen jede einzelne etwa 10 unterschiedliche Farben aufweist.

Abbildung 9.6 Übersicht Farbpaletten

1
In einem Chart können auch mehrere Diagramme (ChartAreas) gleichzeitig dargestellt werden, z.B. untereinander.
Allgemeine Chart-Features 657

Chart-Typen, wie beispielsweise Column und Line, weisen jeder Serie automatisch eine bestimmte Farbe aus
der gewählten Palette zu. Wenn das Angebot erschöpft ist, wird wieder von vorn begonnen.

BEISPIEL
Zuweisen einer Farbpalette
using [Link];
...
[Link] = [Link];

Ein Chart-Typ wie beispielsweise Pie (Tortendiagramm) verwendet für jeden einzelnen Datenpunkt eine be-
stimmte Farbe. Hier können Sie nach wie vor die Palette-Eigenschaft verwenden oder aber Sie definieren
unterschiedliche Paletten für unterschiedliche Serien mittels der [Link]-Eigenschaft.

Benutzerdefinierte Paletten
Falls Ihnen keine der Standard-Paletten gefällt, können Sie auch eigene Paletten mit beliebig vielen Farben
erzeugen.

BEISPIEL
Zuweisen einer benutzerdefinierten Farbpalette
[Link] = [Link];
[Link] = new Color[] { [Link], [Link], [Link]};

Color-Eigenschaft
Sie haben, unabhängig von den bisher beschriebenen Techniken, immer die Möglichkeit, die Color-Eigen-
schaft für eine Serie oder einen einzelnen Datenpunkt direkt zu setzen.

BEISPIEL
Farbe für die gesamte Serie zuweisen
[Link][0].Color = [Link];

BEISPIEL
Farbe für einen einzelnen Datenpunkt setzen
[Link][0].Points[5].Color = [Link];

HINWEIS Um wieder auf die Paletten-Farben umzuschalten müssen Sie die Color-Eigenschaften der Serien und Daten-
punkte auf [Link] setzen.

Leere Datenpunkte
Wenn Sie DBNull-Werte an die Chart binden wollen, werden die Datenpunkte automatisch als »empty
points« markiert. Sie können das auch selbst tun, indem Sie Datenpunkte mittels der [Link]-
658 Kapitel 9: Die Microsoft Chart-Controls

Eigenschaft setzen. Jeder leere Datenpunkt verwendet die in der [Link]-Eigenschaft definier-
ten visuellen Attribute.

BEISPIEL
Alle leeren Datenpunkte einer Serie werden versteckt, indem sie transparent gemacht werden
[Link][0].[Link] = [Link];

Diagramm drucken
Ein Diagramm auf dem Bildschirm sieht ja recht schön aus, doch in vielen Fällen soll das Ergebnis auch zu
Papier gebracht werden. Das ist kein Problem, über die Printing-Eigenschaft des Chart-Controls werden alle
Aktivitäten rund um die Druckausgabe gebündelt.
Folgende Methoden stehen zur Verfügung:

Methode Beschreibung
PageSetup ... zeigt den bekannten Pagesetup-Dialog an.
Print ... druckt das vorliegende Diagramm. Übergeben Sie als Parameter true, wird. der bekannte Druckdialog zur
Druckerauswahl angezeigt.
PrintPaint Ausgabe des Diagramms auf einem Graphics-Objekt.
PrintPreview Statt der direkten Druckauswahl wird eine Druckvorschau angezeigt.
Tabelle 9.1 Methoden zur Druckausgabe

BEISPIEL
Eine einfache Druckvorschau ist mit
[Link]();

realisierbar.

Diagramm exportieren/abspeichern
Mit der SaveImage-Methode können Sie Ihr Diagramm in insgesamt 8 verschiedenen Bildformaten expor-
tieren bzw. abspeichern: Bmp, Emf, EmfDual, EmfPlus, Gif, Jpeg, Png, Tiff.

BEISPIEL
Die Chart wird als Bitmap-Datei im Anwendungsverzeichnis abgelegt.
[Link]("[Link]", [Link]);

BEISPIEL
Die Chart wird in einem MemoryStream-Objekt gespeichert und dann als Byte-Array zurück gegeben.
private Byte[] GetChart()
Einführung in die Chart-Datenbindung 659

{
...
using (var chartImage = new [Link]())
{
[Link](chartImage, [Link]);
return [Link]();
}
}

Einführung in die Chart-Datenbindung

Wie bereits in der Einführung gezeigt, verfügen Sie mit der [Link]-Methode über ein einfaches und
universelles Werkzeug, um beliebige Diagramme darzustellen. Damit lassen sich, quasi »in Handarbeit«,
auch beliebige Datenbankinhalte an das Chart anbinden.
Nachdem wir diese Technik am Beispiel demonstriert haben, wollen wir uns einen Überblick über die ver-
fügbaren speziellen Datenbindungsmethoden verschaffen, mit welchen die Arbeit des Programmierers teil-
weise drastisch vereinfacht werden kann.

Manuelle Datenbindung mittels [Link]-Methode

Sie haben immer die Möglichkeit, die Chart manuell anzubinden, indem Sie über die Datenquelle iterieren
und die einzelnen Datenpunkte zu den Serien nach Bedarf selbst hinzufügen.
Das gilt insbesondere natürlich auch für die Auswertung von Datenbankinhalten.

BEISPIEL
Eine Access-Datenbanktabelle PKW_Verkauf_3 hat die Spalten Verkäufer und für die Jahre 2000 ... 2010 je-
weils eine weitere Spalte, in welcher die pro Jahr erzielten Verkaufssummen enthalten sind:

Abbildung 9.7 Tabellenlayout

Gewünscht wird ein Diagramm, welches je nach Verkäufer die Abhängigkeit der Verkaufssumme von der
Jahreszahl zeigt.

Zunächst lesen wir auf gewohnte Weise die gewünschten Daten in eine DataTable ein:
string sql = "SELECT * FROM PKW_Verkauf_3";

OleDbConnection conn = new OleDbConnection(connStr);

OleDbCommand cmd = new OleDbCommand(sql, conn);
OleDbDataAdapter da = new OleDbDataAdapter(cmd);
660 Kapitel 9: Die Microsoft Chart-Controls

DataSet ds = new DataSet();

[Link]();
[Link](ds,"query1");
[Link]();

DataTable dt = [Link]["query1"];

Alle Verkäufer durchlaufen:

foreach(DataRow row in [Link])
{

Pro Verkäufer eine neue Serie hinzufügen:

string serName = row["Verkäufer"].ToString();
[Link](serName);

Jeder Verkäufer = eine Serie von Punkten = eine Linie:

[Link][serName].ChartType = [Link];
[Link][serName].BorderWidth = 5;

Alle Jahres-Spalten durchlaufen:

for(int colNr = 1; colNr < [Link]; colNr++)
{

Pro Jahres-Spalte den Y-Wert als Punkt hinzufügen:

decimal YVal = (decimal) row[colNr];

Für X-Achse (Beschriftung!):

string colName = [Link][colNr].ColumnName;

[Link][serName].[Link](colName, YVal);
}
}

Kontrollanzeige der DataTable im Datengitter:

[Link] = ds;
[Link] = "query1";
...

Das Ergebnis zeigt die Abbildung 9.8.

HINWEIS Die Verwendung der Methode [Link] ist auch dann zu empfehlen, wenn die Daten der Serien mittels
Formeln berechnet wurden.
Einführung in die Chart-Datenbindung 661

Abbildung 9.8 Ausgabe des Beispiels

Übersicht über die speziellen Datenbindungsmethoden

Wie Sie obigem Beispiel entnehmen können, ist der Programmieraufwand bei manueller Datenbindung
(Methode [Link]) doch ziemlich erheblich, denn Sie müssen Ihre Serien Punkt für Punkt selbst
zusammenbauen. Damit Sie sich diese mühevolle Handarbeit sparen können, verfügt das Chart-Control
über eine Reihe spezieller Datenbindungsmethoden, die das Erzeugen von Serien und Datenpunkten für
unterschiedliche Datenquellen mehr oder weniger automatisieren.
Die folgende Tabelle gibt einen Überblick über die speziellen Datenbindungsmethoden des Chart-Controls:

Bindungsoption Vorteile Nachteile

DataBindTable-Methode Einfaches Binden für X und Y Werte. Keine mehrfachen Y-Werte pro Serie.
Automatisches Erzeugen von Serien, basierend auf Alle Serien haben denselben X Wert, oder der ist nicht
der Spaltenanzahl der Datenquelle. gesetzt.
Keine Bindung für erweiterte Chart-Eigenschaften wie
z.B. Tooltips.
DataBind-Methode und Können bereits zur Entwurfszeit verwendet werden. Keine Bindung für erweiterte Chart-Eigenschaften, wie
DataSource-Eigenschaft Unterstützen mehrfache Y-Werte. z.B. Tooltips.

[Link](X)Y Unterstützt multiple Datenquellen, inklusive Keine Bindung für erweiterte Chart-Eigenschaften, wie
separate Datenquellen für X und Y Werte. z.B. Tooltips.
Unterstützt multiple Y Werte.
Ist flexibler als obige Methoden.
[Link] Wie oben plus Bindungen für erweiterte Chart-Ei- Unterstützt keine unterschiedlichen Datenquellen für
genschaften wie z.B. Tooltips. X- und Y-Werte von Serien.
DataBindCrossTab Für jeden eindeutigen Wert in spezifizierten Spalten Nur Gruppieren auf einem Level (Single Level
werden Serien automatisch erzeugt um die Daten zu Grouping) wird unterstützt.
gruppieren.
Tabelle 9.2 Datenbindungsmethoden
662 Kapitel 9: Die Microsoft Chart-Controls

Unterstützte Datenquellen
Von den Chart-Bindungsmethoden wird eine Vielfalt von Datenquellen unterstützt:
■ OleDbDataReader/SqlDataReader
■ OleDbCommand/SqlCommand
■ OleDbDataAdapter/SqlDataAdapter
■ DataView
■ DataSet/DataTable
■ List/Array
■ alle Objekte die IEnumerable implementieren

HINWEIS Nicht alle Bindungsmethoden unterstützen alle Datenquellen-Typen. So eignen sich DataSet/DataTable, Sql-
Command/OleDbCommand und SqlDataAdapter/OleDbDataAdapter nur für Datenbindung per DataSource-Eigenschaft!

Spezielle Chart-Datenbindungsmethoden
In diesem Abschnitt wollen wir jede der Chart-Bindungsmethoden näher erläutern und am konkreten
Beispiel demonstrieren.

Die DataBindTable-Methode
Diese Methode ermöglicht eine verblüffend einfache Datenbindungstechnik. Es kommt allerdings nur eine
einzige Datenquelle infrage. Die Serien werden automatisch erzeugt, basierend auf der Anzahl von Spalten
in der Datenquelle (eine Serie pro Datenspalte). Jeder Spalteneintrag erzeugt einen Datenpunkt in der
entsprechenden Serie und wird für den ersten Y Wert des Punkts verwendet. Um eine Spalte für die X-Werte
aller Serien zu spezifizieren verwendet man die überladene Methodendefinition, die einen xField-Parameter
enthält.

HINWEIS Diese Methode durchfährt die Datenquelle nur einmal um alle Daten zu binden.

Syntax:

public void DataBindTable (IEnumerable dataSource, string xField)

Zu den Parametern:
dataSource: Datenquelle - ein beliebiges Objekt, welches IEnumerable implementiert
xField: Name des Felds für die X-Werte der Serien

HINWEIS Jede Tabellenspalte wird zu einem Y-Wert einer Serie. Außerdem kann das Feld für den X-Wert bereitgestellt
werden.
Spezielle Chart-Datenbindungsmethoden 663

BEISPIEL
Die Verkäufer Maxhelm, Tobalt und Siegbast arbeiten in einem Autohaus. Die folgende Tabelle PKW_Verkauf
mit den Spalten Verkäufer, Mercedes, BMW, Opel, Ford, Mazda und Toyota gibt an, wie viele Autos eines be-
stimmten Typs von einem bestimmten Verkäufer verkauft worden sind:

Abbildung 9.9 Tabellenlayout

Nachdem Sie eine Chart-Komponente auf dem Formular abgesetzt haben, sind zunächst die [Link]-
typischen Vorbereitungen (Erzeugen von Connection- und Command-Objekten, Öffnen der Connection,
Erzeugen des DataReader) vorzunehmen:
using [Link];
...
string connStr = "PROVIDER=[Link].4.0;Data Source=[Link]";
string sql = "SELECT * FROM PKW_Verkauf";
OleDbConnection conn = new OleDbConnection(connStr);
OleDbCommand cmd = new OleDbCommand(sql, conn);
[Link]();
OleDbDataReader dr = [Link]([Link]);

Erst jetzt kommen wir zum interessanten Teil, dem Anbinden des Chart-Controls: Da ein DataReader die
Schnittstelle IEnumerable implementiert, kann er, zusammen mit dem Namen der Spalte Verkäufer die als
X-Wert dient, direkt an die DataBindTable-Methode übergeben werden:
[Link](dr, "Verkäufer");
[Link]();
[Link]();

Das Ergebnis als standardmäßiges Balkendiagramm:

Abbildung 9.10 Das Diagramm zur Laufzeit

Wie Sie sehen, zeigt die Spalte Verkäufer die Werte auf der (horizontalen) X-Achse. Die übrigen sechs Spal-
ten (PKW-Typen) bilden die Serien, die auf der (vertikalen) Y-Achse dargestellt werden. Jeder der sechs
PKW-Typen (bzw. Serien) hat eine bestimmte Farbe, die Zuordnung ist auf den Legenden (rechts oben)
ersichtlich.
664 Kapitel 9: Die Microsoft Chart-Controls

BEISPIEL
Anstatt eines DataReader wollen wir diesmal eine generische Liste als Objektdatenquelle verwenden, welche
wir äquivalent zur Datenbanktabelle PKW_Verkauf des Vorgängerbeispiels erstellen.

Die Elemente der Liste sind Objekte des Typs CVerkäufer:

public class CVerkäufer
{
public string Name { get; set; }
public int Mercedes { get; set; }
...
}

Die generische Liste (per Typinferenz) erzeugen:

var verkäufe = new List<CVerkäufer>();

Liste füllen:
verkä[Link](new CVerkäufer{Name = "Maxhelm", Mercedes = 12, BMW = 9, Opel = 6, Ford = 10,
Mazda = 4, Toyota = 5});
verkä[Link](new CVerkäufer { Name = "Tobalt", Mercedes = 8, BMW = 8, Opel = 7, Ford = 5,
Mazda = 3, Toyota = 9 });
...

Anbinden des Chart-Controls:

[Link](verkäufe,"Name");

Das Ergebnis ist äquivalent zum Vorgängerbeispiel. Damit es uns aber nicht zu langweilig wird, wollen wir
diesmal anstatt des standardmäßigen Balkendiagramms einen der zahlreichen anderen Diagrammtypen
zeigen, wie wäre es mit Bubble? Hierfür ist allerdings etwas zusätzlicher Programmieraufwand erforderlich, da
der neue Diagrammtyp jeder einzelnen Serie extra zugewiesen werden muss:
foreach (Series ser in [Link])
{
[Link] = [Link];
}

Überflüssige Legende für Standardserie ausblenden:

[Link][0].IsVisibleInLegend = false;

Abbildung 9.11 Ausgabeergebnis

Spezielle Chart-Datenbindungsmethoden 665

DataBind-Methode/DataSource-Eigenschaft
Wollen Sie die DataBind-Methode verwenden, so müssen Sie noch diverse andere Eigenschaften des Chart-
Controls setzen. Am wichtigsten ist die DataSource-Eigenschaft, sie bietet die einzige Möglichkeit, das Chart
bereits zur Entwurfszeit anzubinden, ihr können alle oben aufgeführten Datenquellen direkt zugewiesen
werden. Im Unterschied zur DataBindTable-Methode müssen Sie die Serien selbst erzeugen und deren
YValueMembers- und optional XValueMember-Eigenschaften festlegen.
In den folgenden Beispielen verzichten wir im Interesse der Transparenz auf mögliche Vorteile der Ent-
wurfszeit-Datenbindung mittels der verschiedenen über das Eigenschaftenfenster erreichbaren Auflistungs-
Editoren und nehmen eine komplette Laufzeit-Anbindung vor. Die Ergebnisse jedes der Beispiele sind iden-
tisch und entsprechen den Vorgängern, weshalb wir auf Abbildungen verzichten können.

BEISPIEL
Eine alternative Realisierung des Vorgängerbeispiels mit einem DataReader als Datenquelle (der Vorberei-
tungscode, bis einschließlich dem Öffnen der Connection, ist identisch).

Der Datenquelle wird direkt der DataReader zugewiesen:

[Link] = [Link]([Link]);

Im Unterschied zum Vorgängerbeispiel müssen wir uns nun um die sechs Serien selbst kümmern.

Die erste Serie ist zwar bereits vorhanden, allerdings müssen wir noch die Namen der entsprechenden X- und
Y-Werte setzen:
[Link]["Series1"].XValueMember = "Verkäufer";
[Link]["Series1"].YValueMembers = "Mercedes";

Auch um die Anzeige/Beschriftung der Legende müssen wir uns selbst kümmern:
[Link]["Series1"].IsVisibleInLegend = true;
[Link]["Series1"].LegendText = "Mercedes";

Dasselbe ist für die restlichen Serien zu tun, diese müssen zunächst mittels Add()-Methode zur Series-Collec-
tion hinzugefügt werden:
[Link]("Series2");
[Link]["Series2"].XValueMember = "Verkäufer";
[Link]["Series2"].YValueMembers = "BMW";
[Link]["Series2"].LegendText = "BMW";
...

Den analogen Code für die übrigen PKW-Typen (Opel, Ford, Mazda, Toyota) sparen wir uns (siehe Begleit-
daten).

Nun erst kann das Chart an die Datenquelle gebunden werden:

[Link]();
[Link]();
}

Das Resultat ist identisch zum Vorgängerbeispiel, der Codeaufwand ist allerdings größer.
666 Kapitel 9: Die Microsoft Chart-Controls

BEISPIEL
Das im Vorgängerbeispiel verwendete Command-Objekt wird direkt als Datenquelle eingesetzt.
...
OleDbConnection conn = new OleDbConnection(connStr);
OleDbCommand cmd = new OleDbCommand(sql, conn);
[Link] = cmd;
...
[Link]()
...

BEISPIEL
Ein DataAdapter-Objekt als Datenquelle
...
OleDbDataAdapter da = new OleDbDataAdapter(cmd);
[Link] = da;
...
[Link]()
...

BEISPIEL
Auch der etwas umständlichere Weg über eine DataTable ist möglich.
...
OleDbDataAdapter da = new OleDbDataAdapter(cmd);
DataTable dt = new DataTable();
[Link](dt);
[Link] = dt;
...
[Link]()
...

HINWEIS Das Chart bindet sich noch vor dem Rendering automatisch an die spezifizierte Datenquelle. Sie können aber
durch Aufruf der DataBind() Methode erzwingen, dass sich das Chart in einem beliebigen Moment anbindet.

Die DataBindCrossTable-Methode
Diese Methode unterscheidet sich von allen anderen Bindungsmethoden darin, dass sie das Gruppieren ein-
deutiger Werte in einer Spalte erlaubt. Jeder eindeutige Wert in der spezifizierten gruppierten Spalte führt
zum Erzeugen von Datenserien. Weiterhin können erweiterte Datenpunkt-Eigenschaften (also nicht nur
X- und Y Werte) gebunden werden.
Die Syntax:

public void DataBindCrossTable(

IEnumerable dataSource,
string seriesGroupByField,
string xField,
string yFields,
Spezielle Chart-Datenbindungsmethoden 667

string otherFields,
PointSortOrder sortingOrder
)

Parameter Bedeutung
dataSource Die Datenquelle.
seriesGroupByField Der Name des Felds zum Gruppieren von Daten in die Serien.
xField Der Name des Felds für die x-Werte.
yFields Eine durch Trennzeichen separierte Liste von Namen der Felder für y-Werte.
otherFields Weitere Datenpunkteigenschaften (AxisLabel, Tooltip, Label, LegendText, LegendTooltip und CustomPropertyName).
sortingOrder Serien werden nach Gruppenfeldwerten in der angegebenen Reihenfolge sortiert.
Tabelle 9.3 Parameter der DataBindCrossTable-Methode

BEISPIEL
Gegeben sei die folgende Datenbanktabelle, in welcher die jährlichen Verkaufssummen und Provisionen un-
serer drei glorreichen Autoverkäufer enthalten sind:

Abbildung 9.12 Ausgangstabelle

...
OleDbConnection conn = new OleDbConnection(connStr);
OleDbCommand cmd = new OleDbCommand("SELECT * FROM PKW_Verkauf_2", conn);
[Link]();
OleDbDataReader dr = [Link]([Link]);

Wir wollen nach der »Name« Spalte gruppieren, d.h., pro Verkäufer wird eine Datenserie erzeugt. Die
X-Werte werden an die »Jahr«-Spalte gebunden, die Y-Werte an die Spalte »Verkaufssumme«. und die
Label-Eigenschaft der resultierenden Datenpunkte (einer pro Datensatz) an die Spalte »Provision«.
[Link](
dr,
"Name",
"Jahr",
"Verkaufssumme",
"Label=Provision{C}");
[Link]();
[Link]();
668 Kapitel 9: Die Microsoft Chart-Controls

Abbildung 9.13 Die Standarddarstellung als Balkendiagramm:

Eine von vielen weiteren Möglichkeiten – die alternative Darstellung als Liniendiagramm:

Abbildung 9.14 Alternative Darstellung

Wie Sie sehen, werden die Serien automatisch zum Chart hinzugefügt, abhängig von der Anzahl eindeutiger
Werte in der durch den Parameter seriesGroupByField spezifizierten Spalte der Datenquelle.
Als Datenquelle kommen DataReader, DataView, DataSet oder DataRow infrage, sowie alle Auflistungen, die
IEnumerable implementieren

HINWEIS Das DataTable-Objekt können Sie mit der DataCrossTable-Methode nicht verwenden, da es kein IEnumerable-
Interface besitzt. Benutzen Sie stattdessen einen DataView.

Die [Link]-Methode
Die [Link]-Methode fügt Punkte zu einer spezifischen Serie hinzu, sie ermöglicht es, neben den X-
und Y-Werten auch andere Properties an die Datenspalten zu binden. Zu diesen Properties gehören Label,
AxisLabel, Tooltip, LegendText, LegendTooltip und CustomPropertyName, wie wir sie bereits als otherFields-
Parameter aus der DataBindCrossTable-Methode kennen (diese Methode splittet automatisch Daten in
Serien auf, basierend auf einem bestimmten Gruppierungsfeld).
Spezielle Chart-Datenbindungsmethoden 669

BEISPIEL
Aus der Datenbanktabelle (PKW_Verkauf_2) des Vorgängerbeispiels werden nur die Verkäufe für das Jahr
2010 abgefragt. Die X- und Y-Werte der Serie werden den Spalten »Name« bzw. »Verkaufssumme« zugeord-
net. Die Properties Tooltip und Label der resultierenden Datenpunkte werden mit den Spalten »Jahr« und
»Provision« verbunden.
...
OleDbCommand cmd = new OleDbCommand("SELECT * FROM PKW_Verkauf_2 WHERE Jahr=2010", conn);
[Link]();
OleDbDataReader dr = [Link]([Link]);
[Link]["Series1"].[Link](
dr,
"Name",
"Verkaufssumme",
"Tooltip=Jahr,
Label=Provision{C}");
...

Was Sie jetzt sehen ist gewissermaßen ein Ausschnitt aus dem Diagramm des Vorgängerbeispiels (es wird nur
eine einzige Serie angezeigt). Das Zuweisen der Tooltip-Eigenschaft bewirkt, dass beim Verweilen des Maus-
zeigers auf einem Balken das Jahr 2010 als Quickinfo angezeigt wird.

Abbildung 9.15 Ausgabeergebnis

Die [Link](X)Y-Methoden
Die [Link]-Methode erlaubt es nicht, verschiedene Datenquellen für die X- und Y-Werte einer
Serie festzulegen, eine Lösung bieten die DataBind(X)Y-Methoden.

[Link]
Die [Link]-Methode ermöglicht das Binden von X- und von Y-Werten einer Serie. Dabei kön-
nen auch unterschiedliche Datenquellen verwendet werden.

BEISPIEL
zwei DataReader
...
OleDbCommand cmd = new OleDbCommand(
"SELECT Name, Provision FROM PKW_Verkauf_2 WHERE Jahr = 2010", conn);
[Link]();
670 Kapitel 9: Die Microsoft Chart-Controls

OleDbDataReader dr = [Link]([Link]);

[Link][0].[Link](
dr,
"Name",
dr,
"Provision");
...

Abbildung 9.16 Ausgabeergebnis

BEISPIEL
Ein einfaches Diagramm

Array für X-Werte initialisieren:

string[] xval = { "Maxhelm", "Siegbast", "Tobalt", "Friedhelm", "Susanne" };

Array für Y-Werte initialisieren:

double[] yval = { 1, 6, 4, 5.35, 8 };

Anbinden des Y-Arrays an die Punkte der Y-Achse der Standard-Datenserie:

[Link][0].[Link](
xval,
yval);

Abbildung 9.17 Ausgabeergebnis

[Link]
Im Unterschied zur DataBindXY-Methode bindet DataBindY nur Y-Werte.
Spezielle Chart-Datenbindungsmethoden 671

BEISPIEL
Die Spalte Verkaufssumme der Datenbanktabelle PKW_Verkauf_2 hat 12 Datensätze, sie wird mit den Y-
Werten der Standard-Punkteserie verbunden. Die X-Achse ist mit den laufenden Datensatznummern be-
schriftet.
OleDbCommand cmd = new OleDbCommand("SELECT * FROM PKW_Verkauf_2", conn);
[Link]();
OleDbDataReader dr = [Link]([Link]);

[Link]["Series1"].[Link](
dr,
"Verkaufssumme");

Abbildung 9.18 Ausgabeergebnis

BEISPIEL
Einfacher geht es wohl kaum noch: eine Punkteserie an ein Double-Array binden

Array initialisieren:
double[] dArr = { 2, 4, 6, 8, 3, 5, 7, 9, 19 };

Array an die Punkte der Y-Achse der Datenserie binden:

[Link]["Series1"].[Link](dArr);

Abbildung 9.19 Ausgabeergebnis

672 Kapitel 9: Die Microsoft Chart-Controls

How-to-Beispiele
9.1 ... das Chart-Control zur Laufzeit mit Daten füllen?
Chart-Control: DataSource-Eigenschaft, DataBind-Methode; DataSetBindingSource-Objekt: ListChanged-
Ereignis:
An einem einfachen Beispiel wollen wir Ihnen den interaktiven Einsatz des Chart-Controls demonstrieren,
d.h., Sie können zur Laufzeit Einträge hinzufügen und ändern. Um mit möglichst wenig Quellcode auszu-
kommen, nutzen wir ein DataSet als Datenspeicher, an das wir ein DataGridView zur Eingabe und ein
Chart-Control zur Ausgabe anbinden.

Dataset entwerfen
Nachdem Sie eine neue Windows Forms-Anwendung erstellt haben, fügen Sie dem Projekt zunächst ein
neues DataSet hinzu (Projekt/Neues Element hinzufügen). Erstellen Sie eine Tabelle »Umsatzentwicklung«
mit folgendem Aufbau:

Abbildung 9.20 Das DataSet-Layout

Speichern Sie das DataSet ab.

Oberfläche
Fügen Sie Form1 zunächst einen SplitContainer hinzu, dessen Orientation-Eigenschaft Sie auf Horizontal
setzen. Um das Control im Formular auszurichten, legen Sie Dock auf Fill fest. In den oberen Teil des Split-
Containers fügen Sie ein DataGridView, in den unteren Teil ein Chart-Control ein.
Über das Aufgaben-Menü des DataGridView weisen Sie unser DataSet als Datenquelle zu, es werden auto-
matisch ein DataSet und eine BindungSource in das Fenster eingefügt. Legen Sie für die BindingSource die
DataMember-Eigenschaft auf »Umsatzentwicklung« fest. Damit ist das DataGridView mit dem DataSet ver-
bunden.
Nachfolgend können wir uns dem Chart-Control zuwenden. Legen Sie zunächst DataSource auf die bereits
vorhandene BindingSource-Komponente fest. Nun lassen sich auch die einzelnen Datenreihen an die Tabel-
lenspalten binden. Öffnen Sie dazu den Series-Editor und legen Sie sowohl den XValueMember als auch den
YValueMember entsprechend Ihren Wünschen fest:
How-to-Beispiele 673

Abbildung 9.21 XValueMember und

YValueMember festlegen

Die Beschriftung der Datenreihe wird über die Name-Eigenschaft bestimmt.

Da wir zwei Datenreihen anzeigen wollen, müssen wir im obigen Editor noch eine weitere Datenreihe ein-
fügen und entsprechend konfigurieren.

Quelltext
Leider aktualisiert das Chart-Control nicht automatisch die Anzeige und so bleibt uns nichts anderes übrig,
als eine »umfangreiche« Ereignisbehandlung für die BindingSource zu realisieren:

private void dataSet1BindingSource_ListChanged(object sender, ListChangedEventArgs e)

{
[Link]();
}

Das obige Ereignis wird bei jeder Datenänderung im DataSet ausgelöst.

Test
Zur Laufzeit können Sie Werte in das Datengitter eingeben und die Reaktionen des Diagramms unmittelbar
beobachten (Abbildung 9.22).
674 Kapitel 9: Die Microsoft Chart-Controls

Abbildung 9.22 Laufzeitansicht

9.2 ... das Chart mit einer LINQ to SQL-Abfrage verbinden?

Chart-Control: Titles-Collection, SaveImage-Methode; ChartAreas-Collection: AxisX-, AxisY-, BackColor-,
[Link]-, [Link]-Eigenschaften; Series-Collection: IsVisibleInLegend-Eigenschaft;
Mit dem Chart wollen wir das Ergebnis einer verknüpften Abfrage der Tabellen Employees und Orders der
Northwind-Datenbank des SQL-Servers grafisch auswerten. Die Verbindung zwischen Datenbank und
Chart wird unter Verwendung von LINQ to SQL (siehe Kapitel 17) realisiert.

Oberfläche
Öffnen Sie eine neue Windows Forms-Anwendung.
Basis für den Einsatz von LINQ to SQL ist immer ein so genannter Datenkontext (DataContext). Da dessen
Erzeugung bereit im Einführungsbeispiel 1.3 »... eine einfache LINQ to SQL-Anwendung schreiben?« aus-
führlich beschrieben wurde, können wir uns hier kurz fassen:
■ Ziehen Sie die Datenbankdatei [Link] auf den Projektmappen-Explorer (Assistent abbrechen!)
■ Fügen Sie eine neue LINQ to SQL-Klasse hinzu (Menü Projekt/Neues Element hinzufügen ...)
■ Öffnen Sie den Server Explorer (Menü Ansicht/Server-Explorer) und ziehen Sie die Tabellen Employees
und Orders auf die Oberfläche des LINQ to SQL-Designers
■ Im Eigenschaftendialog des Designers ändern Sie den Namen des Datenkontexts in NWDataContext
How-to-Beispiele 675

Wechseln Sie nun in die Entwurfsansicht von Form1 und setzen Sie ein Chart-Control und einen Button auf
das Formular.

Quelltext

...
using [Link];

namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
...
private void button1_Click(object sender, EventArgs e)
{

Unser Datenkontext:
var db = new NWDataContext();

Die folgende LINQ Abfrage liefert einen anonymen Typ welcher die Angestellten (Employee-Objekte) enthält,
zusammen mit der Anzahl der von ihnen generierten Bestellungen (Orders).
var query = from o in [Link]
group o by [Link]
into g
select new
{
Employee = [Link],
NoOfOrders = [Link]()
};

Einige Properties für das Rendering der Chart werden gesetzt, wir beginnen mit der Überschrift:
[Link]("Sales By Employees");
[Link][0].Font = new Font("Arial", 16f);

Die Bezeichnungen für X- und Y-Achse:

[Link][0].[Link] = "Employee";
[Link][0].[Link] = "Sales";

[Link][0].[Link] = new Font("Arial", 12f);

[Link][0].[Link] = new Font("Arial", 12f);

[Link][0].[Link] = new Font("Arial", 10f);

Der Schriftwinkel für die Beschriftung der X-Achse soll um 45 Grad geneigt sein:
[Link][0].[Link] = -45;

Die Hintergrundfarbe:
[Link][0].BackColor = [Link];
676 Kapitel 9: Die Microsoft Chart-Controls

Die Legende ist hier überflüssig, da nur eine Serie vorhanden ist:
[Link][0].IsVisibleInLegend = false;

Die resultierenden Daten der LINQ Abfrage werden mittels AddXY()-Methode an das Chart gebunden:
foreach (var q in query)
{
var Name = [Link] + ' ' + [Link];
[Link][0].[Link](Name, [Link]([Link]));
}

Ein kleines Schmankerln zum Schluss, die Chart wird als Bilddatei abgelegt:
[Link]("[Link]", [Link]);
}
}
}

Test
Das Diagramm zeigt die Anzahl der von jedem Verkäufer insgesamt betreuten Bestellungen.

Abbildung 9.23 Laufzeitansicht

9.3 ... mit [Link] ein Diagramm anzeigen?

Chart; Entity Framework; Stored Procedures als Funktionsimport
Das Chart-Control findet sich nicht nur in der Toolbox für Windows Forms-, sondern auch in der für ASP.-
NET-Anwendungen. An einem relativ einfachen Beispiel wollen wir Ihnen demonstrieren, wie Sie per Entity
Framework auf eine vorhandene Stored Procedure zugreifen und deren Daten für die Diagrammanzeige
verwenden können.

Oberfläche
Erzeugen Sie zunächst eine neue leere [Link] Website (Datei/Neu/Web Site ...) und legen Sie als Ziel
»Dateisystem« fest. Fügen Sie dem Projekt ein neues Web Form hinzu (Kontextmenü Neues Element hinzu-
fügen).
How-to-Beispiele 677

Als Datenquelle soll uns die schon bekannte Datenbank [Link] dienen. Bevor Sie die Datei per
Drag & Drop in den Projektmappen-Explorer ziehen, erzeugen Sie zunächst noch einen Ordner App_Data
(Kontextmenü [Link]-Ordner hinzufügen) in welchem wir die Datei ablegen werden.
Nachfolgend sollte das Projekt folgende Struktur haben:

Abbildung 9.24 Projektstruktur

Datenzugriff realisieren
Für unser Beispiel wollen wir das Entity Framework als Datenzugriffstechnologie verwenden. Erzeugen Sie
deshalb ein neues »[Link] Entity Data Model« (Kontextmenü Hinzufügen neues Element) mit dem
Namen [Link].

HINWEIS Das Modell muss bei einem Website-Projekt im Unterordner App-Code abgelegt werden, da sonst kein Zugriff
auf die erzeugten Klassen möglich ist. Der Assistent wird einen entsprechenden Hinweis anzeigen.

Im Assistenten für das Entity Data Model wählen Sie die bereits eingefügte Datenbank [Link] aus,
unsere Daten wollen wir aus der Stored Procedure »Ten Most Expensive Products« beziehen, wählen Sie
diese in der Liste der zu importierenden Datenbankobjekte aus (siehe folgende Abbildung 9.25).

Abbildung 9.25 Auswahl der zu

importierenden Datenbankobjekte
678 Kapitel 9: Die Microsoft Chart-Controls

Nachfolgend finden Sie ein scheinbar leeres Entity Data Model vor, lassen Sie sich davon nicht täuschen, ein
Blick in den Modellbrowser zeigt in der Rubrik »Gespeicherte Prozeduren« unsere importierte Stored
Procedure »Ten Most Expensive Products«. Wollen wir diese auch in unserem Programm nutzen, ist es
erforderlich, sie als Funktion in das Datenmodell zu importieren. Verwenden Sie dazu das Kontextmenü des
Modellbrowsers, wie in der folgenden Abbildung gezeigt:

Abbildung 9.26 Die Stored Procedure als

Funktion importieren.

Im folgenden Assistenten klicken Sie auf den Eintrag »Spalteninformationen abrufen«, um zunächst die
Rückgabewerte der Stored Procedure zu ermitteln.

Abbildung 9.27 Assistent für den Funktionsimport

How-to-Beispiele 679

Über die Schaltfläche »Neuen komplexen Typ erstellen« erzeugen wir einen passenden Typ in unserem
Modell, der nachfolgend bereits zugewiesen wird (siehe obige Abbildung 9.27).
Kompilieren Sie nachfolgend das Projekt um sicherzustellen, dass das Datenmodell auch erzeugt wird und
wir im Weiteren von der Intellisense Gebrauch machen können:

Abbildung 9.28 So einfach ist jetzt der Zugriff auf die Stored Procedure!

Bevor wir uns um den Quelltext kümmern, müssen wir noch ein Chart-Control in unser neu erzeugtes Web
Form ([Link]) einfügen. Sparen Sie nicht mit der Größe, die inneren Ränder des Diagramms sind
später recht groß.

Quelltext
Damit können wir uns den inneren Werten zuwenden. Mit dem Laden des Formulars rufen wir zunächst
die Daten per Entity Data Model ab und »basteln« uns dann das Diagramm nach unseren Wünschen
zusammen.

Der Namenspace für die Elemente unseres Diagramms:

using [Link];

public partial class _Default : [Link]

{

Laden der Seite:

protected void Page_Load(object sender, EventArgs e)
{

Daten abrufen:
[Link] db = new [Link]();
var tenprod = db.Ten_Most_Expensive_Products();

Wir löschen die bereits vorhandenen ChartAreas und Series:

[Link]();
[Link]();

Zuweisen der Datenquelle:

[Link] = tenprod;
680 Kapitel 9: Die Microsoft Chart-Controls

Wir erzeugen ein neues ChartArea, konfigurieren dieses und fügen es der Auflistung hinzu:
ChartArea chartArea1 = new ChartArea();
[Link] = "ChartArea1";
chartArea1.Area3DStyle.Enable3D = true;
[Link] = 5;
[Link] = 10;
[Link] = 1;
[Link](chartArea1);

Eine Legende erzeugen:

Legend legend1 = new Legend();
[Link] = "Legend1";
[Link](legend1);

Die eigentlichen Daten werden per Series-Objekt zugewiesen:

Series series1 = new Series();

Horizontale Balken:
[Link] = [Link];
[Link] = "ChartArea1";
[Link] = "Legend1";
[Link] = "Die teuersten Produkte";

Hier wird die Brücke zu den beiden Spalten unserer Auflistung geschlagen:
[Link] = "TenMostExpensiveProducts";
[Link] = "UnitPrice";

HINWEIS Da es sich um den Typ »Bar« handelt, sind X- und Y-Achse vertauscht!

Hinzufügen der Serie:

[Link](series1);

Datenbindung:
[Link]();
}
}

Das war doch recht einfach, wer es komfortabler mag, kann auch eine ObjectDataSource verwenden und
dann das Chart per Assistent konfigurieren.
How-to-Beispiele 681

Test
Ein Start der Anwendung sollte zum folgenden Ergebnis führen:

Abbildung 9.29 Die Laufzeitansicht im Internet Explorer