Histogramme / Bar chart

Indicateurs simples

Indicateur Histogramme / Bar chart

Description

Disponible depuis la version 1.2.0 de moovapps-kit-indicators.

L’histogramme est construit grâce à la bibliothèque dc.js et appartient à la famille “barChart”. Ainsi, il utilise tout les paramètres de Filtrage Général. De plus, il fait partie de MarginMixin, donc il utilise aussi tout les paramètres de Marges.

Paramétrage

variables	Valeurs possibles	Valeur par défaut	Commentaire	Dependance
class	com.moovapps.kit.indicators.controllers.extensions.DefaultIndicatorExtension	Aucune	Permet d’injecter des signets	Aucune
scaleBand	Boolean	false	recommanded to false: cf d3.scaleBand()	Aucune
xAxisLabel	Boolean	true	Affiche le label de l’axe X ( horizontal )	Aucune
yAxisLabel	Boolean	true	Affiche le label de l’axe Y ( vertical )	Aucune
centerBar	Boolean	true	Centre les barres autour de leur valeur respective	Aucune
renderHorizontalGridLines	Boolean	true	Affiche des lignes horizontales pour quadriller	Aucune
colors	Couleurs hexa code	#6495ED	Personnalise toutes les barres uniforméments(séparateur: “,”)	Aucune
colorsRange	Couleurs hexa code ( séparateur ‘,’)	vide	Personnalise toutes les barres spécifiquement. Les couleurs s’appliquent de gauche à droite. Attention ! Prévoir au moins plus de couleurs qu’il n’y aura de colonnes	Aucune

Exemples de paramétrage

Remarque

Requête pour l’exemple

1
2
3
4
5
6
7
8
9


SELECT xAxis, yAxis
FROM (
	SELECT r.Produit AS xAxis, r.NoteDuClient AS yAxis
	FROM vdp_workflow_instance wi 
	INNER JOIN r_wortest7 r ON wi.resourceTable_id = r.id  
	INNER JOIN vdp_workflow w ON wi.workflow_id = w.id  
	WHERE (((w.workflowContainer_id = 22  ) ) ) 
	ORDER BY xAxis
) as result

Avertissement

Ce qui est important dans la requête, c’est d’avoir au moins identifié et aliasé les champs xAxis et yAxis

Exemple de paramétrage spécifique côté composant :

1
2
3
4
5
6
7
8


class=com.moovapps.kit.indicators.controllers.extensions.DefaultIndicatorExtension
scaleBand=true
xAxisLabel=false
yAxisLabel=false
centerBar=true
renderHorizontalGridLines=false
colors=#6495ED
colorsRange=#f2f2f2,#e2e2e2,#d2d2d2,#c2c2c2,#b2b2b2,#a2a2a2

Exemple d’utilisation des filtres

Cf Filtres

Exemple d’utilisation des marges

Cf Marges

Paramétrage des légendes

variables	Valeurs possibles	Valeur par défaut	Commentaire	Dependance
legend	Boolean	false	Active l’affichage d’une légende	Aucune
legendFontSize	Integer	12	taille de la police	legend=true
legendDynamic	Boolean	false	Permet d’avoir une légende dynamique aux filtres	legend=true
htmlLegend	Boolean	false	cas 1: Utilisation recommandé, affiche la légende à droite du graphe	legend=true
legendX	Integer	50	cas 2: Position x en coordonnée cartésienne sur le graphique (correspond au bas a gauche du carré “legend”)	legend=true
legendY	Integer	400	cas 2: Position Y en coordonnée cartésienne sur le graphique	legend=true
legendHorizontal	Boolean	false	cas 2: Affiche la légende sur une ligne ou sur plusieurs	legend=true
legendItemHeight	Integer	5	cas 2: Poids de la police	legend=true
legendGap	Integer	0	cas 2: Distance entre 2 légendes. Horizontalement ou verticalement	legend=true
highlightSelected	Boolean	false	Active la surbrillance de la légende	legend=true

Exemples d’utilisation des légendes

1
2
3
4


legend=true
htmlLegend=true
legendFontSize=12
highlightSelected=false

1
2
3
4
5
6
7


legend=true
legendFontSize=12
legendX=50
legendY=420
legendHorizontal=true
legendItemHeight=10
legendGap=100