Affichage des graphiques

Tam85 · Message par **Tam85** » 24 févr. 2018, 21:10

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

Kir · Message par **Kir** » 27 févr. 2018, 11:49

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

Tam85 · Message par **Tam85** » 27 févr. 2018, 18:30

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

Kir · Message par **Kir** » 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

Tam85 · Message par **Tam85** » 28 févr. 2018, 19:29

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

winhex · Message par **winhex** » 01 mars 2018, 02:02

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é 8191 fois

donc après adaptation

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

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

si tu veux je dois encore faire des test

Tam85 · Message par **Tam85** » 01 mars 2018, 18:18

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

winhex · Message par **winhex** » 02 mars 2018, 21:14

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.

Tam85 · Message par **Tam85** » 03 mars 2018, 18:05

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

benj29 · Message par **benj29** » 29 mars 2018, 16:59

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 ?

Thyer · Message par **Thyer** » 29 mars 2018, 18:52

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

benj29 · Message par **benj29** » 29 mars 2018, 19:59

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

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

winhex · Message par **winhex** » 29 mars 2018, 21:50

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é 7976 fois

benj29 · Message par **benj29** » 29 mars 2018, 22:17

Toujours au top, winhex

Thyer · Message par **Thyer** » 29 mars 2018, 22:37

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;
}

Bodom · Message par **Bodom** » 29 avr. 2018, 08:26

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

benj29 · Message par **benj29** » 02 mai 2018, 16:42

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.

winhex · Message par **winhex** » 02 mai 2018, 20:31

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')

Krio77 · Message par **Krio77** » 10 déc. 2018, 11:41

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

winhex · Message par **winhex** » 10 déc. 2018, 12:50

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

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

Qui est en ligne ?