Mashup Builder > Widgets > Widgets standard > Widget Graphique de planification (thématisable)
Widget Graphique de planification (thématisable)
Introduction
Le widget Graphique de planification affiche un graphique de planification dans votre application composite.
* 
Il est disponible en tant que widget standard sur la plateforme et en tant que composant Web à importer à partir d'un SDK.
Format des données
Les données du graphique de planification doivent se composer d'une table d'informations avec deux définitions de champ :
Ressources : définit les ressources à afficher sur l'axe des ressources.
Données : définit les tables d'informations imbriquées avec les données à afficher pour chaque ressource.
Ressource
Table d'informations de données
Définition de champ
Resource:{name:'Resource',baseType:'STRING'}
Data:{name:'Data',baseType:'INFOTABLE'}
Utilisation
Définit les valeurs de l'axe X pour la barre ou la colonne de graphique. Les données doivent être une chaîne. Chaque ligne est affichée en tant que catégorie sur l'axe X. Le nom défini pour cette colonne est l'option que vous devez sélectionner pour la propriété de widget ResouceField.
Définit la table d'informations contenant les données pour la ressource.
Type de base
STRING
INFOTABLE
Exemple de ligne
Resource:'Apple' : où Apple correspond au nom de la ressource.
Data:'Infotable1' : entité de table d'informations avec les données de ressource.
Pour chaque ressource que vous définissez dans la première table d'informations, vous devez créer une table d'informations avec des définitions de champ qui représentent la structure de données de la ressource dans le graphique. La table ci-après décrit la structure de données requise et les définitions de champ à utiliser pour la table d'informations de données :
reason
info
start
end
color
Définition de champ
reason:{name:'reason',baseType:'STRING'}
info:{name:'info',baseType:'STRING'}
start:{name:'start',baseType:'DATETIME'}
end:{name:'end',baseType:'DATETIME'}
color:{name:'color',baseType:'STRING'}
Utilisation
Champ obligatoire qui définit le nom de la tâche ou la raison de la journalisation de l'événement de ressource. Les données de cette colonne s'affichent sous forme de légendes de graphique.
Champ facultatif qui définit la description de l'événement de ressource.
Champ obligatoire qui définit la date de début de l'événement de ressource.
Champ obligatoire qui définit la date de fin de l'événement de ressource.
Champ facultatif qui définit une couleur spécifique pour la représentation de l'événement dans le graphique.
Type de base
STRING
STRING
DATETIME
DATETIME
STRING
Exemple de ligne
reason:'Maintenance' : où Maintenance correspond au nom de l'événement que vous souhaitez afficher sur le graphique.
info:'Maintenance event description' : où Maintenance event description correspond à la description de l'événement à afficher dans le graphique.
start:'2020-01-07 03:57:43.322' : date de début de l'événement de maintenance.
end:'2020-01-26 07:38:12.102' : date de fin de l'événement de maintenance.
color:'red' : l'événement est affiché en rouge.
* 
Les définitions de champ de la table d'informations doivent correspondre aux noms spécifiés dans la table précédente.
Chaque ligne représente l'heure ou la durée d'un événement ou d'une tâche de la ressource. L'image ci-après illustre le format de données renvoyées d'un service de données pour le graphique de planification :
Pour les options de contrôle de zoom d'intervalle, vous devez créer une table d'informations qui comprend deux champs : label et duration. Le type de base des données des deux champs doit être STRING. L'image suivante illustre le format des données renvoyées d'un service de données :
Les valeurs que vous pouvez utiliser dans le champ duration et la plage qu'elles représentent sont les suivantes :
Y : année
M : mois
W : semaine
d : jour
h : heure
m : minute
s : seconde
ms : milliseconde
* 
Les caractères sont sensibles à la casse. Par exemple, "M" représente le mois et "m" les minutes.
Liaison d'une source de données
Pour afficher des données sur le graphique :
1. Dans le panneau Données, ajoutez un service de données qui renvoie une table d'informations avec le format de données approprié pour le widget.
2. Liez la propriété All Data du service de données à la propriété Data du graphique.
3. Sélectionnez le graphique, puis dans le panneau Propriétés, définissez les propriétés suivantes :
ResourceField : sélectionnez la colonne de table d'informations à utiliser pour l'axe des ressources.
DataField : sélectionnez la colonne de table d'informations avec les données à utiliser pour chaque ressource. Chaque champ est une table d'informations contenue.
4. Cliquez sur Enregistrer, puis sur Afficher l'application composite.
Les données de table d'informations s'affichent dans le graphique.
Ajout d'un axe secondaire
Vous pouvez ajouter un axe secondaire à votre graphique de planification. L'axe secondaire est utilisé pour afficher la date dans un autre format ou une autre langue. Pour ajouter un axe de temps secondaire au graphique, procédez comme suit :
1. Sélectionnez le graphique, puis ouvrez le panneau Propriétés.
2. Cochez la case en regard de la propriété SecondTimeAxis. Des propriétés supplémentaires sont répertoriées.
3. Pour spécifier un format de date différent pour l'axe secondaire, entrez un modèle de date pour la propriété SecondTimeAxisDateFormatToken ou sélectionnez un jeton de localisation.
4. Cliquez sur Enregistrer, puis sur Afficher l'application composite.
L'axe de temps secondaire s'affiche en appliquant le format de date spécifié.
La capture d'écran suivante montre un widget Graphique de planification avec un axe secondaire :
Le graphique affiche des événements pour différentes ressources. Les axes de temps principal et secondaire sont utilisés pour afficher la date dans deux formats différents. L'axe principal indique le jour et le mois, tandis que l'axe secondaire précise le numéro de semaine. Pour afficher la date en utilisant le numéro de semaine, définissez la propriété SecondTimeAxisDateFormatToken sur w. Pour plus d'informations sur les formats disponibles, consultez la rubrique Formatage de la date et de l'heure pour les widgets.
La table ci-après répertorie les propriétés que vous pouvez utiliser pour activer et configurer l'axe de temps secondaire :
Propriété
Description
Type de base
Valeur par défaut
Liaison possible ? (O/N)
Prise en charge de la localisation
SecondTimeAxis
Ajoute un axe de temps secondaire au graphique.
BOOLEAN
Faux
O
N
SecondTimeAxisLabel
Spécifie l'étiquette de texte de l'axe de temps secondaire.
STRING
Deuxième axe de temps
O
O
SecondTimeAxisLabelAlignment
Aligne l'étiquette de l'axe de temps secondaire. Par défaut, l'étiquette est alignée à gauche.
STRING
Gauche
N
N
SecondTimeAxisDateFormatToken
Vous permet de localiser le format de date utilisé par l'axe de temps secondaire sur le modèle "dd-mm-yy". Par défaut, le format de date du système d'exploitation est utilisé.
STRING
N/A
O
O
Propriétés des widgets
Les propriétés du widget Graphique de planification sont répertoriées ci-dessous.
Nom de la propriété
Description
Type de base
Valeur par défaut
Liaison possible ? (O/N)
Localisable ? (O/N)
AxisZoom
Vous permet d'effectuer un zoom avant sur l'axe de temps.
Lorsque vous sélectionnez cette propriété, les propriétés DirectSelectionZoom, DragSelectionZoom, TimeAxisIntervalControl et TimeAxisRangeZoom s'affichent dans la liste des propriétés.
BOOLEAN
Faux
O
N
CustomClass
Classe CSS définie par l'utilisateur à appliquer à la div supérieure du widget.
Plusieurs classes peuvent être spécifiées, séparées par une espace.
STRING
n/a
O
N
DirectSelectionZoom
Vous permet d'effectuer un zoom avant en sélectionnant deux éléments de données dans le graphique.
Les options disponibles sont Aucun, Axe de ressources, Axe de temps et Les deux.
STRING
Aucun
O
N
DragSelectionZoom
Vous permet d'effectuer un zoom avant sur une partie spécifique du graphique en faisant glisser une zone de sélection autour de la plage de données que vous souhaitez afficher.
Les options disponibles sont Aucun, Axe de ressources, Axe de temps et Les deux.
STRING
Aucun
O
N
Data
Source de données table d'informations du graphique.
INFOTABLE
n/a
O
N
DataField
Sélectionne le champ de table d'informations qui contient les données de temps pour les ressources de graphique.
INFOTABLE
n/a
O
N
Disabled
Désactive le widget dans l'application composite.
Le widget s'affiche dans l'application composite, mais il n'est pas sélectionnable.
BOOLEAN
Faux
O
N
EmptyChartIcon
Spécifie l'icône à afficher lorsque le graphique est vide.
Entité de média
not visible
N
N
EmptyChartLabel
Spécifie le texte à afficher lorsque le graphique est vide.
STRING
[[ChartStateLabelEmpty]]
N
O
ErrorStateIcon
Spécifie l'icône à afficher lorsque le graphique est vide.
Entité de média
error
N
N
ErrorStateLabel
Spécifie le texte à afficher lorsque le graphique est vide.
STRING
N
O
LoadingIcon
Spécifie l'icône à afficher lors du chargement des données du graphique.
Entité de média
chart loading icon
N
N
NoDataSourceIcon
Spécifie l'icône à afficher lorsque le graphique n'est pas lié à une source de données.
Entité de média
bind
N
N
NoDataSourceLabel
Spécifie le texte à afficher lorsque le graphique n'est pas lié à une source de données.
STRING
[[ChartStateLabelNoData]]
N
O
EndTime
Définit la date et l'heure de fin de la plage de zoom.
DATETIME
n/a
O
N
ExternalPadding
Définit le remplissage à partir des axes.
Le remplissage est un pourcentage de la largeur de la barre.
NUMBER
25
O
N
HideDataTooltips
Masque les info-bulles qui s'affichent lorsque vous pointez ou sélectionnez un point de données dans le graphique.
BOOLEAN
Faux
N
N
HideLegend
Masque la zone de légende.
Lorsque vous sélectionnez cette propriété, les propriétés LegendAlignment, LegendFilter, LegendMarkerShapes, LegendMaxWidth et LegendPosition ne s'affichent pas dans la liste des propriétés.
BOOLEAN
Faux
O
N
HideDataTooltips
Masque les info-bulles qui s'affichent lorsque vous pointez ou sélectionnez un point de données dans le graphique.
BOOLEAN
Faux
N
N
HideNotes
Masque la zone de notes.
Lorsque vous sélectionnez cette propriété, les propriétés Notes, NotesAlignment et NotesPosition ne s'affichent pas dans la liste des propriétés.
BOOLEAN
Faux
O
N
HideResourcesAxis
Masque l'axe des ressources.
BOOLEAN
Faux
O
N
HideTimeAxis
Masque l'axe de temps.
BOOLEAN
Faux
O
N
HorizontalAxisMaxHeight
Définit la hauteur maximale de l'axe horizontal.
NUMBER
85
O
N
HorizontalAxisLabelsRotation
Définit l'angle de rotation des étiquettes sur l'axe horizontal. Vous pouvez entrer une valeur comprise entre -180 et 180.
NUMBER
Redimensionnement automatique
N
N
InternalPadding
Définit le remplissage entre les séries.
Le remplissage est un pourcentage de la largeur de la barre.
NUMBER
25
O
N
Label
Affiche l'étiquette de texte du graphique de planification.
STRING
Graphique de planification
O
O
LabelType
Définit le type d'étiquette du graphique de planification sur En-tête, En-tête secondaire, Etiquette ou Corps.
STRING
En-tête secondaire
O
N
LabelAlignment
Aligne l'étiquette du widget Graphique de planification A gauche, Au centre ou A droite.
Les options disponibles pour cette propriété dépendent du paramétrage de la propriété LabelPosition.
STRING
Gauche
N
N
LabelPosition
Définit la position de l'étiquette En haut ou En bas.
STRING
En haut
N
N
LabelReset
Définit l'étiquette du bouton de réinitialisation du contrôle de zoom.
STRING
Réinitialiser
O
O
LegendAlignment
Aligne le texte de la légende En haut, Au milieu ou En bas.
Les options disponibles pour cette propriété dépendent du paramétrage de la propriété LegendPosition.
STRING
En haut
N
N
LegendFilter
Ajoute un filtre de légende qui permet à l'utilisateur de filtrer le graphique lors de l'exécution.
BOOLEAN
Faux
N
N
LegendMarkerShapes
Définit la forme du marqueur de la légende de série de données sur Carré, Cercle ou Aucun.
STRING
Carré
N
N
LegendMaxWidth
Définit la largeur maximale de la zone de légende.
NUMBER
736
O
N
LegendPosition
Définit la position de la légende En haut, En bas, A gaucheou A droite.
STRING
A droite
N
N
MultipleDataSources
Vous permet de visualiser les données de plusieurs sources sur le graphique.
Lorsque vous sélectionnez cette propriété, la propriété NumberOfDataSources s'affiche dans la liste des propriétés.
BOOLEAN
Faux
N
N
Notes
Spécifie le texte à afficher à l'intérieur de la zone des notes dans le graphique. Vous pouvez entrer une chaîne ou sélectionner un jeton de localisation.
STRING
n/a
O
O
NotesAlignment
Aligne le texte de note A gauche, A droite ou Au centre.
Les options disponibles pour cette propriété dépendent du paramétrage de la propriété NotesPosition.
STRING
Gauche
N
N
NotesPosition
Définit la position de la zone des notes En haut ou En bas.
STRING
En bas
N
N
NumberOfDataSources
Définit le nombre de sources de données que vous pouvez lier au graphique.
NUMBER
2
N
N
NumberOfReferenceLines
Spécifie le nombre de lignes de référence à afficher dans le graphique. Vous pouvez ajouter jusqu'à 24 lignes de référence. Des propriétés supplémentaires sont ajoutées pour chaque ligne de référence.
NUMBER
O
N
N
NumberOfTimeLabels
Définit le nombre d'étiquettes à afficher sur l'axe de temps.
* 
Cette propriété est également appliquée à l'axe de temps secondaire.
NUMBER
N
O
N
ReferecneLineNLabel
Définit l'étiquette de texte de la ligne de référence.
STRING
O
O
N
ReferecneLineNValue
Définit la valeur de la ligne de référence. Vous pouvez sélectionner une date pour définir la ligne de référence.
DATETIME
O
N
n/a
ResourcesAxisLabel
Affiche le texte d'étiquette de l'axe des ressources.
STRING
Axe des ressources
O
O
ResourcesAxisLabelAlignment
Aligne l'étiquette de l'axe des ressources En haut, Au milieu ou En bas.
STRING
Au milieu
N
N
ReverseResourcesAxis
Affiche les valeurs de l'axe des ressources dans l'ordre inverse.
BOOLEAN
Faux
N
N
ReverseTimeAxis
Affiche les valeurs de l'axe de temps dans l'ordre inverse.
BOOLEAN
Faux
N
N
RulersInFront
Affiche les règles devant les valeurs des données. Par défaut, les règles sont affichées derrière les données.
BOOLEAN
Faux
O
N
SeriesClicked
Déclenche un événement lorsque vous cliquez sur un point de données.
n/a
n/a
O
N
ShowHideLegend
Ajoute un bouton afficher/masquer qui vous permet d'afficher ou de masquer la légende du graphique à l'exécution.
BOOLEAN
Faux
N
N
ShowResourcesAxisRuler
Affiche la règle de l'axe des ressources.
BOOLEAN
Faux
O
N
ShowTimeAxisRuler
Affiche la règle de l'axe de temps.
BOOLEAN
Faux
O
N
ShowZoomButtons
Affiche les boutons de zoom avant et arrière dans la barre d'outils du graphique lorsque le zoom est activé.
BOOLEAN
Faux
N
N
SparkView
Affiche une vue simplifiée de la visualisation du graphique. Activez cette propriété pour masquer les étiquettes, les légendes et les règles.
BOOLEAN
Faux
O
N
StartTime
Définit la date et l'heure de début de la plage de zoom.
DATETIME
n/a
O
N
TabSequence
Numéro de séquence du widget Graphique de planification lorsque vous appuyez sur la touche de tabulation.
NUMBER
n/a
N
N
TimeAxisIntervalControl
Ajoute des contrôles qui vous permettent d'effectuer un zoom avant sur l'axe de temps en fonction d'intervalles spécifiques.
Par défaut, la sélection de cette propriété est Aucun. Lorsque vous sélectionnez Liste déroulante, les propriétés TimeAxisIntervalControlLabel, TimeAxisIntervalData, TimeAxisIntervalAnchorPoint et TimeAxisIntervalAnchorPointLabel s'affichent dans la liste des propriétés.
STRING
Aucun
O
N
TimeAxisIntervalControlLabel
Spécifie l'étiquette pour les contrôles de zoom d'intervalle sur l'axe de temps.
STRING
n/a
O
O
TimeAxisIntervalData
Source de données pour les options de contrôle de zoom d'intervalle.
Lorsque vous sélectionnez une entrée dans la liste déroulante d'intervalle, le graphique est agrandi en fonction de la valeur de durée sélectionnée et du point d'ancrage de début/fin.
INFOTABLE
n/a
O
N
TimeAxisIntervalAnchorPoint
Vous permet de sélectionner la position d'ancrage de la plage d'intervalles dans le jeu de données.
Sélectionnez Début pour placer l'intervalle au début du jeu de données ou Fin pour placer l'intervalle à la fin.
Par exemple, si vous spécifiez un intervalle de 3 mois dans un jeu de données de 12 mois, vous pouvez sélectionner Début pour afficher les trois premiers mois du jeu de données, ou Fin pour afficher les trois derniers mois.
STRING
Début
O
N
TimeAxisIntervalAnchorPointLabel
Spécifie l'étiquette pour le point d'ancrage de l'intervalle sur l'axe de temps.
STRING
n/a
O
O
TimeAxisLabelAlignment
Aligne l'étiquette de l'axe de temps A gauche, A droite ou Au centre.
STRING
Gauche
N
N
TimeAxisLabel
Affiche le texte d'étiquette de l'axe de temps.
STRING
Axe de temps
O
O
TimeAxisDateFormatToken
Localise le format de date en utilisant le modèle JJ-MM-AA pour l'axe de temps.
STRING
n/a
O
O
TimeAxisRangeZoom
Ajoute des contrôles qui vous permettent de spécifier une plage de dates et heures pour effectuer un zoom sur l'axe de temps. Vous pouvez définir la plage à l'aide des propriétés StartTime et EndTime.
Lorsque vous sélectionnez cette propriété, les propriétés TimeAxisStartZoomLabel et TimeAxisEndZoomLabel s'affichent dans la liste des propriétés.
BOOLEAN
Faux
O
N
TimeAxisRangeZoomDateFormat
Localise le format de date de la zone de sélection de plage temporelle selon un modèle JJ-MM-AA. Les formats pris en charge sont basés sur la bibliothèque JavaScript Moment.js et sont sensibles à la casse.
STRING
n/a
N
N
TimeAxisRangeZoomDateWidth
Définit la largeur de la zone de sélection de date sur l'axe horizontal lorsque le zoom est activé.
NUMBER
332px
N
N
TimeAxisStartZoomLabel
Spécifie l'étiquette de début de sélection de la plage.
STRING
n/a
O
O
TimeAxisEndZoomLabel
Spécifie l'étiquette de fin de sélection de la plage.
STRING
n/a
O
O
VerticalAxisMaxWidth
Définit la largeur maximale de l'axe vertical.
NUMBER
85
O
N
Est-ce que cela a été utile ?