Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Graphique et modification échelle sur l'axe Y

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
sinseman44
Timide
Messages : 10
Inscription : 11 janv. 2017, 09:25
Localisation : Toulouse

Graphique et modification échelle sur l'axe Y

Message par sinseman44 » 23 nov. 2017, 09:02

Bonjour à tous,

J'ai plusieurs courbes affichées dans une des pages de mon design (une information par graphique).

Est-il possible de figer l’échelle des ordonnées à une valeur souhaitée au lieu qu'elle s'adapte au cours du temps ?

Petit exemple, je visualise la charge de mon serveur sur une durée flottante d'une semaine. j'ai une charge nominale à 0.25 (quasi constante), donc mon graphique va m'afficher une échelle max sur les Y à 0.25 et une courbe en plein écran mais je souhaiterai figer cette valeur à 2 (par exemple).

merci par avance

Bodom
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Graphique et modification échelle sur l'axe Y

Message par Bodom » 29 avr. 2018, 16:29

Bonjour,
Moi aussi, j'aimerais bloquer l'echelle de mes graphique dans design. Je me suis servi de Yaxis min et Yaxis max sous Highcharts mais je n'arrive pas à l'integrer à Jeedom.
Si quelqu'un a une solution ?
Merci d'avance.

Loic74
Actif
Messages : 709
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

Re: Graphique et modification échelle sur l'axe Y

Message par Loic74 » 29 avr. 2018, 17:13

Il y a des exemples de styles CSS appliqués aux HighCharts dans la section « «postez vos customisations »
Par contre que cette solution appliquera peut etre le style à tous les charts du design
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

Bodom
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Graphique et modification échelle sur l'axe Y

Message par Bodom » 30 avr. 2018, 06:05

Bonjour,
Merci de vous intéresser au sujet. J'ai relu les 11 pages du topic "Postez vos customisations" mais je n'ai pas trouvé de post qui parle de la modification de l'échelle des Y dans Highcharts.
Même si ça s'applique à tous mes graphs, ça m'intéresse.
Si quelqu'un a une idée. Merci d'avance.

Loic74
Actif
Messages : 709
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

Re: Graphique et modification échelle sur l'axe Y

Message par Loic74 » 30 avr. 2018, 07:02

Les exemples dont je parle ne portent pas sur les axes exactement mais montrent comment appliquer d’autres styles aux HighCharts dans le cadre de Jeedom.
Après faut creuser un peu pour trouver le style qui va bien pour les axes.
Je suis pas expert mais je commencerais par regarder du coté du site de HighCharts ou bien dans le code de Jeedom
Bonne recherche et partage quand tu auras trouvé!
Loic
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

Bodom
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Graphique et modification échelle sur l'axe Y

Message par Bodom » 01 mai 2018, 14:14

Merci mais j'ai déjà appliqué des styles à mes graphiques. Je sais comment les "repérer " grace à une inspection. Cela fonctionne pour par exemple cacher le bouton export, mais impossible de trouver la bonne syntaxe pour le min et max de l'axe y.
J'utilise ´.highcharts-yaxis' qui pointe bien au bon endroit d'après l'inspecteur mais je ne trouve pas la syntaxe pour bloquer l'échelle. Normalement c'est avec {min:0,max:100;} mais je ne comprends pas pourquoi ça ne me le prends pas.
J'ai essayé pas mal de mot-clef d'après l'api (setExtremes, getExtreme, minRange, min, max,...) aucun ne fonctionne.
Je précise que je maîtrise plutôt bien HighCharts hors Jeedom, mais là après tout mes tests, je sèche complètement.
Cela m'étonne un peu que si peu d'info la dessus soient disponible car je pense que cela pourrait intéresser du monde.
J'aimerais vraiment pouvoir bloquer les valeurs d'une échelle. Si quelqu'un veut bien m'aiguiller si c'est possible de le faire ou peut-être que cela viendra avec une mise à jour de Jeedom.
Désolé pour le pavé!
Bodom

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

Re: Graphique et modification échelle sur l'axe Y

Message par winhex » 01 mai 2018, 14:54

tu as raison mais plus tôt un plug. appel aux dev

sinon
tu vas devoir créé en js/jquery un axe
ou modif fichier originaux
ou en créé un

le css ne fait que modifié/caché

tu peux très bien le faire pour un seul HighCharts
(merci @loic74 même si tu dit un truc faux c'est pas grave continué d'arder, j'en dit beaucoup moi :D )
---
pour mon futur besoin je me suis mis je pars de 0
vu mon niveau 2/20 c'est mieux que rien.

avant d'entreprendre et comprendre j'ai choisi hier le choix 3

j'en créé un en html
déjà data table/html ou fichier nok (sauf 1 lors de copie de demo codeopen en sortie php)
bdd pour historique je ne sais pas faire (et c'est pas mon besoin)
reste data script
donc implentation jeedom via widget et var (comme le widget météo sujet design)
ou get api ou class qu'un équipement caché remonte

ou j'en suis !
une simple adaptation d'une demo du site
20180501_145400.png
20180501_145400.png (53.08 Kio) Consulté 3787 fois
création html en design

Code : Tout sélectionner

<!--
https://www.highcharts.com/demo/combo-dual-axes
https://www.highcharts.com/
-->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
  var A1 = 43;
Highcharts.chart('container', {
  chart: {
    zoomType: 'xy'
  },
  title: {
    text: 'Average Monthly Temperature and Rainfall in Tokyo'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    crosshair: true
  }],
  yAxis: [{ // Primary yAxis
    labels: {
      format: '{value}°C',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {
      text: 'Temperature',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    }
  }, { // Secondary yAxis
    title: {
      text: 'Rainfall',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value} mm',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    opposite: true
  }],
  tooltip: {
    shared: true
  },
  legend: {
    layout: 'vertical',
    align: 'left',
    x: 120,
    verticalAlign: 'top',
    y: 100,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  },
  series: [{
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
      valueSuffix: ' mm'
    }

  }, {
    name: 'Temperature',
    type: 'spline',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
      valueSuffix: '°C'
    }
  }]
});
</script>

Bodom
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Graphique et modification échelle sur l'axe Y

Message par Bodom » 01 mai 2018, 15:54

Yes génial, merci, c'est exactement le code qui me convient. Je viens de le tester et ça fonctionne a merveille.
Le seul hic maintenant pour moi, c'est de rapatrier mes propres "data" depuis la base sql du RPI. Je ne sais pas comment faire.
Je suis nouveau dans le monde du RPI et de Jeedom et ai besoin d'un peu de conseils la dessus.
En tout cas, vous m'avez grandement avancé dans mon projet qui stagnait depuis quelques jours à cause de cela, ça remet tout sur le tapis pour moi. je vous en remercie encore.
Cordialement,
Bodom.

Loic74
Actif
Messages : 709
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

Re: Graphique et modification échelle sur l'axe Y

Message par Loic74 » 01 mai 2018, 16:06

Merci @Winhex pour le partage, super intéressant/utile
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

Bodom
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Graphique et modification échelle sur l'axe Y

Message par Bodom » 02 mai 2018, 09:38

Bonjour,
Après pas mal de recherches, je n'ai pas trouvé la commande qui permet de récupérer les données de la bdd MySql de la raspberry sous Jeedom.
Est-ce que quelqu'un pourrait m'aider en me donnant un exemple avec le code de @winhex ci-dessus.
J'aimerais récupérer les data d'un équipement Blea.
Merci d'avance pour votre réponse.
Cordialement,
Bodom.

Loic74
Actif
Messages : 709
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

Re: Graphique et modification échelle sur l'axe Y

Message par Loic74 » 02 mai 2018, 10:52

Je n'y connais pas grand chose mais peut-être via l'API ici (la réponse m’intéresse :))?:

https://jeedom.github.io/core/fr_FR/jsonrpc_api
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

Bodom
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Graphique et modification échelle sur l'axe Y

Message par Bodom » 02 mai 2018, 16:13

Bonjour,
J'ai regarder l'API mais je n'ai rien vu de ce qui m'intéresse. Je vais continuer de chercher. Je sais récupérer les données d'une table SQL qui est hébergé sur un site distant avec un script PHP mais je n'ai jamais fais avec un raspberry et surtout comment l'intégrer à Jeedom ensuite. Une fois cette étape franchie,je pourrais customiser les graphiques à l'envie. Je reviendrais commenter sur ce topic dès que j'arrive à un résultat. Si un dev passe par là, ce serai sympa de m'orienter.
Merci en tout cas de faire avancer ce projet.
Cordialement,
Bodom

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

Re: Graphique et modification échelle sur l'axe Y

Message par winhex » 02 mai 2018, 16:30

je répète j'y connais rien
une bdd tu auras évidement tous
donc faut pardessus j'imagine un traitement
celui ci j'imagine qu'il va se faire en PHP
exemple
additionne toutes les valeurs de l'équipement entre X date #mois# et y date #mois#-1

donc selon ton besoin
si c'est l'historique classique nada

regarde simplement via scénario , variable ou virtuel
en l'aidant des différentes commandes que propose jeedom (calcul du temps de fonctionnement,ect)
exemple
la somme de pluie tombé entre le 1er jours du mois -4 et le dernier jour du mois -4 / par le nombre de jour dans le mois -4

te voilà avec 1 chiffre
en abcisse ou ordonné #mois#-4
un tableau représentant toutes tes infos que tu veux joindre au graphique

maintenant tu as le passage de se chiffre dans ton tableau ainsi que l'abcisse
complexe à mettre en oeuvre mais moin que d'apprendre à utilisé une bdd et son traitement

c'est comme ça que je compte l'utiliser (conso fuel,température,..)

Loic74
Actif
Messages : 709
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

Re: Graphique et modification échelle sur l'axe Y

Message par Loic74 » 02 mai 2018, 17:12

Peut etre des éléments de réponse dans ce fil:
viewtopic.php?t=20037
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

Bodom
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Graphique et modification échelle sur l'axe Y

Message par Bodom » 02 mai 2018, 17:41

Hé bé... Merci les gars j'étudierai toutes ces infos dès ce soir. Vos suggestions m'ont l'air très intéressantes. J'ai parcouru vite fais le topic que @Loic74 m'a proposé, ça m'a l'air d’être un bon début, il faudrait que j'arrive à rapatrier mes données pour ensuite les mettre dans un "array" pour pouvoir l'utiliser avec Highcharts.
Je vais regarder aussi ce que me propose @winhex J'avais déjà fais des tests dans ce sens mais ça n'était pas concluant. Je vais m'acharner un peu plus.
Me voilà avec du boulot pour un moment.
Merci à tous pour votre aide.
Cordialement,
Bodom.

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

Re: Graphique et modification échelle sur l'axe Y

Message par winhex » 02 mai 2018, 18:28

joindre au graphique via api

ensuite pour mise en forme
jquery get api
genre
https://www.w3schools.com/jquery/ajax_get.asp

si tu change le lien de demo par ta réel info accessible de l'exterieure et clic run
j'ai bien mon info qui remonte en pop up
donc au lieu du pop op
var var1=get api id252
et au lieu de data 45,67 ... var1, var2

voilà comment je compte m'y prendre

Bodom
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Graphique et modification échelle sur l'axe Y

Message par Bodom » 03 mai 2018, 18:32

Bonjour @winhex,
Suite à une mauvaise manip, j'ai planté mon RPI. Je reinstall tout, donc je n'ai pas encore pu essayé votre code qui me parait fonctionnel. Par contre En fouillant un peu dans Jeedom, j'ai remarquer que dans "Historique", on peux afficher les données d'un équipement sous forme de tableau au format .csv. Ce fichier est généré grâce au fichier 'export.php' qui se trouve dans /core/php/. Par contre je ne suis pas assez calé pour en trouver la commande exacte.
Sachant qu'on peux utiliser le format .csv sous Highcharts, est-ce qu'il y aurai une possibilité de créer nous-même ce fichier .csv pour ensuite s'en servir pour faire un graphique. (Les exemples Highcharts avec fichier csv ont l'air assez simple à mettre en oeuvre. d'ailleurs, cela ressemble beaucoup à ce que vous m'avez indiquer [$.get])
Bien que votre solution ci dessus me parait bonne, pouvez-vous, si vous avez un peu de temps regarder cette technique si ça vous parait possible bien sûr. Je ne sais pas si c'est possible de générer ce fichier nous-même, mais ça me parait une très bonne piste.
Merci d'avance pour votre aide.
Cordialement,
Bodom.

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

Re: Graphique et modification échelle sur l'axe Y

Message par winhex » 03 mai 2018, 19:03

aïe, j'ai mal pour toi, fiabilise ton jeedom

encore une fois je suis pas expert

j ai déjà essayé avec des fichier csv txt créé par moi pour le local ou demo = nada sans en connaître la raison.
sauf

Code : Tout sélectionner

 $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', 
donc un get api json
donc si jeedom le fait
viewtopic.php?t=31447

te voila avec une autre piste qu'hier encore je ne connaissait pas.
je viens de passer au grade 0.2 sur 20 :D

Loic74
Actif
Messages : 709
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

Re: Graphique et modification échelle sur l'axe Y

Message par Loic74 » 04 mai 2018, 11:17

Salut,

Je crois que le code ci-dessous de Benj29 (28 janv. 2018, 14:16 ) montre comment charger un historique et l'afficher dans un HighCharts:

viewtopic.php?f=50&t=1182&p=578659&hili ... ry#p578659
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

Bodom
Timide
Messages : 13
Inscription : 29 avr. 2018, 08:16

Re: Graphique et modification échelle sur l'axe Y

Message par Bodom » 04 mai 2018, 17:49

Bonjour,
Après pas mal de tests, je n'y suis pas encore arrivé. J'ai essayé avec le fichier csv, j'arrive à récupérer les données et en faire un graphique mais son format n'est pas compatible avec Highcharts et du coup n'affiche pas les bonnes valeurs au bon endroit. J'ai trouvé des infos pour le reformater "a la volée" mais ça complique la chose. Je remet ceci à plus tard.
Les infos et liens que vous m'avez proposé sont très intéressants, j'y ai appris beaucoup de choses et ai encore beaucoup à apprendre.
Ce serait vraiment bien si les développeurs de Jeedom incruste nativement cette option pour bloquer l'échelle des graphs, c'est important pour moi.
En fait j'ai 4 sondes identiques qui m'affichent chacune un graph mais ceux-ci ne sont pas cohérents entre eux. Si j'ai une sonde A=22 et une autre B=32, mes graphs sont au maximum sur les deux alors que les valeurs sont différentes. J'aimerais qu'ils soient tous de la même taille afin de voir en un coup d'œil les différences.
Cela m'étonne que ça n'intéresse pas plus de monde, il n'y a pas beaucoup d'infos dessus.
Je me remet au boulot ce soir. Il faut absolument que j'y arrive.
Merci encore pour ce que vous avez déjà fait.
Cordialement,
Bodom.

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

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