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 :
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 :
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 :
Exemple 2 : on peut afficher plusieurs séries (2 ici) dans un seul ChartArea :
Exemple 3 : on peut afficher 2 séries dans un seul ChartArea (celui du haut) et une troisième series dans un second ChartArea :
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 :
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 :
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 :
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.
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.
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.
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).
Si on met cette propriété à True, le graphique est affiché en 3D.
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.
À 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'.
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'.
Dans la propriété title, on va écrire 'Légende'.
Les modifications sur le titre et la légende donnent le graphique suivant :
III. Utiliser du code pour créer et modifier un graphique▲
Importer l'espace de nom tout en haut du module :
Imports System.Windows.Forms.DataVisualization.ChartingVoici les principaux objets d'un Chart :
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.
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.
'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 :
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é :
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 :
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 }.
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 :
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)
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 :
'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) :
On peut avoir des DataPoint ayant en abscisse du texte :
series1.Points.AddXY("Pierre", 34)
series1.Points.AddXY("Paul", 24)
series1.Points.AddXY("Louis", 32)
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.
'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) :
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 :
Voir aussi le chapitre des liaisons avec les DataSet.
Pour insérer un point, effacer un point, effacer une series :
'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 :
'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.Star6Proprié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 :
'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)
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.
Chart1.Series(0).IsXValueIndexed =True
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 :
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 = TrueLes 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).
' 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 = 1000Si 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 :
'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 = 3Autre 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 :
Chart1.ChartAreas(0).AxisY.MajorGrid.Interval = 5
Chart1.ChartAreas(0).AxisY.MajorTickMark.Interval = 2
On peut retourner le graph (de haut en bas ici) et indiquer sur quelle ordonnée les axes vont se croiser :
'Retournement
Chart1.ChartAreas(0).AxisY.IsReversed = True
'L'axe Y croisera l'axe des X à X=4
Chart1.ChartAreas(0).AxisX.Crossing = 4
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.
' 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)
À noter que pour colorer un intervalle sur 2, il y a plus simple :
' 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.
' 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"
Recalculer les axes
Si on ajoute des points à un graph, les axes ne sont pas recalculés automatiquement, il faut ajouter la ligne :
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.
'Affichons les valeurs Y au-dessus de chaque colonne
Chart1.Series(0).IsValueShownAsLabel = TrueOn peut aussi afficher un label pour un point particulier, comme on l'a vu plus haut, il est placé au-dessus du point :
'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 :
Chart1.Series(0).Points(2).LabelBorderColor = Color.BlackIl existe aussi le AxisLabel qui place le label le long de l'axe X :
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 :
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é :
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 :
Chart1.Series(0).Color = Color.BluePar défaut Chart utilise une Palette de couleurs donnant automatiquement une couleur par series.
Voici les palettes proposées :
On peut changer de Palette de couleurs (Fire, Light, Chocalate, Excel…).
Chart1.Palette = ChartColorPalette.Fire
On peut aussi créer une Custom palette et ainsi choisir la couleur de toutes les series :
' Utiliser une custom palette
Dim colorSet() As Color = {Color.Red, Color.Blue, Color.Green, Color.Purple}
Chart1.PaletteCustomColors = colorSet
Chart1.Palette = ChartColorPalette.NoneOn peut aussi modifier la couleur d'un seul point dans une series et ajouter un bord d'une couleur différente :
'Couleur 3e colonne
series1.Points(2).Color = Color.BlueViolet
'Mettre un bord
series1.Points(2).BorderColor = Color.Chocolate
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 :
'Pour modifier l'épaisseur des StepLine
Chart1.Series(0).BorderWidth = 4Dans un graph à points c'est le marker qu'il faut modifier pour modifier l'aspect des points :
Chart1.Series(0).MarkerStyle = MarkerStyle.Diamond
Chart1.Series(0).MarkerSize = 15Transparence
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 !!
'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)
On peut créer une CustomPalette avec des couleurs transparentes, c'est bien pratique pour afficher un graphique camembert transparent par exemple :
' 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.NonePour les ombres (en 2D seulement) il faut utiliser ShadowColor et ShadowOffset (qui indique l'épaisseur de l'ombre) de la series :
Chart1.Series(0).ShadowColor = Color.LightSalmon
Chart1.Series(0).ShadowOffset = 15
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 :
Dim d3 As New ChartArea3DStyle
d3.Enable3D = True
'd3.Rotation = 2
Chart1.ChartAreas("ChartArea1").Area3DStyle = d3
'***Plus simple:****
Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
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 :
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.
Exemple de code :
' 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.SimplisticLe LightStyle modifie la lumière : la couleur des côtés et du dessus des colonnes change :
Chart1.ChartAreas("ChartArea1").Area3DStyle.LightStyle = LightStyle.RealisticExemple avec Realistic, Simplistic, et None (dans ce dernier cas, une bordure est ajoutée automatiquement).
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 :
'Choix du type de marker
Chart2.Series("Series1").MarkerStyle = MarkerStyle.Circle
'Couleur du marker
Chart2.Series("Series1").MarkerColor = Color.Magenta
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 :
'Mettre un marker sur le second pint de la series
series1.Points(1).MarkerColor = Color.Cyan
series1.Points(1).MarkerStyle = MarkerStyle.Star6III-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é :
' 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
On peut mettre un bord plus simple, un fond coloré même dégradé en arrière-fond du chart (autour des ChartArea) :
' 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
De la même manière, on peut mettre un fond uni ou dégradé dans un ChartArea :
' 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
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.
'****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)
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 :
'*** 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 = 25ShadowOffset 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 :
Chart1.ChartAreas(0).BackImage = "pdfdvp.jpg"
'Mise à l'échelle pour que l'image remplisse le ChartArea
Chart1.ChartAreas(0).BackImageWrapMode = ChartImageWrapMode.Scaled
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' :
'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
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…).
'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"
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) :
'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.
On va dans un premier temps s'occuper du rectangle conteneur de la Legend :
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
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 :
Chart1.Legends(0).CustomItems.Clear()
' Ajouter un custom legend item
Chart1.Legends(0).CustomItems.Add(New LegendItem("Equipe 1", Color.Magenta, ""))
On peut faire disparaitre un item correspondant à une series dans la Legend.
Chart1.Series(0).IsVisibleInLegend = FalsePour modifier le texte d'un item il suffit de modifier le nom de la series :
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 :
' 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 :
' 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%).
'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)
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.
Chart1.ChartAreas(0).AlignWithChartArea = Chart1.ChartAreas(1).Name
Chart1.ChartAreas(0).AlignmentOrientation = AreaAlignmentOrientations.Horizontal
Chart1.ChartAreas(0).AlignmentStyle = AreaAlignmentStyles.AxesViewJe 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.
'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
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:
'****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
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 :
Chart1.Cursor = Cursors.HandOn 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é.
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
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.
' 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 :
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_GetToolTipTextIII-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 :
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 :
series1.Points.AddXY(CDate("01/01/2003"), 34)Exemple affichant des dates et des valeurs Y pour chaque date :
' 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)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 :
Chart1.DataManipulator.Sort(PointSortOrder.Ascending, "X", "Myserie")
Une manière plus élégante est d'utiliser la propriété IsXValueIndexed = False de la series (sans Sort) :
Chart1.Series(0).IsXValueIndexed = False
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.
'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
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 :
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) :
Chart1.Series(0).CustomProperties = "DrawingStyle=cylinder"Autre syntaxe :
' 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).
Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
Chart1.Series("Series1").ChartType = SeriesChartType.ColumnExemple en 3D :
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.
Dim series As Series
For Each series In Chart1.Series
series.CustomProperties = "DrawingStyle=cylinder"
NextIci on modifie, pour toutes les series la CustomProperties et on met le DrawingStyle=cylinder.
On a d'autres valeurs: Emboss, LightToDark, Wedge :
Il est possible de mettre un bord avec une couleur et une épaisseur :
'Bord d'un pixel d'épaisseur
Chart1.Series(0).BorderWidth = 1
'Couleur du bord
Chart1.Series(0).BorderColor = Color.BlackLe 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.
Chart2.Series("Series1").ChartType = SeriesChartType.Line
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 :
'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 = 2On peut afficher des Lines en 3D, dans ce cas on peut définir un bord avec une certaine épaisseur et une certaine couleur :
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
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 :
Chart1.Series(1).ChartType = SeriesChartType.StepLine
'Pour modifier l'épaisseur des StepLine
Chart1.Series(0).BorderWidth = 4
Le graphique Spline:
On a une courbe qui passe par les points.
Chart1.Series(1).ChartType = SeriesChartType.Spline
'Pour modifier l'épaisseur du trait
Chart1.Series(1).BorderWidth = 4
Le graphique Bar
On a des barres horizontales.
Chart1.Series(1).ChartType = SeriesChartType.Bar
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 :
Dim series As Series
For Each series In Chart1.Series
series.ChartType = SeriesChartType.Area
Next
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.
'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
On aurait pu ajouter des marqueurs :
' 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 :
'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)
Avec Range :
Chart1.Series("series1").ChartType = SeriesChartType.RangeDonne :
Avec RangeBar, plutôt que des colonnes, on peut mettre des barres :
'on va mettre des cylindres pour faire plus joli
Chart1.Series("series1").CustomProperties = "DrawingStyle=cylinder"
Chart1.Series("series1").ChartType = SeriesChartType.RangeBarDonne :
Avec SplineRange, ce sont 2 courbes passant par les points qui délimitent la surface :
Chart1.Series("series1").ChartType = SeriesChartType.SplineRangeDonne :
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.
'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)
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 :
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
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 :
Chart1.Series(0).ChartType = SeriesChartType.Point
On pourrait modifier la forme des points et leur taille :
Chart1.Series(0).MarkerStyle = MarkerStyle.Diamond
Chart1.Series(0).MarkerSize = 15Pour 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.
'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)
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 :
'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)
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é)
'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"
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).
' 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
'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)
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 ») :
'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:
Chart1.Series(0).ChartType = SeriesChartType.Candlestick
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.
'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"
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).
'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"
À 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.
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
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
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
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.
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"
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 :
'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)
Créer un graph Camembert
On dit Pie (Tarte) en anglais, ils n'ont pas de camembert !!
'modifier simplement la ligne:
' choisir un chartype camembert
Chart1.Series("series1").ChartType = SeriesChartType.Pie
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 :
Chart1.Series(0).Points(2)("Exploded") = "true"
Chart1.Series(0)("PieDrawingStyle") = "SoftEdge"
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 :
Chart1.Series(0).BorderColor = Color.Black
Chart1.Series(0).BorderWidth = 3En 3D on peut modifier l'épaisseur du disque :
Chart1.ChartAreas(0).Area3DStyle.PointDepth = 10On 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é :
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).
'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
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.
' 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)
Graphique en pyramide
Idem: une series, une ordonnée…
'....
Chart1.Series(0).ChartType = SeriesChartType.Pyramid
Attention, les propriétés se nomment PyramidPointGap, PyramideOutsideLabelPlacement…
Graphique en anneau
Voici le graphique en anneau ou Doughnut.
' 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)
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 :
Chart1.Series(0).ChartType = SeriesChartType.Column
Chart1.Series(1).ChartType = SeriesChartType.Spline
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 :
'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()
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 :
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()
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)
Chart1.DataBindTable(Database1DataSet.Inscrit)
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' :
Chart1.DataBindTable(Database1DataSet.Inscrit, "Nom")
Encore plus puissant: DataBindCrossTable :
'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")
Autre exemple d'Alex Gorev Msdn :
'Group by "Name" column, X ="Year", Y="Sales",
'Label= "Commissions.
chart1.DataBindCrossTab(myReader, "Name", "Year", "Sales", "Label=Commissions");
Pour être complet, on rappelle DatBindXY sur un tableau :
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 :
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)
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) :
'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.
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 :
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
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.
'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 :
' 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)
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 :
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
La méthode Sort du DataManipulator permet de trier une series :
'Dans la series1, on trie les ordonnées dans l'ordre ascendant.
Chart1.DataManipulator.Sort(PointSortOrder.Ascending, "Y", "Series1")
Exemple sans et avec le tri.
On peut utiliser un Filter :
'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
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.
'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")
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 :
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 :
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.
' 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) :
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 = dataSet1III-F. Imprimer un Chart, copier l'image▲
Imprimer : un jeu d'enfant :
' 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 :
' 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)