Navigation

    Communauté Digdash

    • S'inscrire
    • Se connecter
    • Recherche
    • Catégories
    • Récent
    • Mots-clés
    • Populaire
    • Utilisateurs
    • Groupes

    NON RÉSOLU Personnaliser le css en fonction d'un objectif

    Éditeur de Tableaux de Bord
    2
    2
    120
    Charger plus de messages
    • Du plus ancien au plus récent
    • Du plus récent au plus ancien
    • Les plus votés
    Répondre
    • Répondre à l'aide d'un nouveau sujet
    Se connecter pour répondre
    Ce sujet a été supprimé. Seuls les utilisateurs avec les droits d'administration peuvent le voir.
    • P
      Philippe D dernière édition par

      Bonjour,
      J'ai une infographie avec 3 mesures.

      75606736-e6fa-4be9-af99-2b9ee5429975-image.png

      Je souhaiterais pouvoir personnaliser le css en fonction de l'objectif sélectionné pour ma deuxième mesure.

      Pour faire simple, je souhaiterais modifier le background-color du rectangle gris et pouvoir y appliquer un couleur en fonction de ce qui a été défini dans l'objectif.

      8010b88e-28c4-4aa3-9c19-45263951d836-image.png

      Est-ce possible selon vous ? Peut-on récupérer en javascript par exemple si l'objectif est atteint ou non ou la couleur associée ?

      Bonne journée.

      D 1 réponse Dernière réponse Répondre Citer 0
      • D
        DavidS @Philippe D dernière édition par

        @philippe-d

        Bonjour,

        Cela est possible en utilisant deux graphiques par KPI :

        • 1 graphique avec le background rouge pour l'objectif non atteint
        • 1 graphique avec le background vert pour l'objectif atteint

        Et vous pouvez ensuite en javascript maîtriser l'affichage d'un graphique ou d'un autre selon l'atteinte ou non de l'objectif, avec un script de ce genre :

        ddCtrl.addChartRefreshListener(function(doc, dm, dmsel, chart, errorMsg)
        {

        var margeNotFormatted;
        var marge;
        var pagePrefix;
        var editeur;
        
        if(ddCtrl.isCurrentPage("pageCourante")){
            CoutCommNotFormatted = parseInt(ddCtrl.getResultCubeValue('7dc9d919', 'Coût de communication', {}, false), 10); //7dc9d919 est l'id d'une infographie présentant le résultat, ce graphique doit être caché sur la page par défaut
            CoutComm = CoutCommNotFormatted.toFixed(0);
            pagePrefix = 'pageCourante_';
            var objectif = 15000;
            
            if (CoutCommNotFormatted > objectif) { 
                   ddCtrl.hidePortlet(pagePrefix + 'd60e4638'); //d60e4638 est l'id de l'infographie avecle background rouge (objectif non atteint)
                   ddCtrl.showPortlet(pagePrefix + 'e8e30c33'); //e8e30c33 est l'id de l'infographie avecle background vert (objectif atteint)
            } else {
                   ddCtrl.hidePortlet(pagePrefix + 'e8e30c33'); 
                   ddCtrl.showPortlet(pagePrefix + 'd60e4638');
            }
        

        }

        });

        Cdt.

        1 réponse Dernière réponse Répondre Citer 0
        • 1 / 1
        • Premier message
          Dernier message
        • Accueil
        • Webinaires
        • Documentation
        • Interviews
        • Vidéos tutos