Page 1 sur 6

Amelioration de mes Graphes [résolu]

Posté : 04 avr. 2015, 20:26
par b.gwen
Bonjour a tous et merci de m’accueillir sur ce forum , je suis débutant en programmation et je recherche de l'aide.
Avec un raspberry et de sondes, je récupère les valeurs tous les 5 minutes dans un BD rrdtool , et ensuite avec HighCharts je fais un graph , pour faire cela j'ai suivi ce tuto https://howonpi.wordpress.com/
Le résultat obtenu ne me satisfait pas , la qualité du graph est vraiment très Basic ,


je souhaiterais l’améliorer. Actuellement , mes 3 sondes de température sont sur le même graph , Je souhaiterais faire un graph par sonde et que le texte soit en Francais .

Merci d'avance pour votre aide.

Re: Amelioration de mes Graphes

Posté : 04 avr. 2015, 23:57
par Météo Villarzel
Salut,
Ce que tu as sur la gauche en Anglais c'est uniquement des liens qui appellent les différents graphiques
Si je regarde sur cette page
https://dl.dropboxusercontent.com/u/488 ... t.html?48h

il y a les liens et le texte affiché

document.write('<li><a href="' + frame1url + '?3h">Last 3h</a></li>');
document.write('<li><a href="' + frame1url + '?24h">Last 24h</a></li>');
document.write('<li><a href="' + frame1url + '?48h">Last 48h</a></li>');
document.write('<li><a href="' + frame1url + '?1w">Last week</a></li>');
document.write('<li><a href="' + frame1url + '?1m">Last month</a></li>');
document.write('<li><a href="' + frame1url + '?3m">Last 3 month</a></li>');
document.write('<li><a href="' + frame1url + '?1y">Last year</a></li>');

Tu peux changer le texte (rouge), mia ça me semble bien compliqué pour en fait faire uniquement un espèce de menu qui appel chaque fois un graphique différent.

Après si tu veux un graphique pas sonde, tu dois créer 3 graphiques (1 par sonde)

A+

Re: Amelioration de mes Graphes

Posté : 05 avr. 2015, 15:13
par b.gwen
Bonjour , j'ai réussi a passer mes textes en Français , et avoir qu'une seule sonde , j'ai aussi modifier une couleur , par contre j'aurais souhaiter modifier cette couleur de fond ( Jaune ) comment faire . n'y connaissant rien je n'ai pas envie de tout cassé . Est ce que je peux poster ici mon code html afin que vous le voyer ?
Merci

[img]Sans%20titre-2.png[/img]

Re: Amelioration de mes Graphes

Posté : 05 avr. 2015, 15:56
par Météo Villarzel
Salut, pour la personnalisation des graphiques, il faut regarder dans l'API
http://api.highcharts.com/highcharts

Pour ta couleur de fonds, c'est la variable

backgroundColor: '#FFFFFF',

http://jsfiddle.net/gh/get/jquery/1.7.2 ... lor-color/


A+

Re: Amelioration de mes Graphes

Posté : 05 avr. 2015, 20:45
par b.gwen
Je pensais qu'il fallait modifier mon fichier html , mais en fait il faut modifier le fichier highcharts.js , mais avec quel soft ? Notepad++ n'est pas bon

Re: Amelioration de mes Graphes

Posté : 06 avr. 2015, 00:04
par Météo Villarzel
non ce n'est pas le fichier highcharts.js, c'est la librairie Highcharts, tu ne touches rien dedans.

Dans ton fichier tu dois avoir un truc du genre

Highcharts.setOptions({
global: {
useUTC: false
}
});

options = {
chart: {
renderTo: "content",
type: "spline"
},

Il y a encore beaucoup de ligne, mais c'est ça la configurations de tes graphiques, c'est du langage JS et tu peux l'éditer avec n'importe quel éditeur de texte, je te conseil notepad++

Dans les options générales tu rajoutes

options = {
chart: {
renderTo: "content",
type: "spline",
backgroundColor: '#FFFFFF',
},

Re: Amelioration de mes Graphes

Posté : 06 avr. 2015, 02:02
par alain
bonsoir
Avec un raspberry et de sondes, je récupère les valeurs tous les 5 minutes dans un BD rrdtool , et ensuite avec HighCharts je fais un graph
j'utilise RRDTOOL depuis plusieurs année. C'est une base de données circulaire, donc elle ne grossit pas, mais elle a une durée de vie.
Si j'ai bien compris, dans ce cas RRDTOOL ne te sert que de stockage intermédiaire, ensuite tu extrait les données pour les afficher avec Higharts?
- comment extrait tu tes données, avec quelle commande?
en principe tu crée ta base comme cela ?

Code : Tout sélectionner

RRDTOOL create EDF.rrd -s 30 DS:CONSOMMATION_EDF:GAUGE:600:-0:9000 RRA:AVERAGE:0.5:1:2880 
puis tu normalement tu graphe comme cela?

Code : Tout sélectionner

rrdtool graph Consomation.png ^
--imgformat PNG ^
--font DEFAULT:8:Arial.ttf ^
--end now ^
--start end-1h ^
--width 950 ^
--height 250 ^
--slope-mode ^
-- DEF:tempe=EDF.rrd:CONSOMMATION_EDF:AVERAGE ^
LINE1:tempe#0000ff:"CONSOMMATION_EDF" ^
GPRINT:tempe:LAST:"actuel %%.1lf " ^
GPRINT:tempe:MIN:"min %%.1lf " ^
GPRINT:tempe:MAX:"Max %%.1lf " ^
GPRINT:tempe:AVERAGE:"moyenne %%.1lf"
donc pour alimenter Highart tu fait un Fetch?

Code : Tout sélectionner

rrdtool fetch --start 1114098300 --end 1114104300  nom_de_ta_base.rrd AVERAGE
ou un dump?

Code : Tout sélectionner

rrdtool dump  nom_de_ta_base.rrd >  nom_de_ta_base.xml
Le soucis c'est que RRDTOOL au passage modifie les données qu'il recoit, mais dans certain cas c'est un avantage.
Je m'explique:
- tu choisit un pas de 5mn, tu envoie une info par 5 minutes: rien est touché.
- tu choisit un pas de 5mn, tu envoie une info par 1 minutes: RRDTOOL fait la moyenne des 5 mesures.
Perso, j'ai comme toi travaillé avec RRDTOOL comme base, mais lorsque j'ai voulu faire des graphiques plus evolués, je me suis dirigé vers un autre mode de stockage mieux adapté: MYSQL, que je maitrise très mal :(
j'ai peur que si tu es besoin de graphiques détaillées tu soit obligé de choisir un autre mode de stockage
a voir? ;)

petite question (j'ai aussi un PI 2)
tu te sert du GPIO pour capturer ou tu as une interface 1wire sur un port USB ?
EDIT
j'avais pas vue, dans le tuto c'est indiqué: GPIO.
sinon tu as lu ce tuto?
http://www.boock.ch/meteo/tuto_mysql_hi ... rts_02.php

Re: Amelioration de mes Graphes

Posté : 06 avr. 2015, 11:09
par b.gwen
Bonjour Météo Villarzel et merci pour ton aide , car un peux plus j'allais aller tripoter le fichier highcharts.js.


j'ai donc ajouté backgroundColor: '#000000 le tour du grap est passé en noir , mais ce n'est pas cela que je voulais , je voulais changer le fond du graph qui est jaune en noir , voila ce que je voudrais obtenir

[img]Sans%20titre-3.png[/img]

Merci d'avance pour votre aide

Re: Amelioration de mes Graphes

Posté : 06 avr. 2015, 11:54
par PascalWMR
Salut à tous, salut b.gwen.

Pour ce que tu veux, ça n'est pas le paramètre backgroundColor qu'il faut changer, c'est le paramètre plotBackgroundColor

A+
Pascal

Re: Amelioration de mes Graphes

Posté : 06 avr. 2015, 14:09
par b.gwen
Merci pascal j'ai bien changé plotBackgroundColor: '#000000 le font reste toujours jaune !

Je cherche aussi a changer la ligne du graph qui est jaune par du rouge
Je me demande si je n'est pas un probleme d'indexation dans mon code .

Comme j'ai préciser plus haut je suis debutant !!!