Forum Communauté Jeedom

Bonsoir

Une demande :

Pour que les graphiques soient lisibles sur une page design, il faut qu'ils soient assez grands, donc encombrant très fortement une page.

Serait 'il possible et intéressant d'avoir une fonction qui permette que lorsque l'on clique sur un graphique celui s'ouvre dans une page 3/4 écran, un peu comme modale du plugin Clink ?

Merci

Tu peux faire cela via les objets "zone" de la page design.

Kir a écrit : ↑
27 févr. 2018, 11:49
Tu peux faire cela via les objets "zone" de la page design.

Merci

J'ai vu cette fonction, mais je peux avec afficher un équipement, mais un graphique, je ne vois pas....

En créant le graphique en question dans une vue, vue que tu affiches à partir de ta zone en utilisant un cliclink

Kir a écrit : ↑
28 févr. 2018, 08:43
En créant le graphique en question dans une vue, vue que tu affiches à partir de ta zone en utilisant un cliclink

J'avais bien pensé à cette solution, mais je ne voulais faire que par le design....

tous n'est qu'une histoire de widget
qui ouvre un modal

du temps où clink n'existait pas
ouverture fichier html (que j'ai gardé des fois que)

: Screenshot_20180228-210022.png (236.93 Kio) Consulté 8467 fois

donc après adaptation

: Screenshot_20180301-014702.png (251.77 Kio) Consulté 8467 fois

: Screenshot_2018-03-01-02-11-15-730.jpeg (279.18 Kio) Consulté 8462 fois

si tu veux je dois encore faire des test

Merci winhex

C'est donc un widget complètement ré écris pour ouvrir une fenêtre avec le graphique.

Là, je ne sais absolument pas faire...

SI tu as l'occasion d'affiner et d'expliquer, je suis preneur.

Merci

avoir un historique d'une autre info

Code : Tout sélectionner

     $('.cmd[data-cmd_id=#id#] .state').on('click', function(){
  			$('#md_modal').dialog({title: "Historique" });
  			$("#md_modal").load('index.php?v=d&modal=cmd.history&id=75').dialog('open');
			});

qui existe en tuto
viewtopic.php?f=29&t=29658&p=515968&hilit=tuto#p515968

donc pour une action défault "change #popupUrl# par ton l'id d'un equipement ex : 1011"

Code : Tout sélectionner

<!-- Trigger the modal with a button -->
<button type="button" id="fs-doc-button" class="btn btn-success openBtn#id#">#name_display#</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" style="color:black;"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
    <script>


$('.openBtn#id#').on('click',function(){

  			$('#md_modal').dialog({title: "Historique ID #popupUrl# #name_display#" });
  			$("#md_modal").load('index.php?v=d&modal=cmd.history&id=#popupUrl#').dialog('open');
			});
            
</script>
<style>

</style>
</div>

et pour une personnalisation et plein écran comme tu as au dessus

Code : Tout sélectionner

<body>
<style>
  .modal-header, h4, .close {

      background-color: #5cb85c;
      color:white;
      text-align: center;
      font-size: 30px;
  }
  .modal-footer {
      background-color: #f9f9f9;
  }
    .modal-title {
     color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    }
  .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border: none;
  border-radius: 0;
}

.modal-content .close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 50px;
  font-weight: normal;
}
  
.modal-body {
  position: absolute;
  padding: 0px;
  height: 100%;
}  
    
    
  </style>

  <!-- Trigger the modal with a button -->
  <div class="btn btn-xs btn-default action cmdName openBtn#id#" data-toggle="modal" style="margin-top: 5px; border: none;border-radius: 0px; color: black" data-target="myModal#id#">#name#</div>

  <!-- Modal -->
  <div class="modal fade" id="myModal#id#" role="dialog">
    <div class="modal-dialog modal-lg">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Historique ID #popupUrl# #name_display#</h4>
        </div>
        <div class="modal-body embed-responsive embed-responsive-16by9">
 

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  <script>

$('.openBtn#id#').on('click',function(){
    $('.modal-body').load('index.php?v=d&modal=cmd.history&id=#popupUrl#',function(){
       $('#myModal#id#').modal({show:true});
    });
});

         </script>  

</body>

à toi de continuer avec se qu'on trouve sur différents sites.

j'ai pas été plus avancé depuis :
le défaut actuel une fois que tu clic sur le plein écran les autres historiques sont vide il faut réactualisé ta page.

Merci winhex
Je vais voir ce que je peux en faire.

Je ne voulais pas ouvrir un post dessus, mais ma recherche m'a conduit ici.

Je souhaiterai enlever le bouton export et le cadre d'un graphique en mode design.
Au mieux voilà ce que j'ai ... une idée ?

Avec de tels réglages :

Ce serait intéressant de pousser le réglage un peu plus loin non ?

Salut,
pour le cadre dans "Bordure" tu ajoute 0px pour le reste je ne pense pas que ce soit possible a moins de bidouiller.

C'est pas aussi c*n que ça quand même lol...
Merci!

Envoyé de mon Moto G (5S) Plus en utilisant Tapatalk

tu caches la classe
<script>
$('.highcharts-button-symbol').hide();
</script>
en création html sur la même page

tu pourrais le faire en css aussi

Code : Tout sélectionner

.highcharts-button-symbol
{
 display:none;
}

methode :
avec chrome
outils de developpement
dans la tabs le premier icone à gauche et ensuite tu proménes ta souris

: bouton export.png (118.65 Kio) Consulté 8252 fois

Toujours au top, winhex

Super merci

Il faut rajouter la classe highcharts-button-box pour supprimer le bouton du dessous

Code : Tout sélectionner

.highcharts-button-box
{
 display:none;
}

Bonjour,
Est-ce que vous pouvez me dire à quel endroit exact dans Jeedom ces codes pour pouvoir modifier les graph sous Highcharts doivent être tapé.
J'ai pas mal travaillé avec highcharts pour d'autre projets mais là avec son intégration dans Jeedom, je suis un peu perdu.
Merci d'avance à celles et ceux qui pourront m'éclairer

J'étais tenté de faire un :

Code : Tout sélectionner

<script>
  .highcharts-button-box
{
 display:none;
}
</script>

Mais ça ne change rien sur mes graphs de la page en cours...
Là ça dépasse mes compétences.

c'est pas entre script !
c'est du style css donc entre <style>

---
quand tu vois le script
$('.highcharts-button-symbol').hide();
==

pour une class toujours un . devant
pour style ou script (un id c'est #)
.highcharts-button-symbol

.hide pour la cmd jquery "caché"

la même commande style en jquery
serait
$('.highcharts-button-symbol').css( 'display' ,'none');
https://www.w3schools.com/jquery/jquery_css.asp
--
pour 1 seul en script sans tester se serai
$('[data-eqlogic_id="132"] .highcharts-button-symbol').css('display','none');

donc en style
data-eqlogic_id="132" .highcharts-button-symbol{
display: none;
}
HS
une façon de ne pas voir une tuile (sans clic possible pour celle du dessous)
$('[data-eqlogic_id="132"]').css('display' , 'none')

winhex a écrit : ↑
29 mars 2018, 21:50
tu caches la classe
<script>
$('.highcharts-button-symbol').hide();
</script>
en création html sur la même page

Salut @winhex,

J'ai identifié quelques classes à cacher sur mes graphiques et j'aimerais que cela se fasse sur la seule page dans laquelle j'ai placé le script. (je veux pouvoir avoir des styles de graphiques différents sur les autres pages de design par exemple).

Sauf que je n'ai pas compris ou placer le code <script> ... </script>

Sur ma page design, j'ai ajouté un 'Texte/html' et je tape dans la zone texte le code SCRIPT mais ça ne semble pas efficace...

La seule chose qui fonctionne, c'est de placer du CSS dans la personnalisation avancée de JEEDOM mais du coup, tous les graphiques sont affectés !

Une idée ? Heeelp svp

un script se déroule , je regarderai

sinon en css
personnalisation id / design précédant

[data-eqlogic_id="96"].highcharts-button-symbol

viewtopic.php?f=50&t=15104&hilit=person ... 00#p648937

ou

viewtopic.php?f=24&t=31450&p=674138#p674138

Forum Communauté Jeedom

Affichage des graphiques

Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques

Re: Affichage des graphiques