OSBI.FR - Open Source Business Intelligence

Les tableaux de bords dans Pentaho avec les C*tools

Introduction

Dans une suite décisionnelle, le tableau de bord (ou « dashboard ») est un élément clef pour fournir des informations synthétiques facilement accessibles.

Le pilotage stratégique, le pilotage opérationnel et les indicateurs de performances (KPIs) sont autant de cas d’utilisations des tableaux de bords. La plupart du temps, un dashboard présente un maximum d’informations dans un minimum de place, en faisant appel à une grande interactivité et à de multiples composants graphiques.

Mettre en place des tableaux de bords dans la version libre (Community) de Pentaho n’a pas été toujours une chose très aisée (ce n’est pas le cas de la version Enterprise qui propose un module WYSIWYG full Web à destination des utilisateurs métier).

Dans les premières versions de la plate-forme, les dashboards devaient être codés directement en langage JSP (Java Server Page), ce qui nécessitait une connaissance très avancée des classes Java internes, des libraires graphiques (JFreeChart) et du fonctionnement des séquences d’actions (Xactions).

Très difficile donc (voir impossible) de mettre en place des dashboards sans avoir un profil de développeur JAVA !!

C’est dans ce contexte qu’est né en 2009 le projet communautaire Pentaho CDF (Community Dashboard Framework), à l’initiative de Pedro Alves  (de WebDetails)

Son objectif était simple: fournir une API complète permettant de s’affranchir de la complexité interne de Pentaho grâce au paradigme MVC (Modèle-Vue-Contrôleur)

Au fur et mesure, d’autres projets se sont greffés à Pentaho CDF, pour constituer ce qu’on appelle désormais les « C*tools » :

  • CDA (Community Data Access), pour accéder de manière simple et flexible à de multiples sources de données (en SQL, MDX, XML, PDI, Metadata, scripting…). CDA dispose notamment d’un mécanisme de mise en cache et permet d’effectuer des jointures entre des sources hétérogènes par simple configuration XML.
  • CCC (Community Charting Components), une très bonne librairie de visualisation graphique s’appuyant sur Protovis, un projet open source de data-visualization (Javascript+SVG)
  • CST (Community Startup Tabs), un plugin qui permet de paramétrer les onglets à afficher au lancement de la « Pentaho User Console », en fonction des droits de l’utilisateur connecté
  • CDE (Community Dashboard Editor), pour la création et la publication de tableaux de bords directement depuis l’interface web de Pentaho.

Les C*tools permettent de délivrer des tableaux de bord d’une qualité professionnelle, en minimisant la complexité liée à de l’écriture de code. Jetez plutôt un œil sur cette présentation afin d’en prendre pleinement la mesure :

Installation des C*tools

Chacun des C*tools est disponible sous forme de plugin serveur Pentaho,  l’installation consiste au dépôt d’un simple dossier dans le répertoire /pentaho-solutions/system

(Note:  les C*tools fonctionnent à partir de la version 3.6 de Pentaho)

En raison des dépendances entre les différents plugins, il est vivement conseillé d’utiliser le script d’installation ctools-installer.sh (Linux). Ce script fonctionne également sous Windows à condition d’installer Cygwin (émulateur Linux pour Windows). Retrouvez tous les détails pour effectuer cette installation dans ce post de Pedro Alves.

Exemple de mise en place d’un tableau de bord

1. Principes de base de Pentaho CDE

Pour réaliser un tableau de bord avec Pentaho CDE, il faut avant toute chose avoir une idée assez précise du résultat final !

Cela revient à définir une petite maquette dans laquelle on va spécifier :

  • la structure du dashboard (le « Layout »)
  • les différents  composants (« Components ») du dashboard :  graphiques, tableaux de données, objets web (listes déroulantes, cases à cocher, calendrier…)
  • les interactions entre les composants, au travers de paramètres (« Parameters »)
  • les sources de données nécessaires à l’alimentation des composants (« Data Sources »)

Prenons un exemple simple de tableau de bord à réaliser :

Ce tableau de bord s’appuie sur les données de la base de démo de Pentaho (SampleData). Il contient un en-tête avec le titre, une zone pour le choix des paramètres (sélection de l’année) ainsi que 2 objets graphiques représentant respectivement le montant total des ventes par zone (Camembert) et le détail des ventes par gamme de produit sur 2 années consécutives (Histogramme)

2. Création du Layout

Dans CDE, l’onglet Layout permet de positionner et d’agencer les différents composants de la page web.

Pentaho CDE repose sur le framework CSS BluePrint qui permet une mise en page simplifiée. Le point le plus important à noter est que ce framework repose sur une grille de 24 colonnes, d’où l’obligation de faire en sorte que la somme des attributs « span » de toutes les colonnes d’une même ligne soit égale à 24.

Notre tableau de bord présente la structure suivante :

La mise en place est illustrée par la vidéo ci-dessous. Notez qu’on peut personnaliser de façon très avancée la mise en forme grâce à l’utilisation de feuilles de styles CSS comme celle ajoutée dans la vidéo  (c’est d’ailleurs sans doute ce point qui nécessite le plus de connaissances techniques) :

 

3. Création des requêtes et affectation aux différents composants

3 requêtes SQL sont à créer pour le tableau de bord, chacune de ces requêtes étant associée à un composant.

La requête « select_year_query » permet d’alimenter les années affichées de la liste déroulante :

SELECT DISTINCT YEAR_ID FROM ORDERFACT

La requête « piechart_query » permet de créer le diagramme en secteur (« Pie Chart ») :

SELECT
CUSTOMER_W_TER.TERRITORY,
SUM(ORDERFACT.TOTALPRICE)
FROM
CUSTOMER_W_TER INNER JOIN ORDERFACT ON CUSTOMER_W_TER.CUSTOMERNUMBER = ORDERFACT.CUSTOMERNUMBER
WHERE
ORDERFACT.YEAR_ID = 2004
GROUP BY
CUSTOMER_W_TER.TERRITORY

La requête « barchart_query » permet d’alimenter l’histogramme (« Bar Chart ») :

SELECT
PRODUCTS.PRODUCTLINE,
ORDERFACT.YEAR_ID,
SUM(ORDERFACT.TOTALPRICE) AS TOTAL
FROM
PRODUCTS INNER JOIN ORDERFACT ON PRODUCTS.PRODUCTCODE = ORDERFACT.PRODUCTCODE
INNER JOIN CUSTOMER_W_TER ON ORDERFACT.CUSTOMERNUMBER = CUSTOMER_W_TER.CUSTOMERNUMBER
WHERE
ORDERFACT.YEAR_ID IN (2003,2004)
AND CUSTOMER_W_TER.TERRITORY = 'Japan'
GROUP BY
PRODUCTS.PRODUCTLINE,
ORDERFACT.YEAR_ID

La vidéo qui suit illustre :

  • la création (et le test) des 2 premières requêtes SQL sous forme de Data Sources (CDA)
  • la création des 2 premiers composants: la liste déroulante & le diagramme en secteur
  • l’affectation des 2 requêtes aux composants respectifs

4. Mise en place des listeners (gestion des événements)

Certains composants sont « à l’écoute » d’autres composants via des « Listeners » (écouteurs): c’est de cette façon que les graphiques sont rendus dynamiques.

Ainsi dans notre exemple, les données présentées dans le diagramme en secteur (Pie Chart) dépendent de l’année sélectionnée dans la liste déroulante, tandis que celles de l’histogramme (Bar Chart) dépendent à la fois de l’année mais aussi de la zone cliquée depuis le camembert.

Deux paramètres sont à créer pour notifier les évènements possibles pour les mises à jour. Nommons ces paramètres « param_year » et « param_zone », ceux-ci étant définis depuis le menu « Components »

Tout composant qui est notifié (via son Listener) du changement de valeur d’un des paramètres est susceptible de se remettre à jour automatiquement. Ainsi les graphiques deviennent dynamiques; il suffit pour cela de positionner les paramètres correspondants dans les clauses WHERE des requêtes SQL.

La vidéo qui suit illustre :

  • la création du paramètre « param_year » et sa prise en compte dans le diagramme en secteur
  • la création de l’histogramme (Bar Chart)
  • la création du paramètre « param_zone » et sa prise en compte dans l’histogramme conjointement avec le paramètre année. On rend le Pie Chart cliquable en définissant sa propriété « Clickable » à « True » et en saisissant le code Javascript ci-dessous dans la propriété « Click Action ». La méthode fireChange permet d’alerter les listeners du changement de valeur d’un paramètre.
function(s,c,v){
      /* permet de changer la valeur de param_zone lors d'un clic sur une zone du PieChart
          s: série, c: catégorie, v: valeur    */
          Dashboards.fireChange('param_zone',c);
}

5. Finalisation du tableau de bord

Pour obtenir un tableau de bord présentable, il convient de faire quelques petites retouches :

 

Autres liens (très) utiles …

Voici quelques ressources incontournables qui devraient vous permettre d’exploiter au mieux la puissance des C*tools :

– Le site du projet:  ctools.webdetails.org et celui de la société qui le porte, WebDetails

– Un guide de référence complet :

– L’excellent tutoriel de Slawomir Chodnicki: « Creating Dashboards with CDE »

– Un tutoriel de TIKAL montrant l’élaboration d’un dashboard depuis un template sur des données en provenance de Bugzilla

– Le blog de Ambient BI, qui explique notamment les techniques pour incorporer des indicateurs et des barres proportionnelles dans des objets de type « Tableau » (vraiment génial, je conseille également la démo en ligne)

– Un article détaillant l’installation de Cygwin pour le setup de Ctools sous Windows

– Un très bon tutoriel conçu par StrateBI et un autre tutoriel pour la mise en place de filtres avancés (les 2 en espagnol)

– Des dashboards de démonstration conçus lors de sessions de formations aux CTools

– La section consacrée aux Ctools sur le forum pentaho

Un autre exemple… et les sources !

Je vous propose de télécharger l’exemple proposé, avec en bonus un tableau de bord un peu plus élaboré.

Ce dernier comprend des titres dynamiques, un graphique de type « Line Chart » ainsi qu’un objet « Table » très commode pour représenter des indicateurs d’évolution entre les années N et N-1 (vidéo ci-dessous)

Téléchargement : « Demo CDE.zip »

Note : le fichier « Demo CDE.zip » est à décompresser dans le répertoire /pentaho-solutions

 

 ————————————————————————————————————————————————————

 

Pour conclure, chers lecteurs, permettez-moi de vous présenter tous mes vœux pour cette nouvelle année.

Merci encore à toutes les personnes rencontrées en 2011 à diverses occasions qui m’ont félicité pour le contenu de ce blog, je continuerai à faire tout mon possible pour que la qualité de celui-ci perdure en 2012…

Beaucoup de succès dans vos projets décisionnels open source !

 

 

 

50 Comments

  1. Bonjour,

    Tout d’abord, mes félicitations pour ce super site que je visite régulièrement depuis quelques mois car je débute dans le monde du décisionnel et notamment sur la solution Pentaho et ctools.
    J’ai 2 petites questions concernant les tableaux de bords ctools SVP:

    1. Est il possible de créer des onglets ou barres de navigation que j’ai vu dans le document que l’on peut voir via ISSUU? Si oui, comment?
    Ce afin de créer, par exemple, des rubriques en fonction des processus (vente, achat, etc…)

    2. Est il possible de d’exporter le(s) tableau(x) de bord sous forme de page web? Je m’explique, j’aimerais que via une URL, le end-user accède directement au dashboard sous forme de page web et non pas au PUC (avec une authentification avant bien-sur).

    Un grand merci par avance.

    Cordialement,

    Boris

  2. Merci pour vos félicitations 😉

    1. Oui c’est possible. Regardez ce bel exemple disponible sur le site de WebDetails

    2. Pour accéder au tableau de bord directement, rien de plus simple: double-cliquer sur l’onglet dans la console utilisateur pour récupérer l’url d’accès direct

  3. SUPER!!!!!! C’est exactement ce que je veux faire (Cf. exemple)
    Mais par contre, sais tu comment le faire techniquement parlant?

    Encore un grand merci

    Boris

  4. Il faut déjà regarder le code source: tu vas ainsi voir tous les composants utilisés et le code Javascript associé
    Ca se décode assez bien en général, mais il va falloir creuser…
    Perso je n’ai encore pas mis en place d’onglets sous CDE, je suis donc preneur de la méthode ! (une idée de prochain article peut-être…)

    Bon courage 😉

  5. Oki Doki, thanks a lot!!!
    Je vais étudier ça et si je capte le truc, je transmets à la communauté!!

    Boris

  6. Bonjour,

    Si je puis me permettre, j’aurais une dernière petite question 🙂 :

    J’ai remarqué que sur le tableau de bord d’exemple (lien que tu m’as transmis) que les liens de navigation (content 01 et content 02) appellent via des java script, des fichiers de type wcdf (…./…/content01.wcdf et …./…/content01.wcdf).
    Ces fichiers (wcdf) sont générées lors de la création des tableaux de bords si je ne me trompe pas.
    Cela veux donc dire qu’il est possible de créer plusieurs tableaux de bord et de les appeler via des lien de navigation java script et donc d’avoir un tableau de bord avec plusieurs pages… Ça te semble cohérent?

    FYI:

    Lien « content02 » -> http://www.webdetails.pt/pentaho/content/pentaho-cdf-dd/Render?solution=Demo&path=%2FDashboards&file=Content02.wcdf

    Lien « content01 » -> http://www.webdetails.pt/pentaho/content/pentaho-cdf-dd/Render?solution=Demo&path=%2FDashboards&file=Content01.wcdf

    Boris

  7. je pense que tu as raison, ça doit être exactement cela.
    Si jamais tu as des questions plus avancées sur les points techniques, je pense que ça vaudrait le coup que tu les poses sur le forum de Pentaho dans la section Community Ctools
    Comme ça le plus grand nombre en profite !

  8. Bonjour,

    Merci pour le tuto, il est super ! Par contre, j’ai juste un petit soucis. J’arrive bien à suivre votre tutoriel et brancher CDE sur ma base SampleData de mon serveur mysql. Par contre, j’arrive pas à brancher vers le datamart que j’ai créée. Savez-vous comment je peux faire pour ajouter une nouvelle source JNDI ? Parce que là actuellement, il ne me propose que SampleData comme valeur de le propriété JNDI lorsque je crée une requete via sql over sqlJndi. Merci d’avance pour le petit coup de main !!
    Encore merci pour le tutoriel !!

  9. Bonjour
    Merci pour votre commentaire 😉
    La connexion JNDI peut être créée depuis la console d’administration (http://localhost:8099; pour la démarrer /administration-console/start-pac.bat)
    Vous pouvez l’utiliser dans pentaho CDE en la saisissant manuellement dans « Sql over JNDI » (attention à respecter la casse)

  10. Bonjour,

    J’aime bien savoir s’il y a une solution pour importer les dashbords exemple sur mon seveur local.Si on ne peut pas le faire comment importer un dashbord finalisé dont les sources existent sur internet pour l’utiliser.

    Merci d’avance.

  11. Bonjour

    Pour importer les ressources sur votre serveur, il suffit de copier les fichiers techniques associés aux dahsboards (extensions *.cda, *.cdfde, *. wcdf) dans un dossier de votre arborescence /pentaho-solutions, puis de raffraîchir l’explorateur.

  12. Bonjour ,
    Je vous remercie pour ce post , j’ai une petite question a poser :
    Comment je peux intégrer un fichier CSS et l’utiliser dans le layout?
    l’ajout d’une ressource externe est elle possible?
    Merci

  13. Hi,
    Try the « New Map Component » in Pentaho CDE (it works with Open Layers and Open Street Map/Google Maps)

  14. thank you very much
    I have please a last 3 questions ,
    I have a CCC Bar Chat , I have 3 problem with it :

    the First , I can’t find a way to define my axes parameters (it is 1000 , 1000 , 1000) how can I defind my own axis scale?

    the Second is that I have many bars ,with a big difference of value , which make some bars invisible in the dashboard (exemple I have 20 sectors but the dashboard contains just 8 bars) . what I have to do to have the all bars?

    the third , I have 20 series in rows , the problem is that pentaho make them as a list vertically , which get a lot of space .. can I list them horizontally?

    thank you

  15. Hi, thank you for your great post!

    I am trying make it myself following this guide, almost is ready but there are some issues but the main issue is with the javascript event:


    function(s,c,v){
    /* you can change the value of param_zone when clicking on an area of PieChart
    s: serial, c: Class, v: value */
    Dashboards.log('click in: ' + s + ', ' + c);
    Dashboards.fireChange('param_zone',c);
    }

    Which one I placed in the « CCC Pie Chart » component at the property « clickAction ». When I click in the Pie Chart to update the Bar Chart, it does not work, the console log show me:


    CDF: click in: null.null, undefined
    [Lifecycle >Start] render_barchart (P: 5 ): preExecution Timing: 0ms since start, 0ms since last event (Running: 0) scripts.js?version=c8304c486e1db3a99c506d0e07b700dd:4267

    As you can see, the properties are not come defined to this action.

    I am using Pentaho User Console: 4.8.0 stable.51169 and CDE: Installed Version: v13.06.05 Your version is up to date.

    Even, I downloaded your examples and it work great but when I try edit it and run it (as preview, without make any change, just for test) I get the same problem


    CDF: Clic sur null.null, undefined

    Any advice? thank you.

  16. you’re probably in the last version of pentaho CDE: try to put version number as 1 in CCC PieChart properties

  17. Hi, You are right. This is version problem between CCCv1 (used in your examples) and CCCv2 (installed in my system). I can solve the problem following this thread in Pentaho Ctool Forum: http://forums.pentaho.com/showthread.php?84586-how-tu-use-Click-action-in-CDE

    The way to do that now is:


    function(scene) {

    var atom = this.scene.atoms.category;
    var c = atom.value;
    var vars = this.scene.vars;
    var v = vars.value.value;

    Dashboards.log("category: " + c + "\nvalue: " + v);
    Dashboards.fireChange('param_zone',c);
    }

  18. Bonjour,
    merci pour ce post, j’ai une petite question:
    est-il possible de créer des tableaux de bord google maps dans la version community de Pentaho.
    Merci pour votre réponse

  19. Bonjour,

    merci pour le tuto, vraiment le meilleur que j’ai vu 😉

    mon 1er dashboard fonctionne a merveille sauf un gros détail que je ne sais pas comment arranger…

    j ai 2 charts, un pie et un bar chart, chaque chart est dans une colonne…
    les bords sont arrondis (j’adore) par contre quand je clique sur le pie chart, il met bien à jour le bar chart mais en même temps il enlève les bords arrondis…. ??? dingue non ?? bref je cherche depuis 2 jours et je trouve pas de soluce ??

  20. Bonjour, j’ai résolu mon problème en appliquant un CSS pour le round border

  21. Bonjour,
    merci pour ce magnifique post , j’avais désespéré jusqu’à trouver le votre.
    je suis débutante et j’ai une question : je peux utiliser pentaho pour integrer un dashbord dans une application web existante (JEE ,tomcat)????
    Merci encore

  22. bonjour et merci
    Oui on peut intégrer un dashboard pentaho via son url (sous forme d’iframe)
    Attention à la gestion de la sécurité derrière

  23. Super tuto !!
    Tous fonctionne quand on suis votre exemple, mais je travaille sur un base (« Adventureworks ») sous mysql
    et je n’arrive pas à l’insérer dans le dashbord ! comment faire ?
    Merci

  24. Merci pour le compliment (vous êtes plus de 2 000 à avoir téléchargé ce tutoriel !)
    Concernant l’accès à la base de données « Adventureworks », il suffit juste de définir la connexion au niveau du serveur (Gérer les datasources) et celle-ci sera utilisable ensuite dans Pentaho CDE

  25. Dans manage data sources nous avons notre base de données, mais nous ne savons pas comment faire pour l’utiliser comme vous dans votre tutoriel. Votre base c’est « simple data » et cette base est directement définie (dans votre tutoriel 2/4 à la 16ème seconde) , quand vous cliquez sur « sql over jndi » puis « properties » sur la ligne « jndi » dans la colonne « value ». Comment faire pour que notre base de données se retrouve ici ?

    De plus nous avons créer des jointures via mon MySQL (create new, data source, source type « database table »), ces jointures sont dans « manage data sources » et leurs types sont « data source wizard » mais nous ne savons pas du tout comment l’utiliser dans le dashboard CDE.

    Merci de nous répondre un dimanche

  26. Voici la méthode :
    1. Ajouter le driver JDBC de la base de données à laquelle vous souhaitez vous connecter dans /biserver-ce/tomcat/lib
    2. Redémarrer la console utilisateur pentaho (PUC)
    3. Se logger dans la PUC, puis aller dans le menu « Fichier\Nouveau\Datasource »
    4. Un écran de création de « DataSource » s’ouvre (attention c’est juste pour créer une requête)
    5. Donner un nom à votre datasource, et sélectionner le type de source « Base de données »
    6. Cliquer sur le (+) sur fond vert pour créer une connexion vers votre base
    7. Renseigner les champs comme suit :
    – Connection Name = Adventureworks
    – Host name : nom ou adresse de votre serveur
    – Database name : nom physique de votre base
    – Port number : port de votre base, 3306 pour Mysql par exemple
    – User name et mot de passe
    8. Tester et enregistrer
    Une fois la connexion opérationnelle, vous pouvez renseigner le nom indiqué dans « connection name » (étape 7) comme source de donnée dans Pentaho CDE (ça fonctionne parfaitement)

    Bon courage !
    Si besoin d’assistance supplémentaire contact@atolcd.com

  27. Bonjour, c’est dingue qu’une page de 2012 soit encore le meilleur tuto sur pentaho disponible a ce jour!
    merci pour ton travail.
    j’ai juste une question, c’est moi ou le fichier Demo CDE.zip n’est plus disponible en téléchargement?

  28. Bonjour
    J’ai réactivé le lien de téléchargement (il n’était plus bon), ça devrait marcher…
    Et merci pour le compliment 😉

    Bonne année 2016

  29. Bonjour,
    Je viens de commencer avec le BI, je dois faire des tableaux de bord avec Pentaho CTOOLS, quelqu’un pourrait me dire comment télécharger C*Tools pour faire des tableaux de bord.
    Cordialement

  30. Bonjour,

    Je vous remercie pour votre tuto, jusqu’à présent, je n’ai pas encore trouvé mieux.

    Je dois mettre en place un tableau de bord, j’aimerais savoir comment charger un bar chart à la place d’un pie chart en cliquant sur morceau du pie chart.

    Pour être plus clair, dans votre exemple de tableau de bord:

    2. Création du Layout

    Vous avez un pie chart et un bar chart, les 2 sont visibles depuis le lancement du tableau de bord. J’aimerais savoir comment faire apparaitre par exemple un bar chart à la place du pie chart quand je clique sur un morceau du pie-chart, sans que le bar chart ne soit pas visible au préalable comme c’est dans votre exemple?

  31. Bonjour,

    Content que ce tuto vous apporte de l’aide 😉
    Pour ne pas afficher un graphe au lancement du dashboard, il faut affecter au paramètre « Execute At Start » la valeur « false »

  32. Bonjour,

    Je vous remercie pour votre réponse.

    Je n’arrive pas à afficher un pie chart, j’ai essayé aussi bar chart, j’ai le même problème.

    il n’y a pas d’erreur quand je lance le dashbord, la connexion avec ma base de donnée est correcte parce que j’arrive à afficher les infos dans un « Table component ».

    Ma requête retourne 2 colonnes: total et statut

    J’aimerais savoir s’il y a des choses à modifier dans les paramètres afin que mon pie chart soit visible. J’ai défini Height (200) et Width (400)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.


*