IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Contrôle Chart pour VB.Net (et C#)

Il s'agit d'un cours sur 'Chart' le contrôle de Microsoft permettant de créer des graphiques en Vb.Net ou en C#.
Autres contributions du même auteur :
Cours complet sur Visual Basic.Net, cliquer ici.
Pour voir et télécharger LDF : logiciel de compta en Shareware, cliquer ici.
Télécharger un dictionnaire médical gratuit pour Word.

philippe@lasserrelyon.fr

4 commentaires Donner une note à l´article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Un graphique permet de présenter sous une forme visuelle (colonnes, camembert, point..) une série de données.

Exemple d'un graphique avec colonnes en 3D :

Image non disponible

En vb 2010 (FrameWork 4) on a à notre disposition un contrôle .Net nommé Chart 4.0 qui permet de faire des graphiques :
Il existait depuis le FrameWork 3.5, mais il fallait le charger.
C'est l'ancien contrôle Chart de Dundas.

Il faut comprendre avant toutes choses qu'un contrôle 'Chart' peut contenir une ou plusieurs séries de données à afficher dans un ou plusieurs graphiques :
-Les Series stockent les valeurs des points (DataPoint) à afficher.
-Les ChartArea sont les zones de graphique, des 'régions' où seront affichés les graphes.

On peut avoir une série et un ChartArea dans le Chart :

Image non disponible

Mais il peut y avoir plusieurs Series et plusieurs ChartArea dans un Chart.

Exemple : on a 2 Series de points (Series1 et Series2) et 2 ChartArea (ChartArea1 et CharArea2).
On veut afficher la series1 dans ChartArea1 et la series2 dans ChartArea2.
On verra que pour cela, la propriété ChartArea de Series1=ChartArea1, la propriété ChartArea de Series2= ChartArea2. Cela donne 2 graph :

Image non disponible

Exemple 2 : on peut afficher plusieurs séries (2 ici) dans un seul ChartArea :

Image non disponible

Exemple 3 : on peut afficher 2 séries dans un seul ChartArea (celui du haut) et une troisième series dans un second ChartArea :

Image non disponible

Pour chaque series, il existe donc une propriété nommée ChartArea qui indique dans quel ChartArea afficher la series.

Un Chart contient une collection de series (nommée 'Series').
Chaque series contient une collection de DataPoint( nommée 'Points').
Dans une Series, il y a aussi, en plus des points, certains attributs: couleur, image, mais surtout, la propriété ChartArea (dans laquelle la series sera affichée).
La propriété Chartype de la series indique le type de graph (camembert, trait, ligne..).

Un Chart contient aussi une collection de ChartArea, collection nommée ChartAreas.
Dans un ChartArea, en plus de la région graphique, il y a des collections d' axes et les attributs de la 3D.

Le Chart contient aussi la palette de couleurs une collection d'annotations de légendes et une collection de titres.

II. Utiliser le 'Designer' pour créer un graphique

On va créer un Chart, ajouter des points, modifier le type de graphique, le mettre en 3D, modifier le titre et la légende dans le designer.

Comme d'habitude, on va prendre le Chart dans la boîte à outils et on le dépose sur la Form dans le designer :

Image non disponible

Ce Chart se nomme par défaut 'Chart1', il contient dès sa création un ChartArea (zone graphique) nommé 'ChartArea1' et une Series (contenant les points) nommée 'Series1'.

Voyons les propriétés du Chart à droite dans la fenêtre de propriétés:
Il y a ChartAreas qui est une collection de ChartArea (Zone graphique ).
Cliquer sur ChartAreas (Collection) puis sur le bouton qui apparait à droite :

Image non disponible

On est dans l’éditeur de collections ChartArea.
On voit apparaitre à gauche dans la liste 'Membres' tous les ChartArea, (ici il y en a donc déjà un nommé 'ChartArea1'), on peut en créer de nouveaux (bouton 'Ajouter') ou modifier les propriétés de chaque ChartArea à droite.

Dans la fenêtre de propriétés du Chart, il y a aussi Series qui est une collection de Series, chaque series ayant une collection nommée 'Points' qui contient les points à afficher.
Cliquer sur Series (Collection) puis sur le bouton qui apparait à droite :

Image non disponible

On voit la fenêtre 'Editeur des collections Series'.
On voit apparaitre à gauche dans la liste 'Membres' toutes les Series, (ici il y en a déjà une nommé 'Series1'), on peut en créer de nouvelles (bouton 'Ajouter') ou modifier les propriétés de chaque Series à droite.

Dans les propriétés de la series on a 'Points (Collection)'.
Cliquer sur Points (Collection) puis sur le bouton qui apparait à droite ouvre donc la fenêtre de droite qui montre la collection de points (fenêtre 'Editeur de collection DataPoint').
On peut cliquer sur le bouton 'Ajouter' en bas pour créer un DataPoint.
Image non disponible On peut cliquer sur un DataPoint puis modifier ses propriétés à droite (Données: Xvalue, Yvalues, attention il y a un 's' en plus sur la seconde propriété).
XValue est l'abscisse du point.
YValues est la ou les ordonnées du point.
Ajouter quelques points.

Dans la fenêtre 'Editeur des collections series' il y a aussi pour chaque Series la propriété ChartType qui permet de choisir le type de graph (colonne, point, barre, camembert…).
Par défaut ChartType=Column.

Image non disponible

Notez aussi la propriété ChartArea, juste au-dessus, qui indique dans quel ChartArea sera affichée la series. Si ChartArea est vide la séries ne sera pas affichée.

Cliquer sur F5 vous verrez votre graph.

Image non disponible

Pour la 3D:
Dans l'éditeur de collection ChartArea, on voit dans les ChartArea une propriété nommée Enabled3D (il faut dérouler 'Area3DStyle).

Image non disponible

Si on met cette propriété à True, le graphique est affiché en 3D.

Image non disponible

Dans la fenêtre de propriété du Chart, il y a une Propriété nommée Palette qui permet de saisir un groupe de couleurs, chaque couleur servant à l'affichage d'une series.

Image non disponible

À noter que dans la fenêtre de propriété d'une series qui y a une propriété Color permettant de modifier la couleur de la series.

Le Chart et les ChartArea peuvent avoir un titre.

Dans le chart il y a une collection Titles, 'on passe dans l'éditeur de collection title', il y a par défaut un titre nommé 'title1'.

Image non disponible

Les propriétés de 'title1' permettent de modifier le titre du chart: ForeColor, BackColor, BorderColor et Text qui contient le texte du titre.
Dans la propriété text, on va écrire 'Titre'. On va donner la valeur Red à ForeColor, On va modifier la Font pour avoir des caractères plus gros.

Une Legend est un rectangle où sont affichés les noms des series avec la couleur de la series.
Par défaut le chart affiche la légende des series (qui est dans la propriété Name de la series) avec un rectangle de couleur, mais sans titre ni cadre.

Dans le chart il y a une collection Legends, 'on passe dans l'éditeur de collection Legend', il y a par défaut une légende nommée 'Legend1'.

Image non disponible

Dans la propriété title, on va écrire 'Légende'.

Les modifications sur le titre et la légende donnent le graphique suivant :

Image non disponible

III. Utiliser du code pour créer et modifier un graphique

Importer l'espace de nom tout en haut du module :

 
Sélectionnez
Imports System.Windows.Forms.DataVisualization.Charting

Voici les principaux objets d'un Chart :

Image non disponible

On indique de nouveau que: Un Chart contient une collection de series (nommée 'Series').
Chaque series contient une collection de DataPoint à afficher( nommée 'Points').
Dans une Series il y a aussi, en plus des points, certains attributs: couleur, image, mais surtout, dans la propriété ChartArea il y a le nom du ChartArea dans lequel la series sera affichée.
La propriété Chartype de la series indique le type de graph (camembert, trait, ligne…).

Un Chart contient une collection de ChartAreas.
Dans un ChartArea, en plus du graphique, il y a des collections d' axes et les attributs de la 3D.

Le Chart lui-même contient aussi la palette de couleurs une collection d'annotations une collection de légendes et une collection de titres.

Image non disponible

III-A. Créer un Chart, une Series, un ChartArea, ajouter des points

Bien qu'il soit plus simple de mettre un Chart sur votre formulaire avec le designer, on peut aussi créer un Chart avec un ChartArea et 2 Series avec du code.
Notez bien que quand on dépose un chart sur la Form, à partir de la boîte à outils, il contient déjà un ChartArea1 et une Series1, par contre quand on crée un Chart dans du code avec Dim, il ne contient rien, il faut instancier Series et ChartArea et les ajouter au Chart, enfin il ne faut pas oublier d'ajouter le Chart à la collection Controls de la Form.

 
Sélectionnez
        'Créer un Chart
        Dim Chart2 As New Chart
        'Il ne contient rien
        
        ' Créer ChartArea (zone graphique)
        Dim ChartArea1 As New ChartArea()

        ' Ajouter le  Chart Area à la Collection ChartAreas du  Chart
        Chart2.ChartAreas.Add(ChartArea1)

        ' Créer deux  data series (qui contiendront les DataPoint)
        Dim series1 As New Series()
        Dim series2 As New Series()

        ' Ajouter des points à la collection Points de la première series
        series1.Points.Add(38)
        series1.Points.Add(26)
        series1.Points.Add(32)
        series1.Points.Add(28)
        series1.Points.Add(45)

        ' Ajouter des points à la collection Points de la seconde series
        series2.Points.Add(12)
        series2.Points.Add(43)
        series2.Points.Add(24)
        series2.Points.Add(12)
        series2.Points.Add(28)

        'On indique d'afficher ces Series sur le ChartArea1
        Series1.ChartArea = "ChartArea1"
        Series2.ChartArea = "ChartArea1"
        
        ' Ajouter les series à la collection Series du chart
        Chart2.Series.Add(series1)
        Chart2.Series.Add(series2)

        ' Positionner le controle Chart
        Chart2.Location = New System.Drawing.Point(15, 45)

        ' Dimensionner le Chart
        Chart2.Size = New System.Drawing.Size(360, 260)

        ' Ajouter le chart à la form
        Me.Controls.Add(Chart2)

Les 2 series ont été affichées dans le même ChartArea.
Cela donne :

Image non disponible

On remarque que par défaut, le ChartType de la series est 'Column' et que le graphique affiche des colonnes.
Notez aussi qu'on a créé une series, on a ajouté des points à la series puis enfin on a ajouté la series au chart.
Les coordonnées des points sont des 'Double'.

Pour ajouter un point on a utilisé :

 
Sélectionnez
  series1.Points.Add(38)

On ajoute un élément à la Collection Points de la Series Series1.
Comme il n'y a qu'une valeur en paramètre (un Double), elle est considérée comme l'ordonnée Y du point.
Chart utilise l'index des points (0, 1, 2, 3, 4…) comme valeur X pour afficher le graphique.
Comme toujours le premier DataPoint a l'index 0.
On pourrait écrire aussi :

 
Sélectionnez
  series1.Points.AddY(38)

Il y a une surcharge de la méthode Add qui accepte en paramètre un DataPoint (avec abscisse et ordonnées). Il faut créer un DataPoint, puis donner une valeur à XValue et à YValues. Attention YValues attend un tableau de double contenant 1 ou plusieurs éléments. Ici j'ai utilisé la syntaxe d'un tableau en littéral avec { et }.

 
Sélectionnez
Dim p As New DataPoint
        p.XValue = 3
        p.YValues = {2}
        Chart1.Series("Series1").Points.Add(p)

Sur la dernière ligne, on ajoute le DataPoint p à la collection Points de la series 'Series1' (déjà existante) du Chart1.

p.Label permet d'ajouter un 'Label',un texte au-dessus de chaque élément dans le graph.

Remarque
On remarque qu'on a utilisé la syntaxe 'Chart1.Series(« Series1 »)' pour spécifier la series1; « Series1 » étant le nom de la series (propriété Name de la series);
on aurait pu aussi utiliser 'Chart1.ChartAreas(0)' qui indique la première series dans la collection.

Si on veut ajouter plusieurs valeurs Y, on les sépare par des virgules :

 
Sélectionnez
Dim p As New DataPoint
        p.XValue = 3
        p.YValues = {2, 3, 4, 8}
        Chart1.Series("Series1").Points.Add(p)

Il y a une autre méthode pour ajouter des points : AddXY(x,y)

 
Sélectionnez
Chart1.Series("Series1").Points.AddXY(MyxValue, MyyValue)
'ou si plusieurs valeurs Y à saisir
Chart1.Series("Series1").Points.AddXY(MyxValue, {MyYValue1, MyYValue2, MyYValue3})

On ajoute ainsi en fin de collection un point de coordonnée x et y (coordonnées qui peuvent être des 'Double' ou des Objets comme un tableau pour l'ordonnée).

On remarque que quand on crée un point avec Dim, il peut avoir une ou plusieurs valeurs Y (propriété YValues) de même avec Points.AddXY. Par contre avec Points.Add et Points.AddY on ne peut avoir qu'une seule ordonnée.

Voyons un exemple avec le code complet créant 3 points et ajoutant un label pour chaque point :

 
Sélectionnez
        'Créer un Chart
        Dim Chart1 As New Chart
        
        ' Creation d'un Chart Area
        Dim chartArea1 As New ChartArea()

        ' Ajout ChartArea au Chart
        Chart1.ChartAreas.Add(chartArea1)

        'Ajout d'une Series nommée "Equipe2"
        Chart1.Series.Add("Equipe2")
        
        'Ajout de 3 DataPoint
        Dim p1 As New DataPoint
        p1.XValue = 1
        p1.YValues = {5}
        p1.Label = "Lulu"
        Chart1.Series("Equipe2").Points.Add(p1)
        Dim p2 As New DataPoint
        p2.XValue = 2
        p2.YValues = {1}
        p2.Label = "moi"
        Chart1.Series("Equipe2").Points.Add(p2)
        Dim p3 As New DataPoint
        p3.XValue = 3
        p3.YValues = {4}
        p3.Label = "Toto"
        Chart1.Series("Equipe2").Points.Add(p3).
        
        'On indique d'afficher cette Series sur le ChartArea1
        Chart1.Series("Equipe2").ChartArea = "ChartArea1"
        
        ' On positionne le Chart
        Chart1.Location = New System.Drawing.Point(300, 48)

        ' On indique les dimensions du Chart
        Chart1.Size = New System.Drawing.Size(360, 260)

        ' On ajoute le Chart à la form
        Me.Controls.Add(Chart1)

On remarque qu'ici on a créé directement la series avec 'Chart1.Series.Add(« Equipe2 »)' sans instancier la series au préalable; ensuite on a ajouté les points dans la collection 'Points' de la series1.

Cela donne (remarquez les labels) :

Image non disponible

On peut avoir des DataPoint ayant en abscisse du texte :

 
Sélectionnez
        series1.Points.AddXY("Pierre", 34)
        series1.Points.AddXY("Paul", 24)
        series1.Points.AddXY("Louis", 32)
Image non disponible

On peut aussi utiliser des dates: voir le chapitre correspondant.

Attention au « Name » des series
Il y a plusieurs manières d'instancier une series avec des comportements différents concernant la propriété 'Name'; cela est important, car c'est avec ce nom qu'on va travailler sur les series.

 
Sélectionnez
        'Instanciation series 
        Dim series1 As New Series() 'la propriété 'Name' est vide
        
        'Il faut donner un nom à la series1
        series1.Name = "Myserie"

        'Instanciation en donnant directement un nom
        Dim series2 As New Series("Secondseries")

        'Ajout d'une series à un chart: cela l'instancie et lui donne un nom directement
        Chart1.Series.Add("series3")

Attention donc, quand on crée une series nommée 'series1' avec Dim, sa propriété 'Name' ne contient rien, il faut donc ajouter series1.Name=« series1 » avant de l'utiliser.

Pour ajouter des points qui sont dans un tableau, on peut utiliser le Binding.

Si les points à tracer sur le graph sont dans des tableaux, il est plus simple d'utiliser le DataBinding pour 'remplir' le graph (grâce à Points.DataBindXY) :

 
Sélectionnez
Dim x() As Integer = {2, 3, 8, 6, 4, 5, 3}
Dim y() As Integer = {2, 3, 8, 6, 4, 5, 3}
        'Créons un second ChartArea
        Dim SecondChartArea As New ChartArea
        SecondChartArea.Name = "SecondChartArea"
        Chart1.ChartAreas.Add(SecondChartArea)
        
        'Créons une series
        Dim SecondeSeries As New Series
        SecondeSeries.Name = "SecondeSeries"
        Chart1.Series.Add("SecondeSeries")
        
        'Indiquer d'afficher la series dans le second ChartArea
        Chart1.Series("SecondeSeries").ChartArea = "SecondChartArea"
      
        'Binding sur la series
        Chart1.Series("SecondeSeries").Points.DataBindXY(x, y)

Si on ajoute ce code au premier exemple de ce chapitre, on crée un second ChartArea :

Image non disponible

Voir aussi le chapitre des liaisons avec les DataSet.

Pour insérer un point, effacer un point, effacer une series :

 
Sélectionnez
'Insérer un point à l'index 2 (premier élément=0)
series1.Points.InsertXY(2, 2009, 55)
'Supprimer le premier point 
series.Points.RemoveAt(0)
'Supprimer tous les points
series.Points.Clear()

On se rend compte que comme Points est une collection toutes les propriétés des collections sont utilisables: Insert, IndexOf, Find, Firt, Last…(voir le chapitre sur les collections dans le cours VB).

Quand on a ajouté des points, il est possible de modifier les propriétés d'un point dans la collection Points :

 
Sélectionnez
'Modifier l'ordonnée du second point:
series1.Points(1).YValues = {58}

'Mettre un ToolTip sur le premier point
series1.Points(0).ToolTip = "Premier point"


'***Modification de l'aspect du troisième point
        'Couleur 3e colonne
series1.Points(2).Color = Color.BlueViolet
        'Mettre un bord
series1.Points(2).BorderColor = Color.Chocolate

        'Mettre un marker
series1.Points(1).MarkerColor = Color.Cyan
series1.Points(1).MarkerStyle = MarkerStyle.Star6

Propriété IsXValueIndexed

Par défaut la propriété IsXValueIndexed de la series est égale à False.
Dans ce cas le Chart, sur l'axe des X, met les valeurs par ordre croissant et ajoute les valeurs manquantes.

Utilisons la series de points suivante :

 
Sélectionnez
        'Les points ne sont pas dans l'ordre des X croissant
        'et il n'y a pas de point avec x=4 et x=5
        series1.Points.AddXY(1, 34)
        series1.Points.AddXY(2, 44)
        series1.Points.AddXY(6, 24)
        series1.Points.AddXY(3, 55)

Cela donne par défaut (Chart1.Series(0).IsXValueIndexed =False)

Image non disponible

Si on donne la valeur True, chart 'indexe sur les X': il respecte l'ordre des points et affiche les seules valeurs X existantes; il ne trie donc pas.

 
Sélectionnez
Chart1.Series(0).IsXValueIndexed =True
Image non disponible

III-B. Objets et propriétés communs à tous les types de graphiques

On utilisera principalement le ChartType 'Column' qui est le ChartType par défaut.
Parfois la figure explicative montre des colonnes-cylindres ou est en 3D.

Certaines propriétés communes bien que présentes pour tous les types de graphiques (Line, Point, Pie..) n'ont pas d'effet pour certains d'entre eux ou on un effet seulement en 3D.
D'autres propriétés spécifiques à un type de graphique font partie des 'CustomProperties' de ce type de graphique.

III-B-1. Axes

On peut ajouter un titre pour les 2 axes.

Le texte des titres des axes est dans la propriété 'Title' de 'AxisX' et 'AxisY' du ChartArea :

 
Sélectionnez
        Chart1.ChartAreas(0).AxisX.Title = "Nombre de cas"
        Chart1.ChartAreas(0).AxisY.Title = "Poids"

        Chart1.ChartAreas(1).AxisX.Title = "Nombre de cas"
        Chart1.ChartAreas(1).AxisY.Title = "Poids"
        
        'Bonus: affichons les valeurs au-dessus de chaque colonne
         Chart1.Series(0).IsValueShownAsLabel = True
Image non disponible

Les axes peuvent être modifiés.

Dans un ChartArea il y a les propriétés AxisX et AxisY pour l'axe principal (et AxisX2, AxisY2 pour l'axe secondaire).

 
Sélectionnez
' Echelle Logarithmique
chart1.ChartAreas(0).AxisY.IsLogarithmic = True

' Choix de la base logarithmic 
chart1.ChartAreas(0).AxisY.LogarithmBase = Math.E

' Couleur de l'axe
Chart1.ChartAreas(0).AxisY.LineColor = Color.Red

'  Style de l'axe
Chart1.ChartAreas(0).AxisY.LineDashStyle = ChartDashStyle.Solid

'  Arrow Style
Chart1.ChartAreas(0).AxisY.ArrowStyle = AxisArrowStyle.None

' Epaisseur axe
Chart1.ChartAreas(0).AxisY.LineWidth = 1

 ' On peut indiquer, et ainsi forcer, la plage des valeurs de l'axe.
Chart1.ChartAreas(0).AxisY.Minimum = 10
Chart1.ChartAreas(0).AxisY.Maximum = 1000

Si on ne force pas la plage des valeurs (si on ne met pas les 2 lignes qui précèdent, le Chart calcule automatiquement la plage des valeurs des axes. Attention, si on ajoute un point, il faut appeler la méthode recalculant les axes( Chart1.ChartAreas(0).RecalculateAxesScale()).

On peut modifier l'épaisseur et la couleur des traits de la grille :

 
Sélectionnez
'Couleur de la grille principale
Chart1.ChartAreas(0).AxisX.MajorGrid.LineColor = Color.LightGray
'Couleur de la grille secondaire
Chart1.ChartAreas(0).AxisY.MinorGrid.LineColor = Color.LightGray
'Epaisseur du trait de la grille principale
Chart1.ChartAreas(0).AxisY.MajorGrid.LineWidth = 3

Autre exemple: tracer un trait sur le graph sur et l'axe des Y toutes les 5 unités et un petit trait (TickMark) toutes les 2 unités :

 
Sélectionnez
Chart1.ChartAreas(0).AxisY.MajorGrid.Interval = 5
 Chart1.ChartAreas(0).AxisY.MajorTickMark.Interval = 2
Image non disponible

On peut retourner le graph (de haut en bas ici) et indiquer sur quelle ordonnée les axes vont se croiser :

 
Sélectionnez
'Retournement
Chart1.ChartAreas(0).AxisY.IsReversed = True
'L'axe Y croisera l'axe des X à X=4
Chart1.ChartAreas(0).AxisX.Crossing = 4
Image non disponible

On peut ajouter des bandes de couleurs ou des lignes.

Ici on va colorer une bande horizontale sur 2 en gris et on va mettre une ligne: c'est une bande unique peu épaisse, on ajoutera un texte à cette ligne.

Pour cela on crée une bande (un StripLine) on donne sa position, si nécessaire l'intervalle de répétition, sa couleur, son épaisseur et on le met dans la collection StripLines de l'axe X ou Y.

 
Sélectionnez
         ' Créer une strip line pour les bandes
        Dim stripLine As New StripLine()
        'Couleur : gris
        stripLine.BackColor = Color.FromArgb(120, Color.Gray)
        ' On demarre a y=0
        stripLine.IntervalOffset = 0
        'Une bande à répéter toutes les 10 graduations (0 si une seule bande)
        stripLine.Interval = 10
        'Epaisseur 5 graduations
        stripLine.StripWidth = 5
        
        'On met les bandes sur l'axe des Y (dans la collection StripLines
        Chart1.ChartAreas(0).AxisY.StripLines.Add(stripLine)

        ' Créer un second strip line pour faire une ligne
        Dim stripLine2 As New StripLine()
        'Couleur : rouge
        stripLine2.BackColor = Color.FromArgb(120, Color.Red)
        'Position y=6
        stripLine2.IntervalOffset = 6
        'Une seule bande
        stripLine2.Interval = 0
        'Epaisseur à 1 =ligne
        stripLine2.StripWidth = 1
        'Texte relatif à la ligne
        stripLine2.Text = "Moyenne"

        'On met la ligne sur l'axe des Y (dans la collection StripLines)
        Chart1.ChartAreas(0).AxisY.StripLines.Add(stripLine2)
Image non disponible

À noter que pour colorer un intervalle sur 2, il y a plus simple :

 
Sélectionnez
' Bandes entrelacées
Chart1.ChartAreas(0).AxisY.IsInterlaced = True

' Couleur bande
Chart1.ChartAreas(0).AxisY.InterlacedColor = Color.FromArgb(120, Color.Red)

On peut afficher un second axe.

Ici on va mettre un axe en Miles et un axe en Kilomètres:
On avait dans le ChartArea AxisY, on va donner à la propriété Enabled de AxisY2 la valeur True pour faire apparaître le second axe.

 
Sélectionnez
        ' Second Y axis
        Chart1.ChartAreas(0).AxisY2.Enabled = AxisEnabled.True

        ' On affiche quelques valeurs
        Chart1.Series(0).Points(0).YValues(0) = 5955
        Chart1.Series(0).Points(1).YValues(0) = 7260
        Chart1.Series(0).Points(2).YValues(0) = 8000

        ' on determine les maximums pour les 2 axes Y.
        Chart1.ChartAreas(0).AxisY.Maximum = 12000
        Chart1.ChartAreas(0).AxisY2.Maximum = 22224

        ' Titres pour les Y axes
        Chart1.ChartAreas(0).AxisY.Title = "In Nautical miles"
        Chart1.ChartAreas(0).AxisY2.Title = "In Kilometers"
Image non disponible

Recalculer les axes

Si on ajoute des points à un graph, les axes ne sont pas recalculés automatiquement, il faut ajouter la ligne :

 
Sélectionnez
Chart1.ChartAreas(0).RecalculateAxesScale()

III-B-2. Label des points

Les labels
Si la series du haut a la propriété IsValueShownAsLabel = True cela affiche pour chaque colonne un label contenant la valeur Y de la colonne.

 
Sélectionnez
'Affichons les valeurs Y au-dessus de chaque colonne
         Chart1.Series(0).IsValueShownAsLabel = True
Image non disponible

On peut aussi afficher un label pour un point particulier, comme on l'a vu plus haut, il est placé au-dessus du point :

 
Sélectionnez
'Lors de la création du point
 Dim p1 As New DataPoint
        p1.XValue = 1
        p1.YValues = {5}
        p1.Label = "Lulu"

'Si le point existe déjà
Chart1.Series(0).Points(0).Label= "Moi"

Il y a un AngleLabel, ForeColor, BackColor… pour le Label. Exemple, on ajoute un cadre noir :

 
Sélectionnez
Chart1.Series(0).Points(2).LabelBorderColor = Color.Black

Il existe aussi le AxisLabel qui place le label le long de l'axe X :

 
Sélectionnez
p1.AxisLabel = "Point"

Mots Clés
On peut utiliser des mots clés dans tous les labels (toutes les zones texte, les ToolTip, les légendes et titres aussi).
Exemple : mettre dans les labels de tous les points d'une series la valeur X du point :

 
Sélectionnez
Chart1.Series(0).Label = "#VALX"

#VALX = Valeur x du point, #VAL = valeur y du point, #SERIESNAME = nom de la series.
#LABEL= label du Point, #INDEX =Index du point, #PERCENT =pourcentage de la valeur y.
#LEGENDTEXT =légende, #TOTAL =total des points y, #AVG =moyenne des points y.
#MIN =minimum des points y, #MAX = maximum des points, #FIRST = premier y , #LAST =dernier y.

On peut combiner du texte et un mot clé :

 
Sélectionnez
Chart1.Series(0).Points(2).Label = "La valeur est #VALX"

III-B-3. Couleur, épaisseur, transparence, ombre

On peut modifier la couleur d'une series :

 
Sélectionnez
Chart1.Series(0).Color = Color.Blue

Par défaut Chart utilise une Palette de couleurs donnant automatiquement une couleur par series.
Voici les palettes proposées :

Image non disponible

On peut changer de Palette de couleurs (Fire, Light, Chocalate, Excel…).

 
Sélectionnez
Chart1.Palette = ChartColorPalette.Fire
Image non disponible

On peut aussi créer une Custom palette et ainsi choisir la couleur de toutes les series :

 
Sélectionnez
' Utiliser une custom palette
        Dim colorSet() As Color = {Color.Red, Color.Blue, Color.Green, Color.Purple}
        Chart1.PaletteCustomColors = colorSet
        Chart1.Palette = ChartColorPalette.None

On peut aussi modifier la couleur d'un seul point dans une series et ajouter un bord d'une couleur différente :

 
Sélectionnez
        'Couleur 3e colonne
series1.Points(2).Color = Color.BlueViolet
        'Mettre un bord
series1.Points(2).BorderColor = Color.Chocolate
Image non disponible

La largeur des colonnes est déterminée automatiquement par la largeur du ChartArea et donc du Graph. Le Chart calcule la largeur des colonnes pour qu'elles 'rentrent' toutes dans le ChartArea.

L'épaisseur d'une ligne dans un graph Line ou StepLine est :

 
Sélectionnez
'Pour modifier l'épaisseur des StepLine
Chart1.Series(0).BorderWidth = 4

Dans un graph à points c'est le marker qu'il faut modifier pour modifier l'aspect des points :

 
Sélectionnez
Chart1.Series(0).MarkerStyle = MarkerStyle.Diamond
Chart1.Series(0).MarkerSize = 15

Transparence

On peut utiliser une couleur transparente, pour cela il faut modifier la composante Alpha de la couleur de la series.
Exemple de colonnes en 3D, rouge transparent avec un bord noir : que c'est beau !!

 
Sélectionnez
        '3D
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
        'Graphique Colonne
        Chart1.Series(0).ChartType = SeriesChartType.Column
        
        'Bord d'un pixel d'épaisseur
        Chart1.Series(0).BorderWidth = 1
        'Couleur du bord
        Chart1.Series(0).BorderColor = Color.Black
        
        'Couleur de la colonne
        'Color.Argb( Composante Alpha, Couleur)
        'La composante Alpha modifie la transparence
        Chart1.Series(0).Color = Color.FromArgb(128, Color.Red)
Image non disponible

On peut créer une CustomPalette avec des couleurs transparentes, c'est bien pratique pour afficher un graphique camembert transparent par exemple :

 
Sélectionnez
        ' Utiliser un custom palette transparent
        Dim colorSet() As Color = {Color.FromArgb(128, Color.Silver), Color.FromArgb(128, Color.Red), Color.FromArgb(128, Color.Blue), Color.FromArgb(128, Color.Green), Color.FromArgb(128, Color.Purple)}
        Chart1.PaletteCustomColors = colorSet
        Chart1.Palette = ChartColorPalette.None

Pour les ombres (en 2D seulement) il faut utiliser ShadowColor et ShadowOffset (qui indique l'épaisseur de l'ombre) de la series :

 
Sélectionnez
Chart1.Series(0).ShadowColor = Color.LightSalmon
Chart1.Series(0).ShadowOffset = 15
Image non disponible

III-B-4. 3D

On peut afficher un ChartArea en 3D : il faut créer un ChartArea3DStyle que l'on assignera à la propriété Area3DStyle du ChartArea :

 
Sélectionnez
Dim d3 As New ChartArea3DStyle
        d3.Enable3D = True
        'd3.Rotation = 2
        Chart1.ChartAreas("ChartArea1").Area3DStyle = d3
        
        '***Plus simple:****
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
Image non disponible

Ci-dessus on avait des colonnes de type cylinder on a vu ce que cela donnait en 3D.
Ci-dessous voici un exemple de colonnes normales en 3D :

Image non disponible

Pour passer en 3D la propriété Enable3D doit donc être égale à True. Il y a d'autres propriétés par exemple Rotation qui fait tourner le graph, Inclination, Perspective…
PointGapDepth permet de modifier la profondeur d'une colonne.

Image non disponible

Exemple de code :

 
Sélectionnez
' Permet la 3D charts
chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = true

' 30% de perspective
chart1.ChartAreas("ChartArea1").Area3DStyle.Perspective = 30

' Rotation d'un Angle de 30
chart1.ChartAreas("ChartArea1").Area3DStyle.Rotation = 30

'Inclinaison
chart1.ChartAreas("ChartArea1").Area3DStyle.Inclination = 45

' Mettre le  Point Depth à 100 (profondeur de la colonne)
chart1.ChartAreas("ChartArea1").Area3DStyle.PointDepth = 100
        
' Mettre le Point Gap Width à 0 (profondeur entre les series)
chart1.ChartAreas("ChartArea1").Area3DStyle.PointGapDepth = 0

'Epaisseur du mur gris 
Chart1.ChartAreas(0).Area3DStyle.WallWidth = 10

'Projection isométrique si True (fausse 3D, pas de perspective
'bien si profondeur, pas bien si utilisateur final peut faire pivoter)
'Si false vrai 3D
 Chart1.ChartAreas(0).Area3DStyle.IsRightAngleAxes = True
 
 'Style d'éclairage: None Realistic Simplistic
 Chart1.ChartAreas(0).Area3DStyle.LightStyle = LightStyle.Simplistic

Le LightStyle modifie la lumière : la couleur des côtés et du dessus des colonnes change :

 
Sélectionnez
Chart1.ChartAreas("ChartArea1").Area3DStyle.LightStyle = LightStyle.Realistic

Exemple avec Realistic, Simplistic, et None (dans ce dernier cas, une bordure est ajoutée automatiquement).

Image non disponible

III-B-5. Marker

On peut ajouter dans une Series des marker : Circle, Cross, Square (carré), Diamond, Star, triangle en haut de chaque élément :

 
Sélectionnez
'Choix du type de marker
Chart2.Series("Series1").MarkerStyle = MarkerStyle.Circle
'Couleur du marker
Chart2.Series("Series1").MarkerColor = Color.Magenta
Image non disponible

On peut mettre des Cross, Square, Star, Diamond, Triangle, Star. La propriété MarkerSize permet de définir la taille du Marker.

On peut mettre un marker sur un seul point :

 
Sélectionnez
        'Mettre un marker sur le second pint de la series
series1.Points(1).MarkerColor = Color.Cyan
series1.Points(1).MarkerStyle = MarkerStyle.Star6

III-B-6. Bord, Fond du Chart du ChartArea

Le bord externe du chart peut être personnalisé.

Comment faire un beau tour du Chart gris dégradé :

 
Sélectionnez
        ' Set Border Skin
        Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss

        ' Set Back Color
        Chart1.BorderSkin.BackColor = Color.Red

        ' Set Back Gradient End Color
        Chart1.BorderSkin.BackSecondaryColor = Color.Blue

        ' Set Hatch Style
        Chart1.BorderSkin.BackHatchStyle = ChartHatchStyle.DarkVertical

        ' Set Gradient Type
        Chart1.BorderSkin.BackGradientStyle = GradientStyle.DiagonalRight

        ' Set Border Color
        Chart1.BorderSkin.BorderColor = Color.Yellow

        ' Set Border Style
        Chart1.BorderSkin.BorderDashStyle = ChartDashStyle.Solid

        ' Set Border Width
        Chart1.BorderSkin.BorderWidth = 2
Image non disponible

On peut mettre un bord plus simple, un fond coloré même dégradé en arrière-fond du chart (autour des ChartArea) :

 
Sélectionnez
       ' Back Color est la couleur autour de chaque ChartArea
        Chart1.BackColor = Color.Blue

        ' Seconde couleur (pour le dégradé)
        Chart1.BackSecondaryColor = Color.Yellow

        ' On pourrait mettre un motif 
        ' Chart1.BackHatchStyle = ChartHatchStyle.DashedHorizontal

        ' Met un  Gradient sur la couleur du fond
        Chart1.BackGradientStyle = GradientStyle.DiagonalRight

        ' Couleur du bord du chart
        Chart1.BorderColor = Color.Blue

        ' Style de la couleur du bord: continu , pointillé...
        Chart1.BorderDashStyle = ChartDashStyle.Solid

        ' Epaisseur du bord du graph
        Chart1.BorderWidth = 2
Image non disponible

De la même manière, on peut mettre un fond uni ou dégradé dans un ChartArea :

 
Sélectionnez
        ' Back Color est la couleur de fond du ChartArea
        Chart1.ChartAreas("ChartArea1").BackColor = Color.LightSkyBlue

        ' Seconde couleur (pour le dégradé)
        Chart1.ChartAreas("ChartArea1").BackSecondaryColor = Color.White

        ' On pourrait mettre un motif, on ne le fait pas
        ' Chart1.ChartAreas("ChartArea1").BackHatchStyle = ChartHatchStyle.DashedHorizontal

        ' Met un  Gradient sur la couleur du fond
        Chart1.ChartAreas("ChartArea1").BackGradientStyle = GradientStyle.TopBottom
Image non disponible

III-B-7. Annotations

Il est possible de mettre des annotations.

Les annotations sont des commentaires qu'on peut ajouter au graph ou à un point du graph, des lignes, croix, polygones…
Les annotations sont dans une collection du Chart nommée 'Annotations'.
Il y a plusieurs sortes d'annotations. On verra un exemple avec les CalloutAnnotation ayant une flèche et un rectangle, les RectangleAnnotation n'ayant qu'un rectangle.
Il existe aussi les LineAnnotation, TextAnnotation, EllipseAnnotation , ArrowAnnotation, Border3dAnnotation, PolyLineAnnotation, PolygonAnnotation, ImageAnnotation, AnnotationGroup. Pour le CalloutAnnotation, la propriété 'AnchorDataPoint' de l'annotation indique sur quelle series et quel point afficher l'annotation. Si on ne renseigne pas cette propriété, l'annotation sera affichée dans le graph aux coordonnées désignées.

 
Sélectionnez
        '****Annotation sur un point du graph: CalloutAnnotation

        ' Creer une 'callout' annotation
        'Dessine un lien graphique entre le point et l'annotation
        Dim MyAnnotation As New CalloutAnnotation()

        ' **Attributes: texte , couleur...
        'Sur quel ChartArea afficher l'annotation?
        MyAnnotation.ClipToChartArea = "Default"
        
        'Sur quel point mettre l'annotation
        MyAnnotation.AnchorDataPoint = Chart1.Series(0).Points(2)
        MyAnnotation.Text = "Annotation sur un Point du graph"
        MyAnnotation.BackColor = Color.FromArgb(255, 255, 128)
        
        
        ' Permet le déplacement de l'annotation ou sa sélection.
        MyAnnotation.AllowMoving = True
        MyAnnotation.AllowAnchorMoving = True
        MyAnnotation.AllowSelecting = True

        ' Ajoute l' annotation à la collection Annotations
        Chart1.Annotations.Add(MyAnnotation)


        '*******Annotation dans le ChartArea: RectangleAnnotation
        ' Création annotation rectangulaire sans 'flèche'
        Dim annotationRectangle As New RectangleAnnotation()

        ' Attributes visuels: Texte...
        annotationRectangle.Text = "Annotation attachée" + ControlChars.Lf + "au ChartArea"
        annotationRectangle.BackColor = Color.FromArgb(255, 255, 192)
        
        'Sur quel ChartArea afficher l'annotation?
        annotationRectangle.ClipToChartArea = "Default"
        
        'Position de l'annotation dans le ChartArea
        annotationRectangle.AnchorX = 30
        annotationRectangle.AnchorY = 25

        ' Permet déplacement
        annotationRectangle.AllowMoving = True
        annotationRectangle.AllowAnchorMoving = True
        annotationRectangle.AllowSelecting = True

        ' Ajout à la collection Annotation
        Chart1.Annotations.Add(annotationRectangle)
Image non disponible

Donc, si on n'ancre pas l'annotation sur un point avec AnchorDataPoint, on peut placer l'annotation en donnant ses coordonnées soit en pixel par rapport au ChartArea, soit par rapport aux axes, il faut dans ce dernier cas indiquer les axes à utiliser :

 
Sélectionnez
'*** Coordonnées en pixel sur le ChartArea
'Position de l'annotation (le rectangle) en pixels (point 0,0 =en haut à gauche)
MyAnnotation.X = 1
MyAnnotation.Y = 40

'Position du point de départ de la flèche qui va jusqu'à l'annotation(en pixels)
'C'est le point désigné par l'annotation, l'annotation y est ancrée.
MyAnnotation.AnchorX = 30
MyAnnotation.AnchorY = 60

'*** Coordonnées par rapport aux axes du graph
'On indique les axes à utiliser
MyAnnotation.AxisX = Chart1.ChartAreas(0).AxisX
MyAnnotation.AxisY = Chart1.ChartAreas(0).AxisY
' Annotation ancrée sur les coordonnées par rapport aux axes dans le graph
MyAnnotation.AnchorX = 2
MyAnnotation.AnchorY = 25

ShadowOffset et ShadowColor permettent d'ajouter une ombre.

Le fait de permettre le déplacement, permet de déplacer l'annotation si elle gêne la lecture du graph.

III-B-8. Images

Il est possible de mettre des images en arrière-fond.

Le nom de l'image peut être affecté à la propriété BackImage du Chart (arrière-fond du contrôle), d'un ChartArea (arrière-fond du graphique: en arrière des colonnes par exemple) ou d'une Series (dans ce cas au-dessus de chaque colonne l'image sera affichée).

Voyons un exemple avec une image dans un ChartArea :

 
Sélectionnez
Chart1.ChartAreas(0).BackImage = "pdfdvp.jpg"
'Mise à l'échelle pour que l'image remplisse le ChartArea
Chart1.ChartAreas(0).BackImageWrapMode = ChartImageWrapMode.Scaled
Image non disponible

Exemple de code affichant sur chaque colonne de la series 0 une image nommée 'point.jpg' et sur le troisième point une image nommé 'coche.bmp' :

 
Sélectionnez
        'Image sur la series
        Chart1.Series(0).BackImage = "aide.bmp"
        Chart1.Series(0).BackImageAlignment = ChartImageAlignmentStyle.Top
        Chart1.Series(0).BackImageWrapMode = ChartImageWrapMode.Unscaled
        'Indiquer la couleur à considérer comme transparente dans l'image
        Chart1.Series(0).BackImageTransparentColor = Color.White
        
        'Image sur le 3e point
        Chart1.Series(0).Points(2).BackImage = "coche.bmp"
        Chart1.Series(0).Points(2).BackImageTransparentColor = Color.White
Image non disponible

III-B-9. Titre

Ajouter des titres au graph

Il y a une collection Titles dans le Chart à laquelle il faut ajouter un ou plusieurs titles et modifier leurs propriétés (position, texte du titre…).

 
Sélectionnez
        'Création d'un titre qu'on ajoute à la collection Titles du Chart:
        Chart2.Titles.Add("Titre1")
        
        ' Texte  du titre
        Chart2.Titles(0).Text = "Graphique" + ControlChars.Lf + "affichant 2 series"

        ' font, taille… du titre
        Chart2.Titles(0).Font = New Font("Arial", 12, FontStyle.Bold)

        ' Couleur du fond
        Chart2.Titles(0).BackColor = Color.LightCyan

        ' Couleur du bord
        Chart2.Titles(0).BorderColor = Color.Red 

        ' Position du texte dans le rectangle
        Chart2.Titles(0).Alignment = System.Drawing.ContentAlignment.BottomRight

        ' Text du ToolTip du titre
        Chart2.Titles(0).ToolTip = "Title"
Image non disponible

S'il y a plusieurs ChartArea, il faut indiquer pour chaque Title sur quel ChartArea afficher le titre (avec DockedToChartArea), si on met "" le titre est affiché pour le Chart, on peut mettre le titre au-dessus, au-dessous, à droite, à gauche du graph (avec Docking); il peut être dans ou hors du graph ( grâce à IsDockedInsideChartArea) :

 
Sélectionnez
'Dans quel ChartArea mettre le titre (si "" affiche pour le Chart)
        Chart2.Titles(0).DockedToChartArea = chartArea1.Name
 
 'On peut le mettre SOUS le graph (aussi à droite, à gauche, en haut)
        Chart2.Titles(0).Docking = Docking.Bottom
 'On peut décaler la position
        Chart2.Titles(0).DockingOffset = 50
        
 'On peut mettre le titre DANS le graph
        Chart2.Titles(0).Position.Auto = True
        Chart2.Titles(0).DockedToChartArea = chartArea1.Name
        Chart2.Titles(0).IsDockedInsideChartArea = True
        'bien mettre les 3 lignes pour que cela marche
  
 'On peut aussi positionner en donnant les coordonnées  
 'Dans ce cas position.Auto=False    
    Chart1.Titles(0).Position.Auto = False
   Chart1.Titles(0).Position.X = 35
   Chart1.Titles(0).Position.Y = 40
   Chart1.Titles(0).Position.Width = 35
   Chart1.Titles(0).Position.Height = 10
   'ou
    Chart1.Titles(0).Position = New ElementPosition(20, 20, 100, 20)
    'les parametre d'ElementPosition sont (X,Y, largeur, hauteur) en %

Si la propriété IsDockedInsideChartArea= False, l'ancrage s'applique à toute l'image du graphique.Si la propriété IsDockedInsideChartArea=True, l'ancrage s'applique à l'objet ChartArea spécifié par la propriété DockedToChartArea. Cette propriété n'a aucun effet si la propriété Position n'a pas la valeur Auto. Par défaut Position.Auto=True DockToChartArea="", IsDockInsideChartArea=True.

III-B-10. Légende

Une Legend est un rectangle où sont affichés des Items contenant le nom des series avec la couleur de la series.

Par défaut chart affiche un petit rectangle de couleur pour chaque series avec le nom de la series (propriété Name de la series), sans cadre.

Image non disponible

On va dans un premier temps s'occuper du rectangle conteneur de la Legend :

 
Sélectionnez
        Dim legend1 As New Legend
        'Titre du rectangle des légendes.
        legend1.Title = "Taille"
        legend1.LegendStyle = LegendStyle.Column
        'On l'ajoute à la collection Legends n du Chart
        Chart1.Legends.Add(legend1)
        ' On modifie l'aspect du rectangle
        Chart1.Legends(0).BackColor = Color.MediumSeaGreen
        Chart1.Legends(0).BackSecondaryColor = Color.Green
        Chart1.Legends(0).BackGradientStyle = GradientStyle.DiagonalLeft

        Chart1.Legends(0).BorderColor = Color.Black
        Chart1.Legends(0).BorderWidth = 2
        Chart1.Legends(0).BorderDashStyle = ChartDashStyle.Solid

        Chart1.Legends(0).ShadowOffset = 2
Image non disponible

Ici on voit le rectangle vert. Chart a mis automatiquement les Items correspondant aux Series existantes: les rectangles de couleur pour chaque series avec le nom correspondant (le nom est celui qui est dans la propriété 'Name' de la series).

On peut ajouter un CustomItem pour avoir une troisième ligne créée de toutes pièces :

 
Sélectionnez
        Chart1.Legends(0).CustomItems.Clear()

        ' Ajouter un  custom legend item
        Chart1.Legends(0).CustomItems.Add(New LegendItem("Equipe 1", Color.Magenta, ""))
Image non disponible

On peut faire disparaitre un item correspondant à une series dans la Legend.

 
Sélectionnez
        Chart1.Series(0).IsVisibleInLegend = False

Pour modifier le texte d'un item il suffit de modifier le nom de la series :

 
Sélectionnez
Chart1.Series(0).Name = "Classe 1"

S’il y a plusieurs ChartArea, il faut indiquer sur quel ChartArea 'accrocher' la légende grâce à la propriété DockedToChartArea de la légende. De plus chaque series a la propriété 'Legend' indiquant dans quelle légende afficher la légende de la series et la propriété 'IsVisibleLegend' indiquant si la légende de la series est visible ou non.

On peut créer une légende et mettre des Items correspondant à plusieurs series en donnant à la propriété Legend de la series le nom de la légende :

 
Sélectionnez
' Ajouter une seconde legend
Chart1.Legends.Add(New Legend("Second"))

' Associer les series à la nouvelle legend
Chart1.Series("Series 3").Legend = "Second"
Chart1.Series("Series 4").Legend = "Second"
Chart1.Series("Series 5").Legend = "Second"
...

III-B-11. Position et dimension du Chart et du ChartArea

On a vu qu'on pouvait définir la position et la taille du contrôle Chart dans la fenêtre :

 
Sélectionnez
' Position du Chart= Location
        Chart1.Location = New System.Drawing.Point(350, 30)

' Dimension du chart
        Chart1.Size = New System.Drawing.Size(860, 260)

Par défaut Chart1.ChartAreas(0).Position.Auto = True, s'il y a 2 ChartArea dans le Chart, celui-ci positionne automatique et dimensionne automatiquement les ChartArea.
On peut aussi forcer la position d'un ChartArea dans le Chart et ses dimensions, mais attention ce n'est pas une position ou dimension en pixels, mais en pourcentage des dimensions du Chart.
Le coin supérieur gauche est à 0,0 ; le coin inférieur droit est à 100, 100 (%).
Pour cela on utilise un ElementPosition( X%, Y%, Largeur% et Hauteur%).

 
Sélectionnez
'Premier ChartArea en haut à gauche et de petite dimension (30% du Chart)
Chart1.ChartAreas(0).Position = New ElementPosition(0, 0, 30, 30)
'Second ChartArea à 30% du haut et de la gauche et de grande  dimension (70% du Chart)
Chart1.ChartAreas(1).Position = New ElementPosition(30, 30, 70, 70)
Image non disponible

Une autre manière de faire est d'indiquer dans la propriété AlignWithChartArea d'un ChartArea avec quel ChartArea aligner puis de renseigner les propriétés AlignmentOrientation et AlignmentStyle.

 
Sélectionnez
Chart1.ChartAreas(0).AlignWithChartArea = Chart1.ChartAreas(1).Name

Chart1.ChartAreas(0).AlignmentOrientation = AreaAlignmentOrientations.Horizontal

Chart1.ChartAreas(0).AlignmentStyle = AreaAlignmentStyles.AxesView

Je n'ai malheureusement pas compris la logique de ces propriétés !!!

Combinaison de graphiques. Certains types de graphique peuvent être mis les uns sur les autres ou en escalier; c'est le cas des graphiques en camembert.
Il faut mettre les 2 graphiques dans 2 ChartArea et les positionner judicieusement. Il faut mettre :
- la BackColor du ChartArea en Transparent ;
- la Position.Auto du ChartArea à False pour gérer soi-même la position du ChartArea.
-et positionner judicieusement les ChartAreas à l'aide de la propriété Position:
Exemple: mettre 2 series camemberts l'un sur l'autre.

 
Sélectionnez
'Il y a un Chart1 sur la form
        Chart1.ChartAreas.Clear()
        Chart1.Series.Clear()
        ' Create Chart Area
        Dim chartArea1 As New ChartArea()
        Dim chartArea2 As New ChartArea()
        ' Add Chart Area to the Chart
        Chart1.ChartAreas.Add(chartArea1)
        Chart1.ChartAreas.Add(chartArea2)
        ' Create a data series
        'Instanciation series sans Name
        Dim series1 As New Series("Price")
        ' Add data points to the first series
        series1.Points.AddXY("Pierre", 34)
        series1.Points.AddXY("Paul", 44)
        series1.Points.AddXY("Louis", 32)
        series1.Points.AddXY("Philippe", 25)
        series1.Points.AddXY("Jean", 40)
        series1.Points.AddXY("Roger", 25)
        ' Add series to the chart
        series1.ChartArea = chartArea1.Name
        Chart1.Series.Add(series1)

        'Seconde series
        Dim series2 As New Series("Price2")

        series2.Points.AddXY("Pierre", 44)
        series2.Points.AddXY("Paul", 54)
        series2.Points.AddXY("Louis", 64)
       
        series2.ChartArea = chartArea2.Name
       
        Chart1.Series.Add(series2)
        'Les mettre en 3D
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
        Chart1.ChartAreas("ChartArea2").Area3DStyle.Enable3D = True
        
        'Utiliser un Graphique en camembert
        Chart1.Series(0).ChartType = SeriesChartType.Pie
        Chart1.Series(1).ChartType = SeriesChartType.Pie
        
        'Couleurs d'arrière-plan en transparent
        Chart1.ChartAreas(1).BackColor = Color.Transparent
        Chart1.ChartAreas(0).BackColor = Color.Transparent
        Chart1.ChartAreas(1).BackSecondaryColor = Color.Transparent
        Chart1.ChartAreas(0).BackSecondaryColor = Color.Transparent
        
        'Epaisseur des disques
        Chart1.ChartAreas(0).Area3DStyle.PointDepth = 50
        Chart1.ChartAreas(1).Area3DStyle.PointDepth = 30
        
        'Rectangle qui contient le graphique dans un chart area
        'Les coordonnées utilisées pour cette propriété (0,0 à 100,100) 
        'sont associées à l'objet ChartArea, et pas au Chart en entier.
        Chart1.ChartAreas(0).InnerPlotPosition.Auto = False
        Chart1.ChartAreas(0).InnerPlotPosition.Height = 95
        Chart1.ChartAreas(0).InnerPlotPosition.Width = 85

        'Position du ChartArea dans le Chart
        Chart1.ChartAreas(0).Position.Auto = False
        'hauteur  et largeur relative du ChartArea
        Chart1.ChartAreas(0).Position.Height = 70
        Chart1.ChartAreas(0).Position.Width = 50
        'Position du ChartAreas1 dans le Chart
        'Les coordonnées relatives utilisées pour cette propriété (0,0 à 100,100%) par rapport au graphique en entier.
        Chart1.ChartAreas(0).Position.X = 5
        Chart1.ChartAreas(0).Position.Y = 5
       
        '****Second ChartArea
        ' 'Rectangle qui contient le graphique dans un chart area
        'idem le premier ChartArea
        Chart1.ChartAreas(1).InnerPlotPosition.Auto = False
        Chart1.ChartAreas(1).InnerPlotPosition.Height = 95
        Chart1.ChartAreas(1).InnerPlotPosition.Width = 85
        'Hauteur et largeur du ChartArea (celui-ci est plus petit)
        Chart1.ChartAreas(1).Position.Auto = False
        Chart1.ChartAreas(1).Position.Height = 30
        Chart1.ChartAreas(1).Position.Width = 20
        'Position du Chart Area
        Chart1.ChartAreas(1).Position.X = 18
        Chart1.ChartAreas(1).Position.Y = 23
Image non disponible

Pour les dimensions des ChartArea, pas de problème, on utilise Position.Height et Position.Width (en coordonnées relatives 0 à 100 %).
Pour calculer la position des ChartArea, on utilise Position.X et Position.Y (en coordonnées relatives 0 à 100 %, par rapport au Chart ?).
Je n'ai pas cherché la formule permettant le calcul pour que les centres soient au même endroit, j'ai fait des essais successifs !! Merci de me la faire parvenir, la formule.

De la même manière, on peut faire des graphiques en escalier:

 
Sélectionnez
        '****Firt ChartArea
        'hauteur relative du graphique
        Chart1.ChartAreas(0).Position.Height = 70
        Chart1.ChartAreas(0).Position.Width = 50
        Chart1.ChartAreas(0).Position.X = 5
        Chart1.ChartAreas(0).Position.Y = 5
        
        '****Second ChartArea
        Chart1.ChartAreas(1).Position.Height = 70
        Chart1.ChartAreas(1).Position.Width = 50
        Chart1.ChartAreas(1).Position.X = 30
        Chart1.ChartAreas(1).Position.Y = 30
Image non disponible

III-B-12. Cursor et Zoom

On peut modifier le curseur de la souris quand on passe sur le Chart, ici on va mettre une main :

 
Sélectionnez
    Chart1.Cursor = Cursors.Hand

On peut faire un zoom sur une partie du graphique pour l'axe X ou Y en indiquant en paramètre la plage visible. Un ascenseur est ajouté pour se déplacer.
Si on active le curseur sur le ChartArea, quand on clique dans le graphique, il s'affiche une ligne horizontale et une verticale (ici rouge) passant par le point cliqué.

 
Sélectionnez
        Chart1.ChartAreas(0).AxisX.ScaleView.Zoom(1, 3)
        Chart1.ChartAreas(0).AxisY.ScaleView.Zoom(0, 10)

        ' Enable range sélection and zooming end user interface
        Chart1.ChartAreas(0).CursorX.IsUserEnabled = True
        'Chart1.ChartAreas(0).CursorX.IsUserSelectionEnabled = True
        Chart1.ChartAreas(0).CursorY.IsUserEnabled = True
        ' Chart1.ChartAreas(0).CursorY.IsUserSelectionEnabled = True

        Chart1.ChartAreas(0).AxisX.ScaleView.Zoomable = True
        Chart1.ChartAreas(0).AxisX.ScrollBar.IsPositionedInside = True
        Chart1.ChartAreas(0).AxisY.ScaleView.Zoomable = True
        Chart1.ChartAreas(0).AxisY.ScrollBar.IsPositionedInside = True
Image non disponible

III-B-13. ToolTip

Un Tooltip est un petit rectangle avec un texte qui apparait quand on passe la souris sur un élément du graphique.

 
Sélectionnez
        ' ToolTip sur tous les points de la series
        Chart1.Series(0).ToolTip = "Pourcentage: #PERCENT"

        ' Autre exemple ToolTip sur tous les points de la series
        Chart1.Series(0).ToolTip = "Valeur  x ey y: #VALX"+ vbCrLf + "#VALY"


        ' ToolTips sur la legende 
        Chart1.Series(0).LegendToolTip = "Income in #LABEL  is #VAL million"

        ' ToolTips sur les labels
        Chart1.Series(0).LabelToolTip = "#PERCENT"

        ' ToolTips sur un point unique (le second de la series)
        Chart1.Series(0).Points(1).ToolTip = "Inconnu"

Dans les 4 premiers exemples, on utilise des mots clés (voir chapitre sur les labels).
En plus des points, il peut y avoir aussi des ToolTip sur les titres, les axes et comme on l'a vu sur les légendes et labels.

On peut aussi utiliser l'évènement qui se déclenche quand on survole un élément du graphique et afficher dans le ToolTips une explication :

 
Sélectionnez
Private Sub Chart1_GetToolTipText(sender As Object, e As System.Windows.Forms.DataVisualization.Charting.ToolTipEventArgs) Handles Chart1.GetToolTipText
   
   ' Check selected chart element and set tooltip text
   Select Case e.HitTestResult.ChartElementType
      Case ChartElementType.Axis
         e.Text = e.HitTestResult.Axis.Name
      Case ChartElementType.DataPoint
         e.Text = "Data Point " + e.HitTestResult.PointIndex.ToString()
      Case ChartElementType.GridLines
         e.Text = "Grid Lines"
      Case ChartElementType.LegendArea
         e.Text = "Legend Area"
      Case ChartElementType.LegendItem
         e.Text = "Legend Item"
      Case ChartElementType.PlottingArea
         e.Text = "Plotting Area"
      Case ChartElementType.StripLines
         e.Text = "Strip Lines"
      Case ChartElementType.TickMarks
         e.Text = "Tick Marks"
      Case ChartElementType.Title
         e.Text = "Title"
   End Select
   
End Sub 'Chart1_GetToolTipText

III-B-14. Graphique avec dates et IsXValueIndexed

En X une series accepte des DateTime; attention, pas une string genre « 02/12/1956 », mais une variable DateTime.
Si on écrit :

 
Sélectionnez
series1.Points.AddXY("01/01/2003", 34)

« 01/01/2003 » est considéré comme une String et affiché tel quel.
Pour utiliser un DateTime écrire par exemple :

 
Sélectionnez
  series1.Points.AddXY(CDate("01/01/2003"), 34)

Exemple affichant des dates et des valeurs Y pour chaque date :

 
Sélectionnez
        ' Create Chart Area
        Dim chartArea1 As New ChartArea()
       
        ' Add Chart Area to the Chart
        Chart1.ChartAreas.Add(chartArea1)
        
        'Instanciation series avec Name
        Dim series1 As New Series("Myserie")

        '' Ajouter des points dans la  series
        series1.XValueType = ChartValueType.DateTime
        series1.Points.AddXY(CDate("01/01/2003"), 34)
        series1.Points.AddXY(CDate("01/01/2004"), 24)
        series1.Points.AddXY(CDate("01/01/2008"), 55)
        series1.Points.AddXY(CDate("01/01/2006"), 32)
        series1.Points.AddXY(CDate("01/01/2007"), 28)


        'Ajouter la series au chart
        series1.ChartArea = chartArea1.Name
       

        Chart1.Series.Add(series1)
        
        Chart1.Series(0).IsXValueIndexed = False
       
       '3D
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
        
        'Style colomn
        Chart1.Series(0).ChartType = SeriesChartType.Column
      
        ' Set Chart control size
        Chart1.Size = New System.Drawing.Size(460, 260)

        ' Add chart control to the form
        Me.Controls.Add(Chart1)
Image non disponible

On remarque que les points sont affichés dans l'ordre des points et pas dans l'ordre chronologique.
Pour afficher par ordre chronologique il faut d'abord trier par date ascendante :

 
Sélectionnez
Chart1.DataManipulator.Sort(PointSortOrder.Ascending, "X", "Myserie")
Image non disponible

Une manière plus élégante est d'utiliser la propriété IsXValueIndexed = False de la series (sans Sort) :

 
Sélectionnez
Chart1.Series(0).IsXValueIndexed = False
Image non disponible

Là, les dates sont dans l'ordre et l'axe X indique toutes les années, même celles sans point.

En conclusion quel est l'effet de IsXValueIndexed ?

- Si Series.IsXValueIndexed = True le graph utilise les seules valeurs X de la series. Il indexe l'axe X sur la series.
(2003, 2004, 2008, 2006, 2007) pas 2005.
Noter que l'ordre de l'affichage est celui de l'ordre des points.

- Si Series.IsXValueIndexed = False le graph affiche toutes les valeurs:
(2003, 2004, 2005, 2006, 2007, 2008).
Noter que les points sont dans l'ordre croissant automatiquement.

IsXValueIndexed fonctionne pour tous les graph et pas seulement avec les dates.

III-B-15. Survol d'un point et changement d'aspect

Ici quand l'utilisateur final va survoler une colonne sur graphique, elle va changer d'aspect. C'est pour illustrer HitTest qui permet de voir sur quel objet du graphique est la souris.

 
Sélectionnez
'Un Chart nommé Chart1 a été posé sur la Form (en mode Designer), il affiche une series de colonnes
 
 Private Sub Chart1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Chart1.MouseMove

        ' Appel HitTest qui retourne l'objet sous le curseur
        Dim result As HitTestResult = Chart1.HitTest(e.X, e.Y)

        ' Remet sur toute la series les attributs  normaux
        Dim point As DataPoint
        For Each point In Chart1.Series(0).Points
            point.BackSecondaryColor = Color.Black
            point.BackHatchStyle = ChartHatchStyle.None
            point.BorderWidth = 1
        Next

        ' Si la souris est sur un data point
        If result.ChartElementType = ChartElementType.DataPoint Then
            ' Chercher quel data point dans la series
            Dim point1 As DataPoint = Chart1.Series(0).Points(result.PointIndex)

            ' Changer l'apparence du data point survolé
            point1.BackSecondaryColor = Color.White
            point1.BackHatchStyle = ChartHatchStyle.Percent25
            point1.BorderWidth = 2
        Else
            ' Curseur par défaut
            Me.Cursor = Cursors.Default
        End If

    End Sub
Image non disponible

Ici la souris est sur la deuxième colonne.

III-C. Les différents Graphiques

Il y a 35 types de graphiques.
Voici quelques types de graph :

Image non disponible

Il existe 2 sortes de graphiques :
- les types de graphiques qui ont un jeu d'axes principaux ( X et Y), et éventuellement un jeu d'axes secondaires. Ils sont simples affichant une ou plusieurs series ou complexes affichant des données boursières, statistiques ;
- les types de graphiques à base de formes, tels que les graphiques à secteurs, en anneau, en entonnoir, en pyramide, polaires et en radar.

Pour changer de type de graphiques, il faut modifier la propriété ChartType de la Series.

Chaque type de graphique a des propriétés communes à tous les types et a aussi des 'CustomProperties' (ou propriétés personnalisées) qui lui sont propres:
Exemple: pour modifier le style de colonnes (DrawingStyle n'appartient qu'au type Column) :

 
Sélectionnez
Chart1.Series(0).CustomProperties = "DrawingStyle=cylinder"

Autre syntaxe :

 
Sélectionnez
' Taille maximale des bubbles dans un graphique à bulles
 Chart1.Series(0)("BubbleMaxSize") = "20"

La difficulté est que VB n'aide pas à écrire les CustomProperties et que le nom de la propriété est sensible à la casse.

III-C-1. Graphiques avec axes X, Y

Le graphique Column

Jusqu'à maintenant on avait utilisé des 'Column' qui est un type de graphique histogramme; il utilise une séquence de colonnes pour comparer des valeurs dans différentes catégories.
Il affiche une ou plusieurs Series contenant des DataPoint (avec une abscisse et une seule ordonnée :Y).

 
Sélectionnez
Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
Chart1.Series("Series1").ChartType = SeriesChartType.Column

Exemple en 3D :

Image non disponible

Type de colonne.

On peut modifier le type de colonne.
If faut utiliser dans la propriété CustomProperties de la série, l'attribut 'DrawingStyle'.
Les CustomProperties (ou Propriétés personnalisées) sont des propriétés propres à chaque type de graphique.

 
Sélectionnez
Dim series As Series
        For Each series In Chart1.Series
            series.CustomProperties = "DrawingStyle=cylinder"
        Next

Ici on modifie, pour toutes les series la CustomProperties et on met le DrawingStyle=cylinder.

Image non disponible

On a d'autres valeurs: Emboss, LightToDark, Wedge :

Image non disponible

Il est possible de mettre un bord avec une couleur et une épaisseur :

 
Sélectionnez
        'Bord d'un pixel d'épaisseur
        Chart1.Series(0).BorderWidth = 1
        'Couleur du bord
        Chart1.Series(0).BorderColor = Color.Black

Le graphique Line

Le graphique Line est utilisé pour illustrer des tendances dans les données au fil du temps.
Les points sont reliés par des lignes
Là aussi, une ou plusieurs series et une seule ordonnée.

 
Sélectionnez
Chart2.Series("Series1").ChartType = SeriesChartType.Line
Image non disponible

Notez qu'on a ajouté des marqueurs sur les 2 series.

Pour épaissir le trait, il faut utiliser BorderWidth de la series, on peut ajouter une ombre à la ligne :

 
Sélectionnez
'Line d'épaisseur 5
 Chart1.Series(0).BorderWidth = 5
 
 'Ajouter une ombre
Chart1.Series(0).ShadowColor = Color.LightSalmon

'décalage de l'ombre, si 0 ombre derrière la ligne
Chart1.Series(0).ShadowOffset = 2

On peut afficher des Lines en 3D, dans ce cas on peut définir un bord avec une certaine épaisseur et une certaine couleur :

 
Sélectionnez
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
        Chart1.Series(0).ChartType = SeriesChartType.Line
        Chart1.Series(0).BorderWidth = 3
        Chart1.Series(0).BorderColor = Color.Chocolate
        Chart1.Series(0).Color = Color.Red
Image non disponible

La profondeur de la colonne est modifiable par: chart1.ChartAreas(0).Area3DStyle.PointDepth = 50

Le graphique StepLine

Graphique en escalier : la valeur Y affiche une valeur horizontale :

 
Sélectionnez
Chart1.Series(1).ChartType = SeriesChartType.StepLine
'Pour modifier l'épaisseur des StepLine
Chart1.Series(0).BorderWidth = 4
Image non disponible

Le graphique Spline:

On a une courbe qui passe par les points.

 
Sélectionnez
Chart1.Series(1).ChartType = SeriesChartType.Spline
'Pour modifier l'épaisseur du trait
Chart1.Series(1).BorderWidth = 4
Image non disponible

Le graphique Bar

On a des barres horizontales.

 
Sélectionnez
Chart1.Series(1).ChartType = SeriesChartType.Bar
Image non disponible

Le graphique Area

Il s'agit d'un graphique en Aires : le type de graphique en aires met l'accent sur le degré d'évolution dans le temps. Il montre également la relation des différentes parties.
Ici le graphique en aires 'Area' trace des lignes reliant chaque point de données d'une série. On peut afficher plusieurs Series, mais avec une seule valeur Y.

Exemple : avec une boucle on donne le type 'Area' à toutes les series du Chart :

 
Sélectionnez
Dim series As Series
        For Each series In Chart1.Series
            series.ChartType = SeriesChartType.Area
        Next
Image non disponible

Le graphique SplineArea

Voici un autre exemple de graphique en aire : le 'SplineArea' en 3D.
Ici le graphique en aires trace une courbe passant par chaque point de données d'une série.

 
Sélectionnez
        'Charger 2 tableaux x et y dans la Series1
        Chart2.Series("Series1").Points.DataBindXY(x, y)
        
        '  3D chart
        Chart2.ChartAreas(0).Area3DStyle.Enable3D = True
        Chart2.ChartAreas(0).Area3DStyle.IsRightAngleAxes = False
        Chart2.ChartAreas(0).Area3DStyle.Inclination = 40
        Chart2.ChartAreas(0).Area3DStyle.Rotation = 15
        Chart2.ChartAreas(0).Area3DStyle.LightStyle = LightStyle.Realistic
        Chart2.ChartAreas(0).Area3DStyle.Perspective = 20

        ' Type= SplineArea
        Chart2.Series("Series1").ChartType = SeriesChartType.SplineArea

        '  spline line tension 
        Chart2.Series("Series1")("LineTension") = "0.6"

        ' Enlever la marge de l'axe des X 
        Chart2.ChartAreas("ChartArea1").AxisX.IsMarginVisible = False
Image non disponible

On aurait pu ajouter des marqueurs :

 
Sélectionnez
    ' Mettre des Marker Lines
    Chart2.Series("Series1").CustomProperties = "ShowMarkerLines=true"

Les Graphiques Range, RangeBar, RangeColumn, SplineRange

Ces types de graphiques d'étendue de zone (Range) affichent deux valeurs Y par point de données,Les Y0 étant reliés en courbes ainsi que les Y1. La plage comprise entre les valeurs Y peut alors être remplie.
Autrement dit les valeurs Y0 et Y1 sont utilisées comme les limites supérieures et inférieures d'une colonne.

On a 2 ordonnées (2 Y).

Exemple : on crée des DataPoint avec 2 ordonnées genre Maximum-Minimum. On veut afficher la colonne 'entre' les 2 valeurs
Avec RangeColumn :

 
Sélectionnez
        'Chart1 existe déjà
        ' Créer un Chart Area
        Dim chartArea1 As New ChartArea()
        ' Ajouter le  Chart Area à Chart1
        Chart1.ChartAreas.Add(chartArea1)
        ' création d 'une series
        Chart1.Series.Add("series1")
        'On affiche la series dans ChartArea1
        Chart1.Series("series1").ChartArea = chartArea1.Name
        'On affiche des RangeColumn
        Chart1.Series("series1").ChartType = SeriesChartType.RangeColumn

        'Ajout de 3 points avec 2 ordonnées par point
        Dim p As New DataPoint
        p.XValue = 1
        p.YValues = {2, 5}
        Chart1.Series("series1").Points.Add(p)


        Dim p1 As New DataPoint
        p1.XValue = 2
        p1.YValues = {4, 6}
        Chart1.Series("series1").Points.Add(p1)

        Dim p2 As New DataPoint
        p2.XValue = 3
        p2.YValues = {3, 5}
        Chart1.Series("series1").Points.Add(p2)
        

        ' Dimension de Chart1
        Chart1.Size = New System.Drawing.Size(300, 200)

        ' Ajout control à la forme
        Me.Controls.Add(Chart1)
Image non disponible

Avec Range :

 
Sélectionnez
Chart1.Series("series1").ChartType = SeriesChartType.Range

Donne :

Image non disponible

Avec RangeBar, plutôt que des colonnes, on peut mettre des barres :

 
Sélectionnez
'on va mettre des cylindres pour faire plus joli
Chart1.Series("series1").CustomProperties = "DrawingStyle=cylinder"
       

Chart1.Series("series1").ChartType = SeriesChartType.RangeBar

Donne :

Image non disponible

Avec SplineRange, ce sont 2 courbes passant par les points qui délimitent la surface :

 
Sélectionnez
Chart1.Series("series1").ChartType = SeriesChartType.SplineRange

Donne :

Image non disponible

Les graphiques empilés : StackedColumn, StackedBar, StackedArea

Pour faire des colonnes des aires ou des barres avec 2 series de valeurs qui seront empilées (plusieurs valeurs sur une même colonne, barre ou aire).

Exemple avec un ChartType StackedColumn.
Mais attention, il ne faut pas mettre 2 ordonnées Y par point, mais faire 2 series et les mettre dans le même StackedGroupName.
Il faut que les deux séries soient alignées: comporter le même nombre de points et les mêmes valeurs dans les X correspondantes des series.

 
Sélectionnez
        'Chart1 existe déjà
        ' Créer un Chart Area
        Dim chartArea1 As New ChartArea()
        ' Ajouter le Chart Area au Chart
        Chart1.ChartAreas.Add(chartArea1)
        ' création d'une première series
        Chart1.Series.Add("series1")
        'On affiche la series dans ChartArea1
        Chart1.Series("series1").ChartArea = chartArea1.Name
        'On affiche des Stacked column
        Chart1.Series("series1").ChartType = SeriesChartType.StackedColumn
       
        'Ajout de 3 points dans la première serie
        Dim p As New DataPoint
        p.XValue = 1
        p.YValues = {2}
        Chart1.Series("series1").Points.Add(p)


        Dim p1 As New DataPoint
        p1.XValue = 2
        p1.YValues = {6}
        Chart1.Series("series1").Points.Add(p1)

        Dim p2 As New DataPoint
        p2.XValue = 3
        p2.YValues = {7}
        Chart1.Series("series1").Points.Add(p2)

        'On met des cylindres pour faire joli!!
        Chart1.Series("series1").CustomProperties = "DrawingStyle=cylinder"

        'Second series
        Chart1.Series.Add("series2")
        'On affiche la series dans ChartArea1
        Chart1.Series("series2").ChartArea = chartArea1.Name
        'On affiche en StackedColumn
        Chart1.Series("series2").ChartType = SeriesChartType.StackedColumn
       
        'Ajout de 3 points dans la seconde series 
        Dim p3 As New DataPoint
        p3.XValue = 1
        p3.YValues = {5}
        Chart1.Series("series2").Points.Add(p3)


        Dim p4 As New DataPoint
        p4.XValue = 2
        p4.YValues = {4}
        Chart1.Series("series2").Points.Add(p4)

        Dim p5 As New DataPoint
        p5.XValue = 3
        p5.YValues = {3}
        Chart1.Series("series2").Points.Add(p5)

        Chart1.Series("series2").CustomProperties = "DrawingStyle=cylinder"

        'On met les 2 series dans le même StackedGroup
        '(Peut importe le nom du group)
        Chart1.Series("series1")("StackedGroupName") = "Group1"
        Chart1.Series("series2")("StackedGroupName") = "Group1"


        ' Ajout control à la form
        Me.Controls.Add(Chart1)
Image non disponible

On peut aussi utiliser les StackedBar horizontales et les StackedArea.

Enfin il existe aussi les StackedColumn100, StackedBar100, StackedArea100 : la proportion cumulée de tous les éléments cumulés est égale à 100 %.

Exemple avec un StackedBar100 et 3 series :

 
Sélectionnez
Chart1.Series("series1").ChartType = SeriesChartType.StackedBar100
Chart1.Series("series2").ChartType = SeriesChartType.StackedBar100
Chart1.Series("series3").ChartType = SeriesChartType.StackedBar100

 'On met les 3 series dans le même StackedGroup
        '(Peut importe le nom du group)
        Chart1.Series("series1")("StackedGroupName") = "Group1"
        Chart1.Series("series2")("StackedGroupName") = "Group1"
        Chart1.Series("series3")("StackedGroupName") = "Group1"
        'on ajoute l'affichage des valeurs Y comme label
        Chart1.Series("series1").IsValueShownAsLabel = True
        Chart1.Series("series2").IsValueShownAsLabel = True
        Chart1.Series("series3").IsValueShownAsLabel = True
Image non disponible

Les graphiques à Points, à bulles (Bubble) :

Le graphique à Points utilise une ou des series (avec coordonnées X, Y) pour placer des points de taille égale sur le graphe :

 
Sélectionnez
Chart1.Series(0).ChartType = SeriesChartType.Point
Image non disponible

On pourrait modifier la forme des points et leur taille :

 
Sélectionnez
Chart1.Series(0).MarkerStyle = MarkerStyle.Diamond
Chart1.Series(0).MarkerSize = 15

Pour les graphiques à bulles : affiche des bulles (ou des carrés des étoiles, des diamants…) de tailles variables.
Coordonnées de la bulle :X, Y0 (première ordonnée). La taille de la bulle étant fonction de la seconde ordonnée Y1. On a donc ici 2 ordonnées par point.

 
Sélectionnez
'Chart1 existe déjà
        ' Créer un Chart Area
        Dim chartArea1 As New ChartArea()
        ' Add Chart Area to the Chart
        Chart1.ChartAreas.Add(chartArea1)
        ' création d 'une series
        Chart1.Series.Add("series1")
        'On affiche la series dans ChartArea1
        Chart1.Series("series1").ChartArea = chartArea1.Name
       
        'Ajout de 3 points avec 2 ordonnées par point
        Dim p As New DataPoint
        p.XValue = 1
        p.YValues = {2, 6}
        Chart1.Series("series1").Points.Add(p)


        Dim p1 As New DataPoint
        p1.XValue = 2
        p1.YValues = {6, 3}
        Chart1.Series("series1").Points.Add(p1)

        Dim p2 As New DataPoint
        p2.XValue = 4
        p2.YValues = {7, 4}
        Chart1.Series("series1").Points.Add(p2)


        ' Donner le type Bubble
        Chart1.Series(0).ChartType = SeriesChartType.Bubble

        ' chaque Buble sera rond (cela pourrait être carré...
        Chart1.Series(0).MarkerStyle = MarkerStyle.Circle
       
        ' Taille maxime des bubbles
        ' Chart1.Series(0)("BubbleMaxSize") = "20"

        ' Ajouter à chaque bubble un label donnant la taille
        Chart1.Series(0).IsValueShownAsLabel = True
        Chart1.Series(0)("BubbleUseSizeForLabel") = "true"

        ' Donner l'échelle
        'Chart1.Series(0)("BubbleScaleMin") = "0"
        Chart1.Series(0)("BubbleScaleMax") = "20"

        ' En 3D
        Chart1.ChartAreas(0).Area3DStyle.Enable3D = True

        Me.Controls.Add(Chart1)
Image non disponible

Les graphiques FastLine et FastPoint

Ils permettent d'afficher un très grand nombre de points de manière très rapide.
Exemple d'un FastLine :

 
Sélectionnez
  'Chart1 existe déjà
        ' Créer un Chart Area
        Dim chartArea1 As New ChartArea()
        ' Ajouter le Chart Area au Chart
        Chart1.ChartAreas.Add(chartArea1)
        ' création d'une première series
        Chart1.Series.Add("series1")
        'On affiche la series dans ChartArea1
        Chart1.Series("series1").ChartArea = chartArea1.Name
       
        ' Création de 20 0000 points
        Dim yValue As Double = 50.0
        Dim random As New Random()
        Dim pointIndex As Integer
        For pointIndex = 0 To 19999
            yValue = yValue + (random.NextDouble() * 10.0 - 5.0)
            Chart1.Series(0).Points.AddY(yValue)
        Next pointIndex

        '  fast line 
        Chart1.Series(0).ChartType = SeriesChartType.FastLine
        Chart1.Location = New Point(300, 20)
       
        ' Ajout control à la form
        Me.Controls.Add(Chart1)
Image non disponible

III-C-2. Graphiques statistiques ou boursiers avec axes X et plusieurs valeurs Y

Ils ont généralement une seule series, mais avec des points ayant plusieurs valeurs Y. Ils servent à montrer des distributions de données, des données statistiques ou boursières.

Graphique 'BoxPlot'

Ce graphique à surfaces résume la distribution des données. Un diagramme à surfaces affiche un rectangle vertical avec des lignes de valeurs s'étendant entre les deux extrémités.

Ici on a une seule series et chaque point comporte 6 valeurs Y :
Y0=Valeur minimale(T inversé en bas)
Y1=Valeur maximale(T en haut)
Y2=Zone inférieure (du rectangle)
Y3=Zone supérieure(du rectangle)
Y4=Moyenne (trait continu)
Y5=Médiane (Trait pointillé)

 
Sélectionnez
        'Chart1 existe déjà
        ' Créer un Chart Area
        Dim chartArea1 As New ChartArea()
        ' Ajouter un Chart Area au Chart
        Chart1.ChartAreas.Add(chartArea1)
        ' création d'une series
        Chart1.Series.Add("series1")
        'On affiche la series dans ChartArea1
        Chart1.Series("series1").ChartArea = chartArea1.Name
        
        'Ajout de 3 points avec 6 ordonnées par point
        Dim p As New DataPoint
        p.XValue = 1
        p.YValues = {1, 6, 2, 5, 3, 4}
        Chart1.Series("series1").Points.Add(p)


        Dim p1 As New DataPoint
        p1.XValue = 2
        p1.YValues = {2, 7, 3, 6, 3.5, 4}
        Chart1.Series("series1").Points.Add(p1)

        Dim p2 As New DataPoint
        p2.XValue = 3
        p2.YValues = {1.5, 5.5, 2.5, 4, 3.2, 4.3}
        Chart1.Series("series1").Points.Add(p2)

        'Type BoxPlot
        Chart1.Series(0).ChartType = SeriesChartType.BoxPlot
        'Epaisseur des traits
        Chart1.Series(0).BorderWidth = 3


        ' Set chart control location
        Chart1.Location = New System.Drawing.Point(350, 30)

        ' Set Chart control size
        Chart1.Size = New System.Drawing.Size(300, 200)

        ' Ajout control à la forme
        Me.Controls.Add(Chart1)

        '***Propriétés spécifiques au BoxPlot
        ' Set whiskers percentile
        Chart1.Series("Series1")("BoxPlotWhiskerPercentile") = "5"

        ' Set box percentile
        Chart1.Series("Series1")("BoxPlotPercentile") = "30"

        '  Affiche/efface la ligne de la Moyenne
        Chart1.Series("Series1")("BoxPlotShowAverage") = "false"

        ' Affiche/efface la ligne de la Mediane 
        Chart1.Series("Series1")("BoxPlotShowMedian") = "true"

        ' Show Unusual points : ajout de valeurs externes
        Chart1.Series("Series1")("BoxPlotShowUnusualValues") = "true"
Image non disponible

En fait, on utilise le BoxPlot sans donner les 6 valeurs Y.
On peut 'charger' la series du BoxPlot avec une autre series ne contenant qu'une valeur Y par point. Les valeurs supérieures, inférieures, maximums, minimums seront automatiquement calculées.

Mode de calcul
En statistique descriptive, un centile est chacune des 99 valeurs qui divisent les données triées en 100 parts égales, de sorte que chaque partie représente 1/100 de l'échantillon. La dénomination anglaise - percentile - est souvent utilisée abusivement.
Par défaut, les valeurs des zones supérieures et inférieures sont calculées à l'aide du 25e/75e centile (on peut modifier cela grâce à BoxPlotPercentile). Les valeurs du diagramme à surfaces (Maximum et Minimum)sont calculées à l'aide du 10e/90e centile (BoxPlotWhiskerPercentile permet de modifier).

 
Sélectionnez
' On crée une DataSeries de points.
Dim yValues As Double() = {55.62, 45.54, 73.45, 9.73, 88.42, 45.9, 63.6, 85.1,67.2, 23.6}
Chart1.Series("DataSeries").Points.DataBindY(yValues)

' On indique de 'charger' la BoxPlotSeries avec la DataSeries et de calculer tous les 6 Y.
Chart1.Series("BoxPlotSeries")("BoxPlotSeries") = "DataSeries"

' Calcul des zones supérieures et inférieures avec le 30/70 centile (25/75 par défaut)
Chart1.Series("Series1")("BoxPlotPercentile")="30"

' Calcul des maximums  et minimums avec le 5/95 centile (10/90 par défaut)
Chart1.Series("Series1")("BoxPlotWhiskerPercentile")="5"

'Voir la moyenne
Chart1.Series("BoxPlotSeries")("BoxPlotShowAverage") = "true"

'Voir la médiane
Chart1.Series("BoxPlotSeries")("BoxPlotShowMedian") = "true"

'Ajouter des valeurs unusuelles
'Les valeurs des séries de données d'origine qui ne sont pas comprises entre les valeurs minimale et maximale
' peuvent être affichées comme des valeurs individuelles
Chart1.Series("BoxPlotSeries")("BoxPlotShowUnusualValues") = "true"

Le graphique boursier : Stock.

Graphique boursier ou scientifique qui affiche 4 valeurs Y: le cours à l'ouverture, à la clôture, le plus haut et le plus bas. Les valeurs d'ouverture sont indiquées par les marqueurs sur la gauche, et les valeurs de clôture sont indiquées par les marqueurs sur la droite. La ligne verticale allant de la valeur minimum à la valeur maximum.

Y0=valeur la plus basse
Y1=valeur la plus haute
Y2=valeur d'ouverture
Y3=valeur de fermeture

 
Sélectionnez
'Chart1 existe déjà
        ' Créer un Chart Area
        Dim chartArea1 As New ChartArea()
        ' Add Chart Area to the Chart
        Chart1.ChartAreas.Add(chartArea1)
        ' création d 'une series
        Chart1.Series.Add("series1")
        'On affiche la series dans ChartArea1
        Chart1.Series("series1").ChartArea = chartArea1.Name
       
        'Ajout de 3 points avec 4 ordonnées par point
        Dim p As New DataPoint
        p.XValue = 2008
        p.YValues = {100, 600, 200, 500}
        Chart1.Series("series1").Points.Add(p)


        Dim p1 As New DataPoint
        p1.XValue = 2009
        p1.YValues = {200, 700, 300, 600}
        Chart1.Series("series1").Points.Add(p1)

        Dim p2 As New DataPoint
        p2.XValue = 2010
        p2.YValues = {150, 550, 250, 400}
        Chart1.Series("series1").Points.Add(p2)

        'Stock
        Chart1.Series(0).ChartType = SeriesChartType.Stock
        'Epaisseur du trait
        Chart1.Series(0).BorderWidth = 3
       
        ' Set chart control location
        Chart1.Location = New System.Drawing.Point(350, 30)

        ' Set Chart control size
        Chart1.Size = New System.Drawing.Size(300, 200)

        ' Ajout control à la forme
        Me.Controls.Add(Chart1)
Image non disponible

Noter qu'on a donné des valeurs représentant les années en X.

On peut afficher ou non les valeurs d'ouverture (« Open ») de fermeture (« Close ») ou les deux (« Both ») :

 
Sélectionnez
'N'afficher que les valeurs de fermeture:
 Chart1.Series(0)("ShowOpenClose") = "Close"

Le graphique bougie

Le type de graphique en bougies est utilisé pour les informations boursières (valeurs haute, basse, d'ouverture et de clôture). La taille de la courbe dépend des valeurs haute et basse, tandis que celle de la barre dépend des valeurs d'ouverture et de fermeture.
Les barres pour l'ouverture et la fermeture utilisent des couleurs différentes.
La couleur utilisée varie selon que le cours de l'action a augmenté ou baissé.

Même code que ci-dessus avec 4 ordonnées par point pour ce graphique de type CandleStick.
mais:

 
Sélectionnez
Chart1.Series(0).ChartType = SeriesChartType.Candlestick
Image non disponible

Si la valeur de fermeture est supérieure à la valeur d'ouverture, la couleur de la barre est déterminée par l'attribut personnalisé PriceUpColor. Si la valeur de fermeture est inférieure à la valeur d'ouverture, la couleur de la barre est déterminée par l'attribut personnalisé PriceDownColor.

Graphique à barres d'erreur

Ce graphique ErrorBar affiche des courbes assorties de marqueurs utilisés pour afficher des informations statistiques sur les données (valeur centrale, point d'erreur inférieur, point d'erreur supérieur).

Ce graphique de type ErrorBar accepte 3 valeurs Y, dans l'ordre : valeur centrale, point d'erreur inférieur, point d'erreur supérieur.

 
Sélectionnez
        'Le chart, la series et le ChartArea ont déjà été créés
        
        'Ajout de 3 points avec 3 ordonnées par point
        Dim p As New DataPoint
        p.XValue = 2008
        '3 valeurs y: centrale, inférieur, supérieur
        p.YValues = {400, 200, 600}
        Chart1.Series("series1").Points.Add(p)


        Dim p1 As New DataPoint
        p1.XValue = 2009
        p1.YValues = {300, 700, 200}
        Chart1.Series("series1").Points.Add(p1)

        Dim p2 As New DataPoint
        p2.XValue = 2010
        p2.YValues = {150, 50, 250}
        Chart1.Series("series1").Points.Add(p2)

        
        'Type= ErrorBar
        Chart1.Series(0).ChartType = SeriesChartType.ErrorBar
        
        'Epaisseur de la ligne
        Chart1.Series(0).BorderWidth = 3
        
        'Forme du marker du point central de moyenne
        'None, Line, Square, Circle, Diamond, Triangle, Cross, Star4, Star5, Star6, Star10
        Chart1.Series(0)("ErrorBarCenterMarkerStyle") = "Square"
        
        'Largeur des barres horizontales
        Chart1.Series(0)("PixelPointWidth") = "20"
Image non disponible

En fait on utilise le ErrorBar à partir d'une series qui ne contient qu'une ordonnée (une seule valeur Y); on lie cette series à la series de l'ErrorBar, les points inférieurs et supérieurs étant calculés à partir des points de la Dataseries et du point concerné.
On a le choix du mode de calcul (StandardDeviation, StandardError, Percentage, FixedValue).

 
Sélectionnez
'Chart1 existe déjà
        ' Créer un Chart Area
        Dim chartArea1 As New ChartArea()
        ' Add Chart Area to the Chart
        Chart1.ChartAreas.Add(chartArea1)
        
        'On crée une DataSeries pour contenir les valeurs, mais qui ne sera pas affichée
        Chart1.Series.Add("DataSeries")
        Dim yValues As Double() = {32.4, 56.9, 89.7, 98.5, 59.3, 33.8, 78.8, 44.6, 76.4, 68.9}
        
        'Grâce au binding on charge DataSeries (uniquement une valeur Y par point
        Chart1.Series("DataSeries").Points.DataBindY(yValues)

        'On crée une series ErrorBar qui sera affichée
        Chart1.Series.Add("ErrorBar")
        
        ' Type de graphique pour la series ErrorBar = ErrorBar
        Chart1.Series("ErrorBar").ChartType = SeriesChartType.ErrorBar

        ' On lie la series  ErrorBar avec la DataSeries
        Chart1.Series("ErrorBar")("ErrorBarSeries") = "DataSeries"

        ' Comment on va calculer le point inférieur et supérieur?
        ' (StandardDeviation, StandardError, Percentage, FixedValues)
        Chart1.Series("ErrorBar")("ErrorBarType") = "StandardDeviation"

        ' On affiche les points inférieur et supérieur?( UpperError, LowerError Both)
        Chart1.Series("ErrorBar")("ErrorBarStyle") = "Both"

        ' Comment est le marker du centre  marker style
        Chart1.Series("ErrorBar")("ErrorBarCenterMarkerStyle") = "Circle"
Image non disponible

À propos de la valeur de ErrorBarType
FixedValue nécessite impérativement un paramètre entre parenthèses qui permet de calculer la marge d'erreur comme une différence de valeur fixe par rapport à la valeur centrale.
Pour Percentage calcule la marge d'erreur comme un pourcentage de la valeur centrale. Si ce paramètre n'est pas spécifié, une marge d'erreur de 10 % est utilisée.
Pour StandardDeviation, les valeurs d'erreur sont déterminées en appliquant un calcul d'écart type aux valeurs centrales présentes dans la série de la barre d'erreur. Si le paramètre n'est pas spécifié, la valeur d'écart type 1 est utilisée.
Pour StandardError, les valeurs d'erreur sont déterminées en appliquant un calcul d'erreur standard aux valeurs centrales présentes dans la série de la barre d'erreur. Si le paramètre n'est pas spécifié, la valeur d'erreur standard 1 est utilisée.

Les types PointAndFigure, Kagi, Renko et ThreeLineBreak n'affichent que les variations des cours.

les valeurs que le graphique affiche sont différentes des données d'origine. En effet, une formule est appliquée aux données d'origine avant le traçage.

Graphique Renko

Le graphique Renko affiche une série de boxs verticales reliées entre elles où l'épaisseur la couleur et la direction (haut bas) des lignes dépendent de la variation de la valeur du cours. Ce graphique sert à repérer les changements de tendances des données, comme la tendance de la bourse.

 
Sélectionnez
         Dim series1 As New Series("Price")  

        ' Ajouter des points à la  series
        series1.Points.AddXY(1, 34)
        series1.Points.AddXY(2, 44)
        series1.Points.AddXY(3, 32)
        series1.Points.AddXY(4, 25)
        series1.Points.AddXY(5, 40)
        series1.Points.AddXY(6, 25)
        
        ' Add series to the chart
        series1.ChartArea = chartArea1.Name
       
        Chart1.Series.Add(series1)
        
        ' 3D
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
        
         'Utiliser un Graphique Renko
        Chart1.Series(0).ChartType = SeriesChartType.Renko
        
        ' Dimension des box
        Chart1.Series(0)("BoxSize") = "3"
        
        'Bord noir sur les boxes
        Chart1.Series(0).BorderColor = Color.Black
        
        'Couleur des valeurs haussiennes
        Chart1.Series(0)("PriceUpColor") = "LightBlue"
        
        'Couleur des valeurs 'descendantes'
        Chart1.Series(0).Color = Color.Gray
Image non disponible

Le type de représentation Renko se calcule de la façon suivante : si les prix de clôture dépassent le sommet de la brique précédente de la taille d'une boîte au moins, une ou plusieurs briques blanches sont dessinées à la suite. Si les prix de clôture tombent au-dessous du bas de la brique précédente d'un montant au moins équivalent à la taille d'une boîte, une ou plusieurs briques noires sont dessinées à la suite.

Graphique Ragi

 
Sélectionnez
        Chart1.Series(0).ChartType = SeriesChartType.Kagi
        ' Set the BoxSize attribute
        'Chart1.Series(0)("BoxSize") = "3"
        'Bord noir sur les ponts
        Chart1.Series(0).BorderColor = Color.Black
        'Couleur des valeurs ascendantes
        Chart1.Series(0)("PriceUpColor") = "pink"
        'Couleur des valeurs descendantes
        Chart1.Series(0).Color = Color.Blue
        Chart1.Series(0).BorderWidth = 3
Image non disponible

Graphique ThreeLineBreak

Le type de graphique en cassure de trois lignes affiche une série de boîtes ou lignes verticales qui reflètent l'évolution de cours.

il n'existe pas de montant prédéterminé pour la variation des cours. C'est l'action du cours qui donne l'indication d'une variation de cours. Le critère d'ajout d'une ligne est le dépassement par la valeur de données du haut ou du bas des trois lignes précédentes par défaut. Vous pouvez modifier ce nombre à l'aide de l'attribut personnalisé NumberOfLinesInBreak.

 
Sélectionnez
        Chart1.Series(0).ChartType = SeriesChartType.ThreeLineBreak
        ' Set the BoxSize attribute
        Chart1.Series(0)("BoxSize") = "3"
        'Bord noir sur les ponts
        Chart1.Series(0).BorderColor = Color.Black
        'Couleur des valeurs ascendantes
        Chart1.Series(0)("PriceUpColor") = "Lightpink"
        'Couleur des valeurs descendantes
        Chart1.Series(0).Color = Color.Gray
        
        'Ajout d'une ligne par le dépassement de 4 lignes
        Chart1.Series(0)("NumberOfLinesInBreak") = "4"
Image non disponible

III-C-3. Graphique à base de forme

Ici plus d'axes X et Y, on affiche une seule série.

Graphique de type Radar

On a une série de noms et des valeurs à afficher pour chaque nom :

 
Sélectionnez
        'Le Chart1 existe
        
        ' Créer Chart Area
        Dim chartArea1 As New ChartArea()

        ' Ajouter Chart Area à Chart
        Chart1.ChartAreas.Add(chartArea1)

        ' Créer data series lui donner un nom
        Dim series1 As New Series()
        series1.Name = "series1"
        Chart1.Series.Add("series1")

        ' Deux tableaux: valeur de la production et nom des pays
        Dim yValues As Double() = {65.62, 75.54, 60.45, 34.73, 85.42, 55.9, 63.6, 55.2, 77.1}
        Dim xValues As String() = {"France", "Canada", "Allemagne", "USA", "Italie", "Espagne", "Russie", "Suisse", "Japon"}
        Chart1.Series("series1").Points.DataBindXY(xValues, yValues)

        ' choisir un chartype radar 
        Chart1.Series("series1").ChartType = SeriesChartType.Radar

        '  style (Area, Line or Marker)
        Chart1.Series("series1")("RadarDrawingStyle") = "Area"

        '  circular area drawing style (Circle or Polygon)
        Chart1.Series("series1")("AreaDrawingStyle") = "Polygon"

        '  labels style (Auto, Horizontal, Circular or Radial)
        Chart1.Series("series1")("CircularLabelsStyle") = "Horizontal"

        ' Show as 3D
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
        Me.Controls.Add(Chart1)
        Chart1.Location = New System.Drawing.Point(350, 30)
Image non disponible

Créer un graph Camembert

On dit Pie (Tarte) en anglais, ils n'ont pas de camembert !!

 
Sélectionnez
'modifier simplement la ligne:
' choisir un chartype camembert
        Chart1.Series("series1").ChartType = SeriesChartType.Pie
Image non disponible

En 2D Pie accepte une propriété PieDrawingStyle qui peut prendre la valeur SoftEdge, Concave, Default pour modifier l'aspect.
De plus, en 2D ou 3D on peut 'sortir' une part de camembert, le point(2) et modifier le style du camembert par exemple :

 
Sélectionnez
Chart1.Series(0).Points(2)("Exploded") = "true"

Chart1.Series(0)("PieDrawingStyle") = "SoftEdge"
Image non disponible

La customProperties PieStartAngle permet de définir (en degré) l'angle de départ du premier élément de la series (90 par défaut).
On peut ajouter une bordure au camembert et aux portions d'une certaine couleur et d'une certaine épaisseur :

 
Sélectionnez
Chart1.Series(0).BorderColor = Color.Black
 Chart1.Series(0).BorderWidth = 3

En 3D on peut modifier l'épaisseur du disque :

 
Sélectionnez
Chart1.ChartAreas(0).Area3DStyle.PointDepth = 10

On remarque que les couleurs de la palette sont utilisées pour les différentes portions.

On se souvient qu'on peut mettre sur chaque portion du camembert un label affichant la valeur X des points, cela à l'aide d'un mot clé :

 
Sélectionnez
Chart1.Series(0).Label = "#VALX"

Graphique Polar

Le graphique polaire est un graphique circulaire ou les points de données sont affichés en utilisant l'angle et la distance par rapport au centre.

On peut afficher plusieurs series avec pour chaque point l'abscisse X contenant l'angle en degrés, une ordonnée Y contenant la distance au centre.

Par défaut, l'échelle des angles s'étend de 0 à 360 degrés. On peut utiliser les propriétés Minimum et Maximum de l'axe des X pour spécifier une autre échelle. La valeur d'angle minimale démarre en haut (position 12 heures) du graphique, mais peut être modifié grâce à la propriété Crossing(si crossing=90, le graphe démarre à 3H).

 
Sélectionnez
        'un Chart1 a déjà éte crée avec Dim Chart1 As New Chart
        ' Create Chart Area
        Dim chartArea1 As New ChartArea()

        ' Ajoute un Chart Area au Chart
        Chart1.ChartAreas.Add(chartArea1)

        ' Création d'une data series
        Dim series1 As New Series()
        Dim series2 As New Series()     

        ' Ajouter la  series au chart
        Chart1.Series.Add(series1)

        ' Set chart control location
        Chart1.Location = New System.Drawing.Point(350, 30)

        ' Set Chart control size
        Chart1.Size = New System.Drawing.Size(460, 260)

        ' Ajoute le chart control à la form
        Me.Controls.Add(Chart1)

        ' On remplie series data
        Dim angle As Double
        For angle = 0.0 To 360.0 Step 10.0
            Dim yValue As Double = (1.0 + Math.Sin((angle / 180.0 * Math.PI))) * 10.0
            Chart1.Series("Series1").Points.AddXY(angle, yValue)
        Next angle

        ' Type= polar 
        Chart1.Series("Series1").ChartType = SeriesChartType.Polar

        'Polar chart style (Line or Marker)
        Chart1.Series("Series1").CustomProperties = ("PolarDrawingStyle=Marker")

        ' Circular area drawing style (Circle or Polygon)
        Chart1.Series("Series1")("AreaDrawingStyle") = "Polygon"

        ' Labels style (Auto, Horizontal, Circular or Radial)
        Chart1.Series("Series1")("CircularLabelsStyle") = "Horizontal"

        '  3D
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
Image non disponible

L'échelle des angles s'étend de 0 à 360 degrés. Il est possible d'utiliser les propriétés Minimum et Maximum de l'axe des X pour spécifier une autre échelle. La valeur d'angle '0' démarre en haut (position 12 heures) du graphique, mais peut être modifié grâce à la propriété Crossing. Par exemple, la définition de la propriété Crossing = 90 entraine départ sur la position 3 heures.

Graphique en entonnoir

Le type de graphique en entonnoir (Funnel) affiche sous forme d'entonnoir des données qui, totalisées, sont égales à 100 %. Il n'y a qu'une série unique (une abscisse X, une seule ordonnée Y) ; il n'y a pas d'axe.

 
Sélectionnez
        ' Créer Chart Area 
        Dim chartArea1 As New ChartArea()

        ' Ajouter Chart Area à Chart
        Chart1.ChartAreas.Add(chartArea1)

        ' Créer data series lui donner un nom
        Dim series1 As New Series()
        series1.Name = "series1"
        Chart1.Series.Add("series1")

        ' Deux tableaux: valeur de la production et nom des pays
        Dim yValues As Double() = {15.62, 75.54, 60.45, 34.73, 85.42, 22.9, 93.6, 55.2, 77.1}
        Dim xValues As String() = {"France", "Canada", "Allemagne", "USA", "Italie", "Espagne", "Russie", "Suisse", "Japon"}
        
        'Binding pour charger la series
        Chart1.Series(0).Points.DataBindXY(xValues, yValues)
        
        'Mettre les xValues (nom de pays) dans les labels
        For i As Integer = 0 To 8
            Chart1.Series(0).Points(i).Label = xValues(i)
        Next
        
        ' choisir un chartype entonnoir
        Chart1.Series(0).ChartType = SeriesChartType.Funnel
        
        'Trier la series (si vous voulez)
        Chart1.DataManipulator.Sort(PointSortOrder.Descending, "Y", "series1")
       
        'Style d'affichage des valeurs Y: "YIsWidth"ou "YIsHeight"
        'La valeur Y modifiera la largeur du disque ou sa hauteur?
        Chart1.Series(0)("FunnelStyle") = "YIsHeight"

        ' Style des labels: ici en dehors avec ligne
        'Chart1.Series(0)("FunnelLabelStyle") = "Outside"

        ' labels à gauche
        Chart1.Series(0)("FunnelOutsideLabelPlacement") = "Right"

        ' Distance entre les disques
        Chart1.Series(0)("FunnelPointGap") = "2"

        ' Hauteur du point minimum
        Chart1.Series(0)("FunnelMinPointHeight") = "1"

        ' 3D mode
        Chart1.ChartAreas(0).Area3DStyle.Enable3D = True

        ' Angle 3D (entre -10 et 10): -10=vue de dessous, 10=vue de dessus.
        Chart1.Series(0)("Funnel3DRotationAngle") = "10"

        ' Style 3D  "CircularBase" ou "SquareBase" (base circulaire ou carrée)
        Chart1.Series(0)("Funnel3DDrawingStyle") = "CircularBase"
        '
        Me.Controls.Add(Chart1)
Image non disponible

Graphique en pyramide

Idem: une series, une ordonnée…

 
Sélectionnez
'....
 Chart1.Series(0).ChartType = SeriesChartType.Pyramid
Image non disponible

Attention, les propriétés se nomment PyramidPointGap, PyramideOutsideLabelPlacement…

Graphique en anneau

Voici le graphique en anneau ou Doughnut.

 
Sélectionnez
         ' Create Chart Area
        Dim chartArea1 As New ChartArea()

        ' Add Chart Area to the Chart
        Chart1.ChartAreas.Add(chartArea1)
        
        'Instanciation series sans Name
        Dim series1 As New Series("Myserie")
       
        'Instanciation en donnant directement un nom
        Dim series2 As New Series()

        Dim n As String = series1.Name
        Dim m As String = series2.Name



        ' Add data points to the first series

        series1.Points.AddXY("Pierre", 34)
        series1.Points.AddXY("Paul", 24)
        series1.Points.AddXY("Louis", 32)
        ' Add series to the chart
        series1.ChartArea = chartArea1.Name

        Chart1.Series.Add(series1)
      
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True


        ' Rotation du graphe
        Chart1.ChartAreas(0).Area3DStyle.Rotation = 30

        ' Inclinaison
        Chart1.ChartAreas(0).Area3DStyle.Inclination = 40

     
        Chart1.Series(0).ChartType = SeriesChartType.Doughnut
   
        ' labels style , par défaut label sur l'anneau
        Chart1.Series(0)("PieLabelStyle") = "Outside"

        ' epaisseur de l'anneau en pourcentage (=> trou central = ou- grand)
        Chart1.Series(0)("DoughnutRadius") = "60"

        ' Explose, le point 3  correspondant à Louis
        Chart1.Series(0).Points(2)("Exploded") = "true"

        ' Set Chart control size
        Chart1.Size = New System.Drawing.Size(360, 220)

        ' Add chart control to the form
        Me.Controls.Add(Chart1)
Image non disponible

III-C-4. Combinaison de type de graphique

On peut sur un même graphique afficher plusieurs series avec un type de graphiques différent :

 
Sélectionnez
Chart1.Series(0).ChartType = SeriesChartType.Column
Chart1.Series(1).ChartType = SeriesChartType.Spline
Image non disponible

Par contre certains types de graphiques sont incompatibles avec d'autres.

III-D. Binding sur les Chart

Tracer un graph à partir d'une colonne d'une Table (DataSource)

Ici on a une base de données, on utilise le menu 'Données' puis 'Ajouter une base de données' pour utiliser l'Assistant de source de données' et avoir une source de données. Ensuite dans la fenêtre Source de données à gauche on prend le DataSet et on le dépose dans la Form : il y a création automatique du DataBase1DataSet et des objets nécessaires.
Dans notre exemple il y a une DataBase1 contenant la Table nommée 'Inscrit', il y a des colonnes nommées 'Taille', 'Poids', 'Nom'…
On va afficher les tailles dans un Graph :

 
Sélectionnez
'DataSource indique la source de données
Chart1.DataSource = Database1DataSet
'Dans une series YValueMembers indique quelle colonne utiliser pour les valeurs Y
Chart1.Series(0).YValueMembers = "Taille"
'Bind() déclenche le Binding
Chart1.DataBind()
Image non disponible

DataSource accepte:
* SqlCommand
* OleDbCommand
* SqlDataAdapter
* OleDbDataAdapter
* DataView
* DataSet
* DataReader
* List
* Array
* IList
* IListSource
* IEnumerable

On va maintenant afficher taille et poids sur le graph : pour cela on crée une seconde series :

 
Sélectionnez
Chart1.DataSource = Database1DataSet
'On met la taille dans la première series
Chart1.Series(0).YValueMembers = "Taille"
'On crée une seconde Series
Chart1.Series.Add("series2")
'On met le poids dans la seconde series
Chart1.Series(1).YValueMembers = "Poids"
'On change les noms des series pour faire joli
Chart1.Series(0).Name = "Taille"
Chart1.Series(1).Name = "Poids"
'On met à jour
Chart1.DataBind()
Image non disponible

On peut mettre plusieurs valeurs en Y en indiquant pour YValuesMembers le nom de plusieurs colonnes séparé par des virgules.

Tracer un graph à partir de toutes les colonnes d'une Table (DataBindingTable)

 
Sélectionnez
Chart1.DataBindTable(Database1DataSet.Inscrit)
Image non disponible

Une series est créée pour chaque colonne.

Je peux indiquer quelle colonne sera utilisée pour l'axe des x, ici je vais indiquer la colonne 'Nom' :

 
Sélectionnez
  Chart1.DataBindTable(Database1DataSet.Inscrit, "Nom")
Image non disponible

Encore plus puissant: DataBindCrossTable :

 
Sélectionnez
'La source est la table Inscrit
 'La serie sur les 'Nom'
 'Id en X
 'Poids en Y
 'Mettre la taille en label
 Chart1.DataBindCrossTable(Database1DataSet.Inscrit, "Nom", "Id", "Poids", "label=Taille")
Image non disponible

Autre exemple d'Alex Gorev Msdn :

 
Sélectionnez
'Group by "Name" column, X ="Year", Y="Sales",
'Label= "Commissions.
chart1.DataBindCrossTab(myReader, "Name", "Year", "Sales", "Label=Commissions");
Image non disponible

Pour être complet, on rappelle DatBindXY sur un tableau :

 
Sélectionnez
Dim x() As Integer = {2, 3, 8, 6, 4, 5, 3}
Dim y() As Integer = {2, 3, 8, 6, 4, 5, 3}
      
Chart1.Series(0).Points.DataBindXY(x, y)

Comment afficher plusieurs series qui se recoupent ?

Exemple : on veut afficher des series contenant des données concernant Pierre, André, Julie pour la première série, Pierre, André, David pour la seconde série, Julie Marie pour la troisième série.
On va utiliser Chart2.AlignDataPointsByAxisLabel() pour combiner les données de chaque personne :

 
Sélectionnez
        Dim Chart2 As New Chart 
        Dim series1 As New Series()
        Dim series2 As New Series()
        Dim series3 As New Series()
        Chart2.Series.Add(series1)
        Chart2.Series.Add(series2)
        Chart2.Series.Add(series3)
       

        Chart2.ChartAreas.Add("chartArea1")

        ' Initialize tableau pour series 1
        Dim yval1 As Double() = {2, 6, 5}
        Dim xval1 As String() = {"Pierre", "André", "Julie"}

        ' Initialize tableau pour series 2
        Dim yval2 As Double() = {4, 5, 3}
        Dim xval2 As String() = {"Pierre", "André", "David"}

        ' Initialize tableau pour series 3
        Dim yval3 As Double() = {6, 5}
        Dim xval3 As String() = {"Julie", "Marie"}

        ' Bind les tableau aux series
        Chart2.Series(0).Points.DataBindXY(xval1, yval1)
        Chart2.Series(1).Points.DataBindXY(xval2, yval2)
        Chart2.Series(2).Points.DataBindXY(xval3, yval3)

        ' Aligne les series en utilisant les labels X
        Chart2.AlignDataPointsByAxisLabel()

        Me.Controls.Add(Chart2)
Image non disponible

III-E. Manipulation de données

Les points vides
Quand vous avez une series avec un point ne contenant pas de valeur Y, c'est un point vide.

On peut indiquer de forcer la valeur Y à zéro ou à la moyenne (des 2 points qui l'encadrent) :

 
Sélectionnez
'Ici on met les points vides à zéro:
Chart1.Series(0).EmptyPointStyle.CustomProperties = "EmptyPointValue = Zero"

On peut mettre 'Average' (moyenne) à la place de zero.

Exemple : le quatrième point est Empty.

 
Sélectionnez
        series1.Points.AddXY(5, 55)
        series1.Points.AddXY(1, 34)
        series1.Points.AddXY(2, 44)
        series1.Points.AddXY(3, Double.NaN)
        series1.Points.AddXY(4, 24)

On peut modifier l'aspect de ce point vide :

 
Sélectionnez
        Chart1.Series(0).EmptyPointStyle.BorderWidth = 1
        Chart1.Series(0).EmptyPointStyle.BorderColor = Color.Black
        Chart1.Series(0).EmptyPointStyle.MarkerColor = Color.Red
        Chart1.Series(0).EmptyPointStyle.MarkerSize = 15
        Chart1.Series(0).EmptyPointStyle.MarkerStyle = MarkerStyle.Cross
Image non disponible

Les points manquants

Un point manquant est absent de la series.
Si on a une series avec les valeurs x= 1, 2, 4, 5, un point ayant x=3 manque.
La méthode InsertEmptyPoints utilise les intervalles de l'axe des X afin de vérifier s'il existe un point pour chacun des intervalles. Si ce n'est pas le cas, la méthode insère un point vide.

 
Sélectionnez
'Syntaxe
'Paramètres: Interval, Type d'interval (Number, Days, Year..), Nom de la series.
Chart1.DataManipulator.InsertEmptyPoints(1, IntervalType.Number, "Series1")

Créons une series avec un point manquant :

 
Sélectionnez
        ' Create Chart Area
        Dim chartArea1 As New ChartArea()
        Chart1.ChartAreas.Add(chartArea1)
        ' Chart1.ChartAreas.Add(chartArea2)
        
        'Instanciation series 
        Dim series1 As New Series("Myserie")
 
        ' Ajouter data points pour series (Pas de point l'abcisse 3)
        series1.Points.AddXY(1, 34)
        series1.Points.AddXY(2, 44)
        series1.Points.AddXY(4, 24)
        series1.Points.AddXY(5, 55)
        
        series1.ChartArea = chartArea1.Name
        Chart1.Series.Add(series1)
        
        'L'axe des x indexé sur les valeurs x
        Chart1.Series(0).IsXValueIndexed = True
        
        Chart1.Series(0).ChartType = SeriesChartType.Line
        Chart1.Series(0).Color = Color.Red
       
        
        Chart1.Location = New System.Drawing.Point(350, 30)

        ' Set Chart control size
        Chart1.Size = New System.Drawing.Size(460, 260)

        ' Add chart control to the form
        Me.Controls.Add(Chart1)
Image non disponible

Sur l'axe des x, il y a les valeurs 1, 2, 4, 5.
Il y a un point manquant (x=3).
Avec DataManipulator.InsertEmptyPoints on va mettre des points vides aux points manquants.
Puis on va modifier le style de ces points vides :

 
Sélectionnez
        Chart1.DataManipulator.InsertEmptyPoints(1, IntervalType.Number, "Myserie")
        
        Chart1.Series(0).EmptyPointStyle.Color = Color.Gray
        Chart1.Series(0).EmptyPointStyle.BorderWidth = 1
        Chart1.Series(0).EmptyPointStyle.BorderDashStyle = ChartDashStyle.Dash
Image non disponible

La méthode Sort du DataManipulator permet de trier une series :

 
Sélectionnez
  'Dans la series1, on trie les ordonnées dans l'ordre ascendant.
  Chart1.DataManipulator.Sort(PointSortOrder.Ascending, "Y", "Series1")
Image non disponible

Exemple sans et avec le tri.

On peut utiliser un Filter :

 
Sélectionnez
'Elimine les points de Series1 si Y>30 et met les points qui restent
 'dans une nouvelle series qu'il crée.
 Chart1.DataManipulator.Filter(CompareMethod.MoreThan, 30, "Series1", "Series Output", "Y")
'La nouvelle series est affichée
Image non disponible

On peut forcer l'élimination de Point vide avec Chart1.DataManipulator.FilterSetEmptyPoints = True ou éliminer certaines valeurs avec Filter en ajoutant : Chart1.DataManipulator.FilterMatchedPoints = True

On peut grouper des données.
On utilise Chart1.DataManipulator.Group.

On va faire un regroupement par intervalle qui fractionne les points de données de la série en intervalles, en utilisant leurs valeurs X, puis remplace chaque intervalle par un point.
Ici on a une series1 contenant des points d'abscisse 1,2,3,4,5…, on va créer une series2 ou on a les points 2,4,6,8..avec en ordonnées la moyenne des points 1 et 2, 3 et 4, 4 et 5.

 
Sélectionnez
        'Les series series1 et series2 existent
        'Remplir la series1
        Dim yValues As Double() = {15.62, 75.54, 6, 3, 85.42, 22.9, 93.6, 55.2, 77.1}
        Dim xValues As Double() = {2, 3, 4, 5, 6, 7, 8, 9, 10}
        Chart1.Series("series1").Points.DataBindXY(xValues, yValues)
        'Ne pas afficher la series1 
        Chart1.Series("series1").ChartArea = ""
        
        'Grouper les données de la series1 dans la series2 avec un intervalle de 2 
        'en utilisant la moyenne
        Chart1.DataManipulator.Group("AVE", 2, IntervalType.Number, "series1", "series2")
Image non disponible

On peut faire un regroupement par Axis Label:
Soit une series 'Vente' contenant les chiffres de vente de différents vendeurs (nom des vendeurs en X), on va regrouper les chiffres de chaque vendeur en calculant en Y la moyenne des chiffres du vendeur :

 
Sélectionnez
Chart1.DataManipulator.GroupByAxisLabel("SUM", "Vente")

SUM peut être remplacé par AVE, LAST, FIST, MAX, MIN, Cont, Variance, Derivation, Center, HiLoOpCl(fourni 4 valeurs Y: Sup, Inf, Ouverture, Fermeture), HiLo.

On peut copier les valeurs d'une series de points dans une autre series :

 
Sélectionnez
Chart1.DataManipulator.CopySeriesValues("series1","series2")

'on peut choisir les valeurs X ou Y de plusieurs series
'Syntaxe "Serie:Y2" signifie les points Y2 de la series
Chart1.DataManipulator.CopySeriesValues("Bubble:Y1,Bubble:Y2", "Column:Y1,Line:Y1)

'Charger les données de 4 différentes series dans une series qui a 4 valeurs Y. 
Chart1.DataManipulator.CopySeriesValues("High:Y,Low:Y,Open:Y,Close:Y", _
    "Stock:Y1,Stock:Y2,Stock:Y3,Stock:Y4")

On peut faire des calculs sur les series : Moyenne, Médiane, Variance.

 
Sélectionnez
' Calcul de la moyenne
        Dim mean As Double = Chart1.DataManipulator.Statistics.Mean("Series1")

 ' Calcul de la médiane
        Dim median As Double = Chart1.DataManipulator.Statistics.Median("Series1")

 ' Calcul de la  Variance et de l'écart type
        Dim variance As Double = Chart1.DataManipulator.Statistics.Variance("Series1", True)
        Dim standardDeviation As Double = Math.Sqrt(variance)

À vous d'afficher les résultats !! Il existe aussi des fonctions financières.

On peut exporter les données d'une series (et les mettre dans un DataGridView) :

 
Sélectionnez
Dim dataSet1 As New DataSet()
 ' Exporter les données de Series1 dans un DataSet
dataSet1 = Chart1.DataManipulator.ExportSeriesValues("Series1")
    
    ' Remplir une Grid avec le DataSet. 
SeriesValuesDataGridView.DataSource = dataSet1

III-F. Imprimer un Chart, copier l'image

Imprimer : un jeu d'enfant :

 
Sélectionnez
         ' Voir la Page Setup dialog
        Chart1.Printing.PageSetup()

        ' Prévisualisation du chart
        Chart1.Printing.PrintPreview()

        ' Imprimer le  chart (sans Printer dialog)
        Chart1.Printing.Print(False)

Copier l'image du Chart dans le presse-papier :

 
Sélectionnez
        ' Créer un memory stream    
        Dim stream As New System.IO.MemoryStream()

        ' Entregistrer l'image du chart dans le  stream    
        Chart1.SaveImage(stream, System.Drawing.Imaging.ImageFormat.Bmp)

        ' Créer un BitMap et le remplir avec le stream    
        Dim bmp As New Bitmap(stream)

        ' Mettre le bitmap dans le  clipboard    
        Clipboard.SetDataObject(bmp)

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2020 Philippe Lasserre . Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.