Intégration de nouveaux composants dans WebI (Speedometers, Jauges, …)

Vous souhaitez rendre vos rapports WebI encore plus sexy, interactifs, avec la possibilité d’intégrer des speedometers ou des jauges dynamiques ?

Ceci est possible en intégrant du code JavaScript dans vos rapports WebI !

Ces éléments que nous allons vous présenter ont été construits à partir de code JavaScript récupéré sur le web et adapté au besoin.

  • Site sur lequel vous pouvez récupérer ce type de code JavaScript : http://github.com/vjt/canvas-speedometer
  • Adaptation du code JavaScript : Florent LAINE
  • Création du Dashboard : Adrien PLAUD
  • Speedometer : Open source (C) 2010-2015 <anonymous> and (C) 2010-2015 @vjt
  • Jauge : Open source under BSD 2-clause Copyright (c) 2015, Curtis Bratton

L’intégration de ces nouveaux composants nécessite quelques Pré-requis :

  • Un navigateur web : IE 9 ou supérieur, Chrome
  • Ces nouveaux composants ne fonctionnent qu’en mode HTML
  • Ces nouveaux composants ne sont pas exploitables lors de l’export CSV ou Excel

Exemple de rapport WebI mélant des Speedometers et des composants natifs à WebI

Speedometers Webi

Exemple d’Intégration d’un Speedometer

Speedometer Webi

La création du Speedometer n’est pas très compliquée, mais il faut bien suivre les quelques étapes nécessaires.

  • Modifier ou créer un nouveau rapport WebIntelligence
  • Créer une cellule contenant l’indicateur à afficher
    • Créer une cellule vide
    • Clic-droit sur cette cellule > Format de cellule > Général > Lire le contenu comme : HTML
    • Intégrer dans la nouvelle cellule la formule suivante :

= »div id =\ » »+ »Speedo1″+ »\ » »+ « > »+[Nom_Indicateur]+ »</div> »

[Nom_Indicateur] est la mesure de votre fournisseur de données que vous souhaitez afficher

  • Créer une cellule contenant le Speedometer
    • Créer une cellule vide
    • Clic-droit sur cette cellule > Format de cellule > Général > Lire le contenu comme : HTML
    • Intégrer le code JavaScript récupéré sur le Web (Ci-dessous un extrait du code utilisé pour notre Speedometer)
    • Cette deuxième cellule fait appel à la première contenant l’indicateur, il est donc important de bien respecter l’ordre de création

= »<div id =\ » »+ »Speedo1″+ »\ » »+ « > »+[Indicateur]+ »</div> »
<html>
<!– Check out the source code on http://github.com/vjt/canvas-speedometer –>
<head>
<meta http-equiv= »X-UA-Compatible » content= »IE=Edge » />

<!– Style Sheet : to defined the dimension of the speedometer –>
<style>
#speedometer {
width: 200px;
height: 200px;
}
#controls {
width: 0px;
}
</style>

<!–Javascript Functions –>
<script type= »text/javascript »>
(function(){
// Andrea Giammarchi – Mit Style License
var extend = {
// Circle methods
circle:function(aX, aY, aDiameter){
this.ellipse(aX, aY, aDiameter, aDiameter);
……
…….
…….
// Customization

var MinValue = options.min || 0.0;
var MaxValue = options.max || 100.0;
var CurValue = options.value || MinValue;

// Threshold
// OPTION to manage size of the target value
//var Threshold = options.threshold || 50.0;
var Threshold = 75.0;
//var ThreshPivot = options.thresholdPivot || 35.0;
var ThreshPivot = 10.0;

// Meter, and correct user coords (cartesian) to the canvas std plane coords
var MeterFromAngle = (op tions.meterFromAngle || -135.0) – 90.0;
var MeterToAngle = (options.meterToAngle || 135.0) – 90.0;
var MeterRimAngle = MeterToAngle – MeterFromAngle;

// OPTION to modifiy the number of ticks (4 => 0 – 25 – 50 – 75 – 100)
var MeterTicksCount = 4;
//options.meterTicksCount || 10;
//var MeterMarksCount = options.meterMarksCount || 3;
// Nombre de traits à l’intérieur de deux gros traits
var MeterMarksCount = 4;
var MeterGapScale = (options.meterGapScale || 10) / 100.0;
if (MeterGapScale > 1) MeterGapScale = 1;
……….
……….
……….
</body>
</html>

Exemple d’intégration d’une jauge liquide interactive

Jauge Webi

De la même manière que pour le Speedometer, il est possible d’intégrer des composants interactifs.

  • Modifier ou créer un nouveau rapport WebIntelligence
  • Créer une cellule contenant l’indicateur à afficher
    • Créer une cellule vide
    • Clic-droit sur cette cellule > Format de cellule > Général > Lire le contenu comme : HTML
    • Intégrer la formule suivante :

= »<div id =\ » »+ »JaugeValue »+ »\ » »+ « > »+[ Nom_Indicateur]+ »</div> »

[Nom_Indicateur] est la mesure de votre fournisseur de données que vous souahitez afficher

  • Créer une cellule contenant la jauge
    • Créer une cellule vide
    • Clic-droit sur cette cellule > Format de cellule > Général > Lire le contenu comme : Html
    • Intégrer le code JavaScript récupéré sur le Web (Ci-dessous un extrait du code utilisé pour notre jauge liquide)
    • Cette deuxième cellule fait appel à la première contenant l’indicateur, il est donc important de bien respecter l’ordre de création

<!DOCTYPE html>
<html>
<head lang= »en »>
<meta charset= »UTF-8″>
<title></title>
<script src= »http://d3js.org/d3.v3.min.js » language= »JavaScript »></script>
<style>
.liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
</style>
</head>
<script>
!function(){function n(n){return n&&(n.ownerDocument||n.document||n).documentElement}function t(n){return n&&(n.ownerDocument&&n.ownerDocument.defaultView||n.document&&n||n.defaultView)}function e(n,t){return t>n?-
………
……..
…….
/*!
* @license Open source under BSD 2-clause (http://choosealicense.com/licenses/bsd-2-clause/)
* Copyright (c) 2015, Curtis Bratton
* All rights reserved.
*
* Liquid Fill Gauge v1.1
*/
function liquidFillGaugeDefaultSettings(){
return {
minValue: 0, // The gauge minimum value.
maxValue: 100, // The gauge maximum value.
circleThickness: 0.05, // The outer circle thickness as a percentage of it’s radius.
circleFillGap: 0.05, // The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.
circleColor: « #178BCA », // The color of the outer circle.
waveHeight: 0.05, // The wave height as a percentage of the radius of the wave circle.
waveCount: 1, // The number of full waves per width of the wave circle.
waveRiseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it’s final height.
waveAnimateTime: 18000, // The amount of time in milliseconds for a full wave to enter the wave circle.
waveRise: true, // Control if the wave should rise from 0 to it’s full height, or start at it’s full height.
waveHeightScaling: true, // Controls wave size scaling at low and high fill percentages. When true, wave height reaches it’s maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appear totally full or empty when near it’s minimum or maximum fill.
waveAnimate: true, // Controls if the wave scrolls or is static.
waveColor: « #178BCA », // The color of the fill wave.
waveOffset: 0, // The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.
textVertPosition: .5, // The height at which to display the percentage text withing the wave circle. 0 = bottom, 1 = top.
textSize: 1, // The relative height of the text to display in the wave circle. 1 = 50%
valueCountUp: true, // If true, the displayed value counts up from 0 to it’s final value upon loading. If false, the final value is displayed.
displayPercent: true, // If true, a % symbol is displayed after the value.
textColor: « #045681 », // The color of the value text when the wave does not overlap it.
waveTextColor: « #A4DBf8 » // The color of the value text when the wave overlaps it.
};
}
function loadLiquidFillGauge(elementId, value, config) {
if(config == null) config = liquidFillGaugeDefaultSettings();
……..
…….
…….
</script>
</body>
</html>

Libre à votre imagination d’intégrer tout le code JavaScript que vous souhaitez pour rendre encore plus sexy vos rapports Web Intelligence.

Article rédigé par Adrien PLAUD.



3 commentaires

  • mk

    Bonjour,
    votre code : [= » »+[ Nom_Indicateur]+ » »]
    est il compatible SAP BI4
    car il me met une erreur sur webi en ligne 2
    la syntaxe est elle correct ?

    Merci a vous

  • Jacofee

    MK,
    Apparemment, l’éditeur utilisé dans ce post transforme les guillemets (« ) en un autre caractère ( »). Il faut remplacer la séquence » (espace suivi de ») par « .
    Pour le reste, le code présenté ne fonctionne pas. Je n’obtiens aucun autre résultat qu’une cellule vide.

  • Bonjour,

    Effectivement l’éditeur de post a remplacer les « par des » . Comme l’a conseillé Jacofee, il faut remplacer le » précédé d’un espace par « .
    Ensuite, le code que vous avez dans le blog n’est qu’un extrait du code global. Sinon le post aurait été beaucoup trop long.
    Pour retrouver l’intégralité des codes JavaScript, il faut aller sur les liens indiqué en haut :
    Speedo : https://github.com/vjt/canvas-speedometer
    Jauge : https://gist.github.com/brattonc/5e5ce9beee483220e2f6
    En espérant que cette réponse pourra vous aider.

    Cordialement,

    Adrien PLAUD

Laisser un commentaire

Etes-vous un humain ? *

INSCRIVEZ-VOUS AU BLOG DECIVISION
Recevez tous les mois nos billets d'experts sur les produits de la gamme BI SAP : Web Intelligence, Lumira 2.0, SAP Analytics Cloud, Roambi, SAP HANA...