Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

Affichage des graphiques

Tam85
Timide
Messages : 378
Inscription : 11 juil. 2014, 13:16
Localisation : Vendée
Contact :

Affichage des graphiques

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
Jeedom - Debian 9.9 - Hp CQ-10 600 1.66GHz Intel Atom Processor N455 / SSD 32go / RAM 1go
RFXtrx433E USB
Gateway Xiaomi
Téléinfos via Nodemcu ESP8266
Branche Stable
Liste matériel : https://www.jeedom.fr/forum/memberlist. ... file&u=144

Kir
Timide
Messages : 75
Inscription : 02 sept. 2015, 18:13
Localisation : Bruxelles
Contact :

Re: Affichage des graphiques

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

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

Tam85
Timide
Messages : 378
Inscription : 11 juil. 2014, 13:16
Localisation : Vendée
Contact :

Re: Affichage des graphiques

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....
Jeedom - Debian 9.9 - Hp CQ-10 600 1.66GHz Intel Atom Processor N455 / SSD 32go / RAM 1go
RFXtrx433E USB
Gateway Xiaomi
Téléinfos via Nodemcu ESP8266
Branche Stable
Liste matériel : https://www.jeedom.fr/forum/memberlist. ... file&u=144

Kir
Timide
Messages : 75
Inscription : 02 sept. 2015, 18:13
Localisation : Bruxelles
Contact :

Re: Affichage des graphiques

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 :roll:

Tam85
Timide
Messages : 378
Inscription : 11 juil. 2014, 13:16
Localisation : Vendée
Contact :

Re: Affichage des graphiques

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 :roll:
J'avais bien pensé à cette solution, mais je ne voulais faire que par le design....
Jeedom - Debian 9.9 - Hp CQ-10 600 1.66GHz Intel Atom Processor N455 / SSD 32go / RAM 1go
RFXtrx433E USB
Gateway Xiaomi
Téléinfos via Nodemcu ESP8266
Branche Stable
Liste matériel : https://www.jeedom.fr/forum/memberlist. ... file&u=144

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Affichage des graphiques

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
Screenshot_20180228-210022.png (236.93 Kio) Consulté 3044 fois
donc après adaptation
Screenshot_20180301-014702.png
Screenshot_20180301-014702.png (251.77 Kio) Consulté 3044 fois
Screenshot_2018-03-01-02-11-15-730.jpeg
Screenshot_2018-03-01-02-11-15-730.jpeg (279.18 Kio) Consulté 3039 fois
si tu veux je dois encore faire des test

Tam85
Timide
Messages : 378
Inscription : 11 juil. 2014, 13:16
Localisation : Vendée
Contact :

Re: Affichage des graphiques

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

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

Merci
Jeedom - Debian 9.9 - Hp CQ-10 600 1.66GHz Intel Atom Processor N455 / SSD 32go / RAM 1go
RFXtrx433E USB
Gateway Xiaomi
Téléinfos via Nodemcu ESP8266
Branche Stable
Liste matériel : https://www.jeedom.fr/forum/memberlist. ... file&u=144

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Affichage des graphiques

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
Timide
Messages : 378
Inscription : 11 juil. 2014, 13:16
Localisation : Vendée
Contact :

Re: Affichage des graphiques

Message par Tam85 » 03 mars 2018, 18:05

Merci winhex
Je vais voir ce que je peux en faire.
Jeedom - Debian 9.9 - Hp CQ-10 600 1.66GHz Intel Atom Processor N455 / SSD 32go / RAM 1go
RFXtrx433E USB
Gateway Xiaomi
Téléinfos via Nodemcu ESP8266
Branche Stable
Liste matériel : https://www.jeedom.fr/forum/memberlist. ... file&u=144

benj29
Actif
Messages : 3983
Inscription : 26 mars 2017, 09:57
Contact :

Re: Affichage des graphiques

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 ?

Image

Avec de tels réglages :

Image

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

Thyer
Timide
Messages : 163
Inscription : 30 mai 2017, 09:51
Localisation : Lorraine

Re: Affichage des graphiques

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

benj29
Actif
Messages : 3983
Inscription : 26 mars 2017, 09:57
Contact :

Re: Affichage des graphiques

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
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Affichage des graphiques

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
bouton export.png (118.65 Kio) Consulté 2829 fois
Dernière édition par winhex le 02 mai 2018, 20:32, édité 2 fois.


Thyer
Timide
Messages : 163
Inscription : 30 mai 2017, 09:51
Localisation : Lorraine

Re: Affichage des graphiques

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
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Affichage des graphiques

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 :idea:

benj29
Actif
Messages : 3983
Inscription : 26 mars 2017, 09:57
Contact :

Re: Affichage des graphiques

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
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Affichage des graphiques

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
Timide
Messages : 10
Inscription : 25 juin 2018, 21:34
Localisation : MELUN
Contact :

Re: Affichage des graphiques

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
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Affichage des graphiques

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

Répondre

Revenir vers « Suggestions pour le Core »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités