Graphique boursier (StockChart)

Le composant StockChart (Graphique Boursier) est un nouveau composant très riche en fonctionnalités.

Les principales différences avec le graphique classique  :

• La possibilité de comparer plusieurs séries de données dans le cadre d’un seul graphique.
• La gestion de l’absence de données dans une série.
• La possibilité d’avoir une représentation différente pour chaque série (courbe, histogramme, chandeliers…).

Introduction et terminologie #

Graphique #

Chaque graphique boursier est composé d’un ou plusieurs panels (panneaux).

Chaque panel peut avoir plusieurs séries.

On peut donc ajouter des séries de types ligne, colonne, palier, courbe, chandelier et bâtonnets à chaque panel.

On peut aussi ajouter des :

• Repère – pour souligner un événement exceptionnel, qui explique une variation inhabituelle des données.
• Légende – pour expliquer les séries et les activer/désactiver.
• Sélecteur de jeu de données – pour sélectionner le DataSet active et le DataSet à comparer.
• Sélecteur de périodes – pour sélectionner la période et saisir des périodes prédéfinies.
• Barre de temps – pour naviguer sur l’axe des catégories et visualiser une série prédéfinie.

Données #

La source de données pour le StockChart est un Hub. Il doit avoir au minimum un champ de type DateTime comme Catégorie et un de type numérique comme valeurs.
Chaque StockChart peut travailler avec plusieurs jeux de données, mais il n’affichera qu’un seul jeu de données à la fois sur tous les panels.
Le Hub doit regrouper toutes les données.
Le jeu de données contient aussi les jalons.
L’utilisateur peut définir plusieurs jeux des données et ajouter des champs dans ces jeux de données.

Construction d’un StockChart pas à pas #

Le Stockchart est bien adapté à la comparaison des données boursières avec ces séries de type chandeliers.

Dans notre exemple, nous allons comparer les cours en bourse de quelques sociétés SSII en France.

Les données de bourse proviennent de ABC Bourse

Préparation des données #

1. Télécharger le fichier StockChartDataA2Z.xlsx
2. Exportez-les données du fichier au format CSV et enregistrez-les sous « C:\Temp\StockChartData.csv ».
3. Créez la table SQL Server

Si vous rencontrez un souci de type « Erreur de conversion des données », alors remplacez les virgules par des points pour les valeurs décimales dans le .csv

USE [Demonstration]
GO

/****** Object:  Table [dbo].[StockChartDataA2Z]    Script Date: 25/10/2017 17:42:15 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[StockChartDataA2Z](
	[cot_date] [nvarchar](10) NULL,
	[ATOp_min_price] [decimal](18, 3) NULL,
	[ATOp_open_price] [decimal](18, 3) NULL,
	[ATOp_close_price] [decimal](18, 3) NULL,
	[ATOp_max_price] [decimal](18, 3) NULL,
	[ATOp_volume] [bigint] NULL,
	[ACNu_min_price] [decimal](18, 3) NULL,
	[ACNu_open_price] [decimal](18, 3) NULL,
	[ACNu_close_price] [decimal](18, 3) NULL,
	[ACNu_max_price] [decimal](18, 3) NULL,
	[ACNu_volume] [bigint] NULL,
	[CAPp_min_price] [decimal](18, 3) NULL,
	[CAPp_open_price] [decimal](18, 3) NULL,
	[CAPp_close_price] [decimal](18, 3) NULL,
	[CAPp_max_price] [decimal](18, 3) NULL,
	[CAPp_volume] [bigint] NULL,
	[ECONb_min_price] [decimal](18, 3) NULL,
	[ECONb_open_price] [decimal](18, 3) NULL,
	[ECONb_close_price] [decimal](18, 3) NULL,
	[ECONb_max_price] [decimal](18, 3) NULL,
	[ECONb_volume] [bigint] NULL,
	[IBMu_min_price] [decimal](18, 3) NULL,
	[IBMu_open_price] [decimal](18, 3) NULL,
	[IBMu_close_price] [decimal](18, 3) NULL,
	[IBMu_max_price] [decimal](18, 3) NULL,
	[IBMu_volume] [bigint] NULL,
	[SOPp_min_price] [decimal](18, 3) NULL,
	[SOPp_open_price] [decimal](18, 3) NULL,
	[SOPp_close_price] [decimal](18, 3) NULL,
	[SOPp_max_price] [decimal](18, 3) NULL,
	[SOPp_volume] [bigint] NULL
) ON [PRIMARY]

GO

BULK INSERT [dbo].[StockChartDataA2Z]
    FROM 'C:\Temp\StockChartData.csv'
    WITH
    (
    FIRSTROW = 2,
    FIELDTERMINATOR = ';',  --CSV field delimiter
    ROWTERMINATOR = '\n',   --Use to shift the control to next row
    ERRORFILE = 'C:\Temp\StockChartDataImpErr.txt',
    TABLOCK
    )

1. Créer la requête dans BiBOARD Studio pour sélectionner toutes les donnéesSELECT * FROM [dbo].[StockChartDataA2Z]

La Datasource est maintenant disponible, nous pouvons passer à la création du tableau de bord.

Création de Tableau de bord #

Posez le StockChart dans votre tableau de bord et liez-le avec votre datasource. Le Graphique Boursier (StockChart) se trouve dans l’onglet « Graphiques ».

Définitions des datasets du StockChart #

Les datasets (Jeux de données) permettent de choisir des sous-ensembles de données pour les afficher et les comparer entre eux. Ajoutez le premier dataset.
Si le nom proposé pour le dataset ne vous convient pas, vous pouvez le renommer. Dans cet exemple, c’est ATOS.
Choisir la catégorie qui sera l’axe des temps. Vous pouvez aussi choisir la couleur et le comportement pour ce dataset.
Ensuite, il faut définir le mapping pour associer les champs du dataset avec les noms qui seront présentés dans les séries.
Pour cela, cliquer sur Edition à droite du champ « ATOp_volume », le sélectionner en cochant la case puis modifier le nom du mapping FIN en « volume ».
Faites de même pour ces champs :

– « ATOp_min_price » à renommer en « min_price »

– « ATOp_open_price » à renommer en « open_price »

– « ATOp_close_price » à renommer en « close_price »

– « ATOp_max_price » à renommer en « max_price »

On réalisera la même configuration pour les autres datasets.
Une fois nos datasets définis, le graphique va ressembler à ceci :

Définition de panels #

L’avantage de stockchart est sa capacité à afficher plusieurs graphiques avec des données hétérogènes sur le même axe de temps.
C’est très utile pour visualiser et montrer les corrélations entre différents indicateurs.
La création des panels est l’opération indispensable pour la création du StockChart.
Pour ajouter un panel, il faut cliquer sur ‘+’ de la ligne Graphique dans le menu d’édition web du composant StockChart :

Définition des séries #

Les séries montrent l’évolution de nos indicateurs.
Suivant la même logique, il faut cliquer sur le ‘+ sur la section Série du panel’ :

Configurons la série de type chandelier :

• Sélectionner la série créée
• Choisir le type chandelier
• Choisir les mapping pour les valeurs de fermeture, haute, basse, ouverture et cliquer sur le bouton enregistrer en bas de menu édition.

Voici le résultat :

Titre du panel #

Vous pouvez modifier le titre du panel (section Titre).

Ajout de deuxième panel #

Autre chose intéressante, c’est la possibilité d’analyser plusieurs types de données simultanément. Ajoutons le panel avec le volume des actions sur le marché.
Pour cela, avec la même logique, ajoutons le panel avec le bouton « + » du nœud correspondant (Graphique), et ensuite sur le « + » du nœud Séries. Cette fois on va ajouter la série avec le type Colonne et avec la Valeur « volume ».

Il est aussi possible de changer la taille relative des panels. Pour ça, il faut se rendre sur les propriétés de panel et changer la propriété « Hauteur % » afin de modifier la taille en proportion entre les panels.
Cela va donner cette visualisation :

Activation de facilité de comparaison. #

Pour rendre la série comparable, il faut aller dans les propriétés de la série, « Activer le comparateur » et paramétrer les graphiques de comparaison. Par défaut, le graphique de comparaison va utiliser la couleur du dataset. Mais il est possible d’utiliser d’autres couleurs.
Par défaut si la comparaison est activée, le panel va être en mode pourcentage. Pour ne comparer que les valeurs, il faut changer la propriété de panel, qui s’appelle « Recalculer en % ». Si vous le changez à « Jamais », le panel ne va pas passer en mode pourcentage.

Il est aussi possible d’afficher le graphique comparateur dans la légende, cela donnerait la valeur précise pour chaque graphique participant en comparaison. Il faut bien sûr rendre visible la légende du panel.

Activation des jalons (marqueurs) #

Parfois, pour expliquer tel ou tel changement de données, il est utile de créer des jalons pour marquer des événements.
StockChart permet d’ajouter ces jalons de deux façons : de manière fixe pendant la configuration, ou pour plus de flexibilité à partir d’un hub.

Définition des jalons fixes. #

Pour ajouter un jalon fixe, cliquer sur le « + » du nœud Jalons. Pour le configurer : choisir la date, le type et l’associer au dataset et au graphique (une série d’un panel). L’apparence est configurable aussi.
Une fois la configuration finie, vous pouvez le rendre visible.

Définition des jalons à partir d’une Datasource. #

Il faut ajouter le générateur des jalons automatique, et le configurer. La configuration se fait par la spécification de source de données qui sera utilisée pour configurer les jalons/événements. Après, il faut définir les champs ou valeurs comme principaux aspects de marqueur.

Génération de repères #

La différence avec les jalons est que les repères permettent de couvrir des périodes sur l’axe de catégories ou les diapasons de valeurs sur l’axe des valeurs alors que les jalons couvrent une date/valeur unique.

Comme pour les jalons, il existe deux façons de créer les repères.

Création des repères pendant la configuration #

Il faut ajouter le repère dans l’arborescence le nœud du panel souhaité.
Au niveau de la configuration : choisir le diapason des valeurs ou des dates. Puis choisir un axe sur lequel le repère sera affiché. Cela peut être l’axe des catégories (temps), ou un des axes de valeurs. Et vous pouvez toujours configurer l’apparence.

Création des repères à partir d’une Datasource #

Le générateur de repères permet d’ajouter et configurer les repères à partir d’une Datasource. Comme dans le cas du générateur de jalons, le générateur de repères permet de choisir une Datasource et les champs qui seront sources des repères. Il est aussi possible de définir les valeurs fixes de certains paramètres.
Une fois que le générateur de repère est créé, vous pouvez le rendre visible.

Paramètres de curseur #

Le curseur permet de mieux savoir ou se situe votre pointeur et d’afficher des informations complémentaires sur un point du graphique, telles que les valeurs sur l’axe des catégories, des graphiques comparés, etc.
Pour configurer l’apparence et les aspects du comportement de curseur, cliquer sur la section Curseurs.

Paramètres de barre de temps #

La barre de temps sert à limiter et à se déplacer sur la période d’analyse. En règle générale elle se trouve sur le bas de StockChart et ressemble au composant Sélecteur de période.
Vous pouvez configurer l’apparence de la bande de période, et aussi afficher une miniature de série en cliquant sur « Barre de temps ».

Paramètres du sélecteur de dataset #

La sélection de dataset pour l’affichage et la comparaison peut être personnalisée dans la section « Sélecteur de dataset ». Les jeu de données et la position du sélecteur sont personnalisables.
Notez que les positions en Haut ou en Bas permettent d’ajouter à la comparaison qu’un seul dataset.
Il est pratique de garder le sélecteur de dataset et le sélecteur de période ensemble.

Paramètres du sélecteur de période. #

En plus de la barre de temps, le stockchart permet de saisir la période avec le clavier et des boutons personnalisables afin d’avoir des choix de période en un clic. L’apparence de contrôle qui permet cela est configurable dans le groupe de « Sélecteur de période ».

Création des graphiques empilées #

Les graphiques empilés et empilés 100 % permettent d’afficher la part de chaque partie dans la même colonne.
Pour faire le stockchart empilé, il faut ajouter l’axe de valeur s’il n’existe pas, et saisir la propriété « Type de pile ».
Voici l’exemple pas à pas.

Ajouter les mappings à chaque dataset, pour faire le lien entre les champs du hub et les datasets du stockchart #

Voici l’exemple du mapping  :

Ajouter le panel #

Ajoutez un panel qui va contenir les séries des parts de marché.

Ajoutez l’axe des valeurs #

Dans la propriété « Type de pile » choisissez « Normal » ou « 100% » ou « 3D ».

Ajoutez 6 séries sur votre panel. #

Il faut ajouter une série pour chaque société. Pour cette raison, il était nécessaire d’ajouter 6 nouveaux mappings pour chaque dataset (6 mappings par dataset).
Associez chaque série avec chaque mapping et choisissez le type de série, colonne ou aire. Ensuite, si vous renseignez la couleur souhaitée, désactivez l’option « jeu de couleur » pour forcer votre choix de couleur, puis renseignez l’intensité de la ligne et le remplissage.