Comment insérer des jauges dans WebI

On nous avait dit qu’il était impossible de créer des jauges dans WebI … Et bien cela n’est plus tout à fait vrai !

En utilisant un petit script JavaScript, il est maintenant possible de réaliser une telle prouesse dans vos tableaux de bord en mode web … En fait rien de magique, il s’agit simplement de dévoyer les fonctionnalités de Google Chart pour les utiliser dans un rapport WebI !

Pour cela, il vous suffit de suivre le tutoriel ci-dessous :

Lorsque vous avez créé un rapport simple contenant un tableau tel que dans notre exemple, …

Faire Jauge Web Intelligence
Faire Jauge Webi

Pour un tel tableau avec les données d’exemple, il suffit d’ajouter une nouvelle cellule vierge dans le rapport et d’y copier-coller le code ci-dessous (ne pas oublier de la paramétrer pour un affichage en mode HTML) :

<html>
  <head>
  </head>
  <body>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["gauge"]});
       google.setOnLoadCallback(drawChart);
       function drawChart() {
        var data = google.visualization.arrayToDataTable([['Label', 'Value'], ['New York Magnolia',1911.43],['New York 5th',1239.59]]);
        var options = {
            max : 4000,
          width: 400, height: 120,
            greenFrom :1200, greenTo : 3500,
            yellowFrom :900, yellowTo : 1200,
           redFrom: 100, redTo: 900,
          minorTicks: 5
        };
        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

Si cela fonctionne bien, on peut néanmoins voir que les valeurs figurent en « dur » dans le code. Il faut donc maintenant variabiliser les valeurs avec la fonction @DATA@ pour rendre les jauges complètement dynamiques …
Notre script devient donc :

<html>
<head>
  </head>
  <body>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["gauge"]});
       google.setOnLoadCallback(drawChart);
 
      function drawChart() {
        var data = google.visualization.arrayToDataTable([['Label', 'Value'], @DATA@]);
        var options = {
            max : 4000,
          width: 400, height: 120,
            greenFrom :1200, greenTo : 3500,
            yellowFrom :900, yellowTo : 1200,
           redFrom: 100, redTo: 900,
          minorTicks: 5
        };
        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

Comme l’indicateur [Sales Revenue] est présenté en monnaie, il nous faut le formater correctement dans une variable dédiée :

[sales_form] = FormatNumber([Sales revenue]/1000; »##0.00″)

Il ne reste plus qu’à concaténer le magasin ([store_name]) avec cette valeur pour pouvoir l’afficher :

[line_data] = = »[‘ »+[store_name]+ »‘, »+[sales_form]+ »] »

Idem pour les autres valeurs qu’il nous faut également concaténer :

[conc] = [line_data] ForEach ([State];[Store name])+ », » + Previous(Self) ForEach ([State];[Store name])

Pour pouvoir utiliser la valeur [conc] dans une cellule à part, il me faut récupérer sa dernière valeur dans la table avec l’opérateur de contexte de calcul InReport() :

[data_prev] = Last([conc]) In Report

[data_prev] contient une virgule, que je dois donc éliminer :

[datatable] = =Left([data_prev];Length([data_prev])-1)

Il ne me reste donc plus qu’à mettre cette variable dans le script à la place du mot clef @DATA@ …

 [gauge_chart] = Replace([gauge_prev]; »@DATA@ »;[datatable])

Et puis pour finir, je mets cette variable dans ma cellule vierge …

Et voilà le résultat :

Résultat Jauges Webi

Article rédigé par Georges DUMINY.



9 commentaires

  • Lionel VALADOU

    Malheureusement ce type de jauge ne peut pas être transférer au document PDF généré à partir de Webi :-(.
    Une alternative?

  • DeciVision
    DeciVision

    Bonjour M. VALADOU,

    Effectivement ce type de jauge ne peut pas être affiché sur un document PDF mais dans la prochaine version BI4.2 SP4, qui sera disponible courant mai prochain, des nouveaux graphiques dont les jauges seront inclus nativement dans Webintelligence et pourront être affichés dans un document PDF.

    Georges Duminy

  • FlofloDeFrance

    Bonjour, je suis actuellement en 4.1 SP et je souhaites faire un essai sur l’insertion des jauges.
    Pour finaliser le test il me manque la variable : « gauge_prev » ? Pourriez-vous me l’indiquer?
    Et autre question est-ce qu’il y a des jauges dans la version 4.2 SP3?
    Merci. Cdlt, FFDF

  • FlofloDeFrance

    Version 4.1 SP5 >>pour FFDF

  • DeciVision
    DeciVision

    Bonjour,

    J’ai effectué plusieurs recherches dans le code utilisé pour créer la jauge de notre article de blog, et je n’ai trouvé aucune variable nommé « Gauge_prev ». Vous avez peut-être utilisé, une source Java différente de la nôtre. Je ne peux donc vous aider.
    Il n’y a pas de jauges dans la version 4.2 SP3, mais elles arrivent dans la version 4.2 SP4, plusieurs types de jauges sont nativement disponibles dans l’outil Web Intelligence en SP4.

    Cordialement,
    Julien DUGRIP

  • FloFloDe France

    Allo, Voici la ligne sur votre site internet qui me pausait soucis mais j’ai trouvé le contenu grâce au site de SAP (car c’est identique ) :
    [gauge_chart] = Replace([gauge_prev]; »@DATA@ »;[datatable])
    Alors sur le site SAP il semble dire que
    gauge_prev=
    = »

    google.load(\ »visualization\ », \ »1\ », {packages:[\ »gauge\ »]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
    var data = google.visualization.arrayToDataTable([[‘Label’, ‘Value’], @DATA@]);
    var options = {
    max : 4000,
    width: 400, height: 120,
    greenFrom :1200, greenTo : 3500,
    yellowFrom :900, yellowTo : 1200,
    redFrom: 100, redTo: 900,
    minorTicks: 5
    };
    var chart = new google.visualization.Gauge(document.getElementById(‘chart_div’));
    chart.draw(data, options);
    }

     »
    Je ne sais pas si c’est correcte.
    En effet, j’ai reussi à faire apparaître l’exemple avec les données déjà dans le code source. Mais impossible d’afficher les jauges en alimentant la variable @DATA@.
    Avez-vous une idée?
    Merci pour votre retour. Cdlt, Floflo

    PS lien SAP : https://blogs.sap.com/2015/01/09/how-to-insert-a-gauge-chart-inside-a-webi-document/comment-page-1/#comment-386677

  • FloFloDeFrance

    Bonjour, Avez-vous les différences entre SP3 et SP4? Merci de votre aide. Cdlt, FFDF

  • DeciVision
    DeciVision

    Bonjour,

    Je suis désolé mais je ne peux pas vous aider plus, la jauge a fonctionné correctement sur notre environnement de test, il faudrait analyser les différences entre les deux versions.
    Notre société, spécialisée dans les offres SAP BusinessObjects, propose de l’assistance ou de la prestation en fonction des demandes. N’hésitez pas à nous laisser vos coordonnées ou à nous contacter en direct si vous souhaitez que nous vous aidions à résoudre votre problème.

    Pour les différences entre le SP3 et le SP4, je vous invite à lire notre article de blog « BI 4.2 SP4 – Les nouveautés de la dernière version de SAP BusinessObjects

    Cordialement,
    Julien DUGRIP

  • Stéphane

    Bonjour,

    Le code html est à mettre dans une variable se nommant gauge_prev comme vous le supposez. Sur le blog de SAP , il s’agit de la variable gauge_preview.

    Par contre , il est préférable d’utiliser des librairies javacript comme d3.js ou plotly.js en lieu et place du service google qui a 2 inconvénients. Il y a des limitations en terme de nombre d’accès mais surtout les données sont transférées sur internet. Ce qui n’est pas forcément très sécurisé. L’avantage de d3.js ou plotly.js est que vous pouvez les héberger en interne. il existe , bien sûr , d’autre solution que c’est 2 librairies.

    A partir de la version 4.2 , il est préférable de passer par les customelement (https://blogs.sap.com/2016/03/15/how-to-build-a-custom-elements-service-for-sap-web-intelligence-42/)

    Cordialement,
    Stéphane

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...