SAP BI

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

Introduction

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.

Un projet ? Une question ?

Laissez-nous vos coordonnées et nous vous recontactons dans les plus brefs délais !

Articles récents