Problème de graphique type camembert avec légende
Re: Problème de graphique type camembert avec légende
Je ne t'oublie pas, je te fais ça quand j'aurai un peu de temps, je peux maintenant poster sur le market, donc ce sera plus facile.
J'ai commencé, mais quelques modification à faire.
J'ai commencé, mais quelques modification à faire.
Re: Problème de graphique type camembert avec légende
weado a écrit : ↑20 nov. 2018, 13:35Hello,
Pour reprendre les exemples et les mettre à sauce, ce que j'ai réussi à faire pour beaucoup je cale sur la version "bar" d'highchart, car je voudrais fixer le datalabel à un endroit, mais non pas qu'il suive l'évolution de la barre. Voici mon exemple.
Trop à droite : Capture.PNG
Trop à gauche : Capture1.PNG
Parfait, mais je n'y arrive pas avec HighChart : Capture3.PNG
Une idée, car j'ai essayé de avec "formatter: function" mais je peux bouger que le style et avec d'autres fonctions mais rien n'y fait.
Hello, c'est possible de partager ton code stp? J'ai beau essayer avec le code du dessus, je n'y arrive pas.
Re: Problème de graphique type camembert avec légende
J'y suis arrivé !!! Effectivement, pas très compliqué, mais je plaçait mon DIV au mauvais endroit. (petit exemple dans l'image ci-dessous;-) )
@Djal94 : Je ne sais pas quoi te dire, car un copier coller fonctionnement directement chez moi :
pour mon exemple, j'ai crée un virtuel de test, en info / numérique et affecté le widget à ce virtual. Tiens moi au courant si besoin.
Re: Problème de graphique type camembert avec légende
Je vais réessayer,
Tu mets l’ID de la commande à un seul endroit hein?
Merci
Autre question, c’est moi ou on peut pas afficher plus de 1 highchart par design ?
Tu mets l’ID de la commande à un seul endroit hein?
Merci
Autre question, c’est moi ou on peut pas afficher plus de 1 highchart par design ?
Re: Problème de graphique type camembert avec légende
Tu peux partager le code du dernier stp?
Re: Problème de graphique type camembert avec légende
dashboard.info.numeric.eeBud - Info numérique linéaire Horizontal- Highcharts centré
Il est disponible sur le market.
J'espère qu'il n'y a pas de bug!
Il est disponible sur le market.
J'espère qu'il n'y a pas de bug!
Re: Problème de graphique type camembert avec légende
Pour le moment, tout fonctionne bien ! Petite question : Dans la seconde partie de ton code, tu gères des updateplus et updatemoins, c'est la gestion des mises à jour des valeurs sans avoir à recharger la page ?
Re: Problème de graphique type camembert avec légende
Updateplus et update moins ce sont les "animations" sur l'affichage de la valeur. Tu as remarqué, elle n'est pas fixe, mais passe de 0 à ta valeur en l'espace d'une seconde.
Par contre je n'ai pas testé le Widget sur des températures... Mais que sur des puissances de chauffage.
Par contre je n'ai pas testé le Widget sur des températures... Mais que sur des puissances de chauffage.
Re: Problème de graphique type camembert avec légende
Hello à tous!
je m'incruste dans ce topic car je cherche à faire de beau graphique à l'aide de highcharts pour monitorer mes capteurs de consommations d'énergie électriques...
j'essaye tant bien que mal de comprendre où allez chercher mes datas et où ils sont saisis dans le code. Si je prends un des exemples du topic c'est ici qu'il faut renseigner la donnée?On met la valeur de l'ID?
Moi je suis un peu paumé car je ne sais pas quel ID je dois saisir...? (voir entouré en rouge )
Ensuite toujours dans le code ci-dessus la var "piscine" c'est le nom de l'ID (si oui ou se trouve t'elle dans jeedom) ou alors on peut rentrer le nom que la veut?
Désolé pour toute ces questions de noob mais j'suis perdu en programmation...
Merci!
je m'incruste dans ce topic car je cherche à faire de beau graphique à l'aide de highcharts pour monitorer mes capteurs de consommations d'énergie électriques...
j'essaye tant bien que mal de comprendre où allez chercher mes datas et où ils sont saisis dans le code. Si je prends un des exemples du topic c'est ici qu'il faut renseigner la donnée?On met la valeur de l'ID?
Code : Tout sélectionner
var piscine;
jeedom.cmd.execute({ id: '10234',
Ensuite toujours dans le code ci-dessus la var "piscine" c'est le nom de l'ID (si oui ou se trouve t'elle dans jeedom) ou alors on peut rentrer le nom que la veut?
Désolé pour toute ces questions de noob mais j'suis perdu en programmation...
Merci!
Re: Problème de graphique type camembert avec légende
Pour moi, c'est 155.
Le nom c'est la variable propre au code donc tu pourrais mettre "jaimepasjeedom0" c'est le même tarif.
j'avais pris un peu le temps d'expliquer le code sur mon blog dans l'article sur le design (voir signature).
Le nom c'est la variable propre au code donc tu pourrais mettre "jaimepasjeedom0" c'est le même tarif.
j'avais pris un peu le temps d'expliquer le code sur mon blog dans l'article sur le design (voir signature).
Re: Problème de graphique type camembert avec légende
Merci à toi pour les infos
Donc tu parles de cet extrait?
Je supprime simplement les extraits de code en trop (je ne dois que monitorer production et consommation d'énergie), je change l'ID correspondant aussi biensur. J'ai bon?Un dernier pour la fin, grâce à un membre du forum, merci à lui. Mettre en forme des graphiques type camembert. Il convient de modifier alors le code “color” (voir lien pour le choix de la couleur plus haut), d’avoir le même champ “Name” (que le var dans le premier bloc) et l’ID Jeedom de l’information que vous voulez grapher :
id consommation-piscine donne id: ‘10234’ ;
variable var piscine correspondante ;
dans la partie data donne name : ‘Piscine’ mais surtout le champ Y qui est la variable var piscine précédente ;
et qui sera affiché avec la couleur #408080.Code : Tout sélectionner
<div id="container" style="min-width: 150px; height: 150px;"></div> <script> var piscine; jeedom.cmd.execute({ id: '10234', success: function(resultat) { piscine = parseFloat(resultat); } }); var chauffage; jeedom.cmd.execute({ id: '10235', success: function(resultat) { chauffage = parseFloat(resultat); } }); var ecs; jeedom.cmd.execute({ id: '10236', success: function(resultat) { ecs = parseFloat(resultat); } }); var onduleur; jeedom.cmd.execute({ id: '10245', success: function(resultat) { onduleur = parseFloat(resultat); } }); var autres; jeedom.cmd.execute({ id: '10237', success: function(resultat) { autres = parseFloat(resultat); } }); setTimeout(graph, 5000); function graph(){ Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Répartition de la veille' }, tooltip: { pointFormat: '{series.name}<b>{point.y}€ soit: {point.percentage:.1f}%</b><b></b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, credits: { enabled: false }, navigation: { buttonOptions: { enabled: false } }, series: [{ type: 'pie', name: ' ', size: '100%', data: [{ name: 'Piscine', y: piscine, color: '#408080' }, { name: 'Chauffage', y: chauffage, color: '#FF8080' }, { name: 'Eau Chaude', y: ecs, color: '#0080FF' }, { name: 'Onduleur', y: onduleur, color: '#FFFF80' }, { name: 'Autres', y: autres, color: '#FF9900' } ] }] }); } </script>
Merci à toi (et aux autres)
Re: Problème de graphique type camembert avec légende
Yep!
Envoyé de mon JSN-L21 en utilisant Tapatalk
Envoyé de mon JSN-L21 en utilisant Tapatalk
Re: Problème de graphique type camembert avec légende
Merci à toi je pense que je vais encore un peu t'embêter ces prochains jours j'essaye de décortiquer les programmations js pour faire de beaux graphique... j'y connais rien
ton blog est une mine d'info merci!
Un petit don paypal s'impose!
ton blog est une mine d'info merci!
Un petit don paypal s'impose!
Re: Problème de graphique type camembert avec légende
Merci
Envoyé de mon JSN-L21 en utilisant Tapatalk
Envoyé de mon JSN-L21 en utilisant Tapatalk
Re: Problème de graphique type camembert avec légende
Hello!
J'ai "réussi" à simplement rentrer mes données dans le programme donné plus haut:
Pouvez-vous me dire si j'ai à peut près compris/décortiqué le code
On crée un "objet" nommé container de taille 500x500px
On crée une variable nommée "puissance" que le va chercher avec l'ID est son numéro
Question : c'est une valeur à l'instant où le graphe est généré c'est ça? Pas de rafraichissement possible? pas de valeur issue de l'historique?
La j'ai pas vraiment tout compris...si quelqu'un veut bien me traduire?
On attend 1sec avant génération du graphe
On appelle la fonction graph de highcharts dans l'objet container créé précédemment
Ici ce sont les "propriétés" du graph que l'on veut. j'ai bien compris le type "pie"(=camembert) mais le reste je sèche...
Le titre du graphe! super j'suis trop fort!
La ça à l'air d'être les propriétés de la fenêtre qui apparait quand on survole une partie du camembert
là je suis un peu perdu ça à l'air d'être les propriétés du graphe.... un peu plus d'explication svp?
ça n'a pas l'air très important
là je ne sais pas trop ce que ça veut dire...
la ce sont les propriétés des morceaux de camembert, j'ai pas tout compris mais je pense savoir quoi remplir...
Voilà je me donne du mal pour comprendre mais n'ayant AUCUNE connaissance en programmation java ou autre (à part arduino) j'ai beaucoup de mal...
Je n'arrive pas à comprendre quand, où et comment les valeurs vont être actualisées? Commenet lui dire "prends la valeur totale de la veille" par exemple....
Merci à vous pour votre aide!
J'ai "réussi" à simplement rentrer mes données dans le programme donné plus haut:
Pouvez-vous me dire si j'ai à peut près compris/décortiqué le code
Code : Tout sélectionner
<div id="container" style="min-width: 500px; height: 500px;"></div><script>
Code : Tout sélectionner
var puissance;
jeedom.cmd.execute({ id: '155',
Question : c'est une valeur à l'instant où le graphe est généré c'est ça? Pas de rafraichissement possible? pas de valeur issue de l'historique?
Code : Tout sélectionner
success: function(resultat) {
puissance = parseFloat(resultat);
La j'ai pas vraiment tout compris...si quelqu'un veut bien me traduire?
Code : Tout sélectionner
setTimeout(graph, 1000);
Code : Tout sélectionner
function graph(){
Highcharts.chart('container'
Code : Tout sélectionner
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
Code : Tout sélectionner
title: {
text: 'Test_premier_camembert'
Code : Tout sélectionner
tooltip: {
pointFormat: '{series.name}<b>{point.y}€ soit: {point.percentage:.1f}%</b><b></b>'
},
Code : Tout sélectionner
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
Code : Tout sélectionner
credits: {
enabled: false
},
Code : Tout sélectionner
navigation: {
buttonOptions: {
enabled: false
Code : Tout sélectionner
series: [{
type: 'pie',
name: ' ',
size: '100%',
data: [{
name: 'puissance',
y: puissance,
color: '#408080'
Voilà je me donne du mal pour comprendre mais n'ayant AUCUNE connaissance en programmation java ou autre (à part arduino) j'ai beaucoup de mal...
Je n'arrive pas à comprendre quand, où et comment les valeurs vont être actualisées? Commenet lui dire "prends la valeur totale de la veille" par exemple....
Merci à vous pour votre aide!
Re: Problème de graphique type camembert avec légende
1) c'est énergie en toute rigueur et non puissance car wh.
Donc c'est une fonction qui calcule ta puissance sur la journée (depuis minuit).
Si tu n'es pas à l'aise en électricité/énergie le plugin Energie ou Suivi conso le fait, sinon je te renvoie à un scénario avec somme de puissance par minutes (calcul de l'aire pour avoir l'énergie) ; ce que je fais. Je n'aurai pas le temps matériel pour t'expliquer tout en détails en ce moment.
2) conversion en float (conversion de type)
3) ce sont des paramètres de la classe chart (un peu de recherche sur le net)
4) idem (on va sauter hein... c'est bien beau de tout vouloir savoir).
5)
tu fais une série (une zone de données) d'un camembert sans nom, taille 100 avec comme donnée nommée puissance, qui utilise le y (celui défini au début de ton code) puissance (mettre le même nom qu'en haut) et avec la couleur (code hexa).
Donc c'est une fonction qui calcule ta puissance sur la journée (depuis minuit).
Si tu n'es pas à l'aise en électricité/énergie le plugin Energie ou Suivi conso le fait, sinon je te renvoie à un scénario avec somme de puissance par minutes (calcul de l'aire pour avoir l'énergie) ; ce que je fais. Je n'aurai pas le temps matériel pour t'expliquer tout en détails en ce moment.
2) conversion en float (conversion de type)
3) ce sont des paramètres de la classe chart (un peu de recherche sur le net)
4) idem (on va sauter hein... c'est bien beau de tout vouloir savoir).
5)
Code : Tout sélectionner
series: [{
type: 'pie',
name: ' ',
size: '100%',
data: [{
name: 'puissance',
y: puissance,
color: '#408080'
Re: Problème de graphique type camembert avec légende
GRAND merci à toi pour les réponses!
En fait tu vas rire mais je suis électricien .
Sauf erreur de ma part la valeur que je récupère dans ID155 c'est une puissance active instantanée calculée avec le produit U*I (calcul effectué par l'arduino) ramené en mqtt à jeedom toute les 10s.
Si je comprends la valeur affichée dans le camembert n'est pas simplement la valeur de l'ID mais il y a un calcul qui est appliqué? si oui, on trouve où ce calcul? dans le code?
Enfin si je devais apprendre ce type de codage/programmation il faudrait que je m'oriente sur quel langage? (que je cherche des tuto/formation sur le net)
Encore merci à toi et pour ta patience
En fait tu vas rire mais je suis électricien .
Sauf erreur de ma part la valeur que je récupère dans ID155 c'est une puissance active instantanée calculée avec le produit U*I (calcul effectué par l'arduino) ramené en mqtt à jeedom toute les 10s.
Si je comprends la valeur affichée dans le camembert n'est pas simplement la valeur de l'ID mais il y a un calcul qui est appliqué? si oui, on trouve où ce calcul? dans le code?
Enfin si je devais apprendre ce type de codage/programmation il faudrait que je m'oriente sur quel langage? (que je cherche des tuto/formation sur le net)
Encore merci à toi et pour ta patience
Re: Problème de graphique type camembert avec légende
Il te faut utiliser suivi conso ou énergie en plugin.
Sinon tu sommes 6 fois par heure en scénario tes points 10min.
Javascript et html.
Envoyé de mon JSN-L21 en utilisant Tapatalk
Sinon tu sommes 6 fois par heure en scénario tes points 10min.
Javascript et html.
Envoyé de mon JSN-L21 en utilisant Tapatalk
Re: Problème de graphique type camembert avec légende
highchart à une api
https://api.highcharts.com/highcharts/credits.text
prenons credits
clic sur credits disable
a la place de false dans le code
tu changes par true
tu clic sur run
et tu vois en bas à droite highcharts.com
tu veux faire un camembert ?
ta recherche était plutot sur historique
viewtopic.php?f=50&t=1182&p=578659&hili ... ry#p578659
viewtopic.php?f=50&t=1182&start=1220#p621788
maintenant tu veux voir sur ton design un brut de brut
html dans design et colle (par sécurité fait un backup avant)
Tu peux partir sur celui là
https://www.highcharts.com/demo/column- ... dark-unica
Et avec codepen en mini -5
https://api.highcharts.com/highcharts/credits.text
prenons credits
clic sur credits disable
a la place de false dans le code
tu changes par true
tu clic sur run
et tu vois en bas à droite highcharts.com
tu veux faire un camembert ?
ta recherche était plutot sur historique
viewtopic.php?f=50&t=1182&p=578659&hili ... ry#p578659
viewtopic.php?f=50&t=1182&start=1220#p621788
maintenant tu veux voir sur ton design un brut de brut
html dans design et colle (par sécurité fait un backup avant)
Code : Tout sélectionner
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
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>
https://www.highcharts.com/demo/column- ... dark-unica
Et avec codepen en mini -5
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités