Amelioration de mes Graphes [résolu]

Ce forum est dédié aux discussions qui concernent les graphiques réalisés avec la librairie Highcharts, Une question, un bug ?

Modérateurs : jturlier, Météo Villarzel

b.gwen
Messages : 25
Enregistré le : 04 avr. 2015, 18:12

Amelioration de mes Graphes [résolu]

Message par b.gwen » 04 avr. 2015, 20:26

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.
Modifié en dernier par b.gwen le 06 avr. 2015, 16:35, modifié 2 fois.

Avatar du membre
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: Amelioration de mes Graphes

Message par Météo Villarzel » 04 avr. 2015, 23:57

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+
Station Vantage Pro2+ avec station agricole - Weatherlink - GraphWeather 3.0.15b - Cumulus 1.9.4 - Windows 7/64
Graphique dynamique à partir d'une bd MySql - VP2SQL

Image

b.gwen
Messages : 25
Enregistré le : 04 avr. 2015, 18:12

Re: Amelioration de mes Graphes

Message par b.gwen » 05 avr. 2015, 15:13

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]
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Avatar du membre
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: Amelioration de mes Graphes

Message par Météo Villarzel » 05 avr. 2015, 15:56

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+
Station Vantage Pro2+ avec station agricole - Weatherlink - GraphWeather 3.0.15b - Cumulus 1.9.4 - Windows 7/64
Graphique dynamique à partir d'une bd MySql - VP2SQL

Image

b.gwen
Messages : 25
Enregistré le : 04 avr. 2015, 18:12

Re: Amelioration de mes Graphes

Message par b.gwen » 05 avr. 2015, 20:45

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

Avatar du membre
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: Amelioration de mes Graphes

Message par Météo Villarzel » 06 avr. 2015, 00:04

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',
},

alain
Messages : 101
Enregistré le : 21 nov. 2014, 20:23

Re: Amelioration de mes Graphes

Message par alain » 06 avr. 2015, 02:02

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
station Orégon WMR 200
logiciel Xnet version 2012-03-17a et Graphweather V 3.0.15
windows XP SP3 sur vieux portable destiné a la météo
Windows7 sur mon portable, permet de tester les applications qui ne veulent plus de XP
http://mapetitemeteo.esy.es/

b.gwen
Messages : 25
Enregistré le : 04 avr. 2015, 18:12

Re: Amelioration de mes Graphes

Message par b.gwen » 06 avr. 2015, 11:09

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
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
Modifié en dernier par b.gwen le 06 avr. 2015, 16:37, modifié 2 fois.

Avatar du membre
PascalWMR
Messages : 323
Enregistré le : 16 févr. 2014, 09:28
Localisation : CONFLANS EN JARNISY (F54800)
Contact :

Re: Amelioration de mes Graphes

Message par PascalWMR » 06 avr. 2015, 11:54

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
Station VP2Plus, Windows 10 64 bits,WeatherLink 6.0.5, VP2SQL, Graphiques Dynamiques à partir d'une BDD MySQL
Météo Conflans-en-Jarnisy
Image

b.gwen
Messages : 25
Enregistré le : 04 avr. 2015, 18:12

Re: Amelioration de mes Graphes

Message par b.gwen » 06 avr. 2015, 14:09

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 !!!

Répondre