Monitor - Affichage graphique directement dans une cellule

[papoo]

Bonjour,
je souhaiterais créer une page avec des graphiques (compteurs eau, gaz elec) sans pop up
sur ce modèle (mais pas sur fond coloré mais en transparence)

4graphs.png (499.03 Kio) Consulté 10331 fois

j'ai cherché comment transformer la fonction createGraph et RefreshGraphData (frontpage.js) pour l'adapter à ce que je souhaiterais faire mais je n'y arrive pas
quelqu'un aurait une idée de comment procéder?

[Nemesis24]

Intéressant je vais chercher de ce côté là aussi !!!

[vil1driver]

j'aurais bien un truc fonctionnel, mais le fond transparent, ça rends vraiment pas bien...

[papoo]

Alors pas de fond transparent
Ce n'est pas grave
Il est vrai que cela ne doit pas être très lisible si l'image de fond n'est pas unie

[vil1driver]

ce sera donc sur fond blanc.. pour l'instant

mais le settings va être tordu je préfère prévenir

MAJ demain avec un petit topo

[Nemesis24]

that's good !!!

[vil1driver]

voila c'est mis en ligne..

du coups voici le setting utilisé pour l'image précédente

Code : Tout sélectionner

['thomas','Graph','cell5_1','Thomas','temp','day','te','°C'],

avec donc les 4 premières infos, comme d'ab

• nom ou idx
  value, ici on veut donc afficher le graphique
  l'emplacement
  la description, qui cette fois servira de titre au graphique

Les 3 suivantes sont des infos glanées en étudiant les requêtes Json qu'effectue domoticz pour nous fournir le graphique sur sa propre interface
(repères 3 et 4 sur la capture suivante).

• sensor
  range
  valeur

la dernière info est simplement du texte qui servira de légende sur l'axe vertical du graphique.

la méthode consiste donc à ouvrir domoticz dans chrome sur pc
puis afficher la console de dev (F12)
choisir l'onglet network dans la console de dev (repère 1)
filtrer sur le mot graph (repère 2)
puis sur la fenêtre domoticz aller afficher le graphique souhaité
vous devriez donc obtenir la liste des url pour les graphiques qu'il vient de vous afficher (repère 3)
cliquer sur l'une d'elles pour visualiser le retour json (repère 4)


pour le moment le graphique n'est que de type ligne, pas de battons ou autres.. ça viendra probablement..
pas de customisation pour l'instant niveau css, en cous d'étude..

voila j'espères que c'est suffisamment clair et sans bug

[papoo]

Impecc
Trop rapide pour moi
Je ne pourrais tester que samedi
Mais je posterais le résultat

[vil1driver]

MAJ possibilité de jouer avec le css pour le graphique



J'ai juste eu à ajouter ceci à page5.css

Code : Tout sélectionner

#cell5_1 .highcharts-background {
	fill: rgba(0, 0, 0, 0.4);
}
#cell5_1 .highcharts-title, #cell5_1 .highcharts-axis-title, #cell5_1 .highcharts-axis-labels{
	fill: #F2DDB3;
}
#cell5_1 .highcharts-color-0{
	stroke: yellow;
}
#cell5_1 .highcharts-color-1{
	stroke: yellow;
}

#cell5_2 .highcharts-background {
	fill: rgba(0, 0, 0, 0.4);
}
#cell5_2 .highcharts-title, #cell5_2 .highcharts-axis-title, #cell5_2 .highcharts-axis-labels {
	fill: #F2DDB3;
}
#cell5_2 .highcharts-color-0{
	stroke: yellow;
}
#cell5_2 .highcharts-color-1{
	stroke: yellow;
}

#cell5_3 .highcharts-background {
	fill: rgba(0, 0, 0, 0.4);
}
#cell5_3 .highcharts-title, #cell5_3 .highcharts-axis-title, #cell5_3 .highcharts-axis-labels {
	fill: #F2DDB3;
}

#cell5_3 .highcharts-color-0{
	stroke: yellow;
}
#cell5_3 .highcharts-color-1{
	stroke: yellow;
}

#cell5_4 .highcharts-background {
	fill: rgba(0, 0, 0, 0.4);
}
#cell5_4 .highcharts-title, #cell5_4 .highcharts-axis-title, #cell5_4 .highcharts-axis-labels {
	fill: #F2DDB3;
}
#cell5_4 .highcharts-color-0{
	stroke: yellow;
}
#cell5_4 .highcharts-color-1{
	stroke: yellow;
}

fill et stroke remplacent l'abituel color, ne me demandez pas pourquoi

[Nemesis24]

c'est bon ca