Mise en oeuvre d'une gauge
Modérateurs : jturlier, Météo Villarzel
Mise en oeuvre d'une gauge
Bonjour à tous,
J'essaie de mettre en oeuvre une gauge angulaire avec cette exemple:
http://jsfiddle.net/gh/get/library/pure ... eedometer/
Il n'y a rien à l'affichage
Qui peut me transmettre un exemple simple d'une gauge angulaire animée par une variable
Merci d'avance
Estelle
J'essaie de mettre en oeuvre une gauge angulaire avec cette exemple:
http://jsfiddle.net/gh/get/library/pure ... eedometer/
Il n'y a rien à l'affichage
Qui peut me transmettre un exemple simple d'une gauge angulaire animée par une variable
Merci d'avance
Estelle
- Météo Villarzel
- Administrateur du site
- Messages : 524
- Enregistré le : 06 févr. 2014, 09:48
- Contact :
Re: Mise en oeuvre d'une gauge
Salut Estelle
étant donné que j'utilise la dernière valeur de certaine sondes en plusieurs endroit, j'ai déjà fait un fichier pour récupérer cette valeur (la température dans l'exemple)
ce qui donne
http://www.boock.ch/meteo/graphiques_ph ... temp_1.php
ensuite pour le graphique,
http://www.boock.ch/meteo/graphiques_ph ... s_temp.php
il faut évidement indiquer le chemin vers ton fichier
$.getJSON('../data_temp_1.php', function(data)
data_temp_1.php étant le fichier créé en premier pour récupérer la dernière valeur dans la base de données
Bonne journée
A+
Pierre-André
étant donné que j'utilise la dernière valeur de certaine sondes en plusieurs endroit, j'ai déjà fait un fichier pour récupérer cette valeur (la température dans l'exemple)
Code : Tout sélectionner
<?php
// Récupération de la dernière donnée
date_default_timezone_set("UTC");
require("mysql_connect.php");
$result=mysql_query ("SELECT outdoortemperature FROM data ORDER BY tstamp DESC LIMIT 0, 1") or die (mysql_error ());
$data = array();
$count = 0;
while ($row=mysql_fetch_array($result))
{
$data[] = array( (float)$row['outdoortemperature']);
$count++;
}
echo json_encode($data);
?>
http://www.boock.ch/meteo/graphiques_ph ... temp_1.php
ensuite pour le graphique,
http://www.boock.ch/meteo/graphiques_ph ... s_temp.php
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1">
<HEAD>
<script type="text/javascript" src="jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript">
$(function () {
[color=#FF0000]$.getJSON('../data_temp_1.php', function(data)[/color] {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
//plotBackgroundImage: '',
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Température extérieure'
},
credits: {
text: 'Météo Villarzel',
href: '',
position: {
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: -35
}
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#4aabe4'],
[1, '#c3e1f6']
]
},
borderWidth: 0,
outerRadius: '105%',
innerRadius: '0%'
}]
},
// the value axis
yAxis: {
min: -20,
max: 40,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 50,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
rotation: 'auto'
},
title: {
text: '°C'
},
plotBands: [{
from: -20,
to: -10,
color: '#7adeec'
}, {
from: -10,
to: 0,
color: '#7adeec'
}, {
from: 0,
to: 10,
color: '#1f9bdc'
}, {
from: 10,
to: 20,
color: '#1f9bdc'
}, {
from: 20,
to: 30,
color: '#ea8870'
}, {
from: 30,
to: 40,
color: '#ea8870'
}]
},
plotOptions: {
gauge: {
dial: {
// dial=aiguille
radius: '80%',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 1,
baseWidth: 3,
topWidth: 0,
baseLength: '70%', // of radius
rearLength: '20%'
},pivot: {
// centre aiguille
radius: 10,
borderWidth: 1,
borderColor: 'gray',
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, 'white'],
[1, 'gray']
]
}
},dataLabels: {
enabled: true,
borderRadius: 5,
format: '{y} °C',
// backgroundColor: 'rgba(252, 255, 197, 0.7)',
borderWidth: 1,
borderColor: '#AAA',
y: 65
}
}
},
series: [{
name: 'Température',
data: data,
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="width: 270px; height: 300px; margin: 0 auto"></div>
</body>
</html>
$.getJSON('../data_temp_1.php', function(data)
data_temp_1.php étant le fichier créé en premier pour récupérer la dernière valeur dans la base de données
Bonne journée
A+
Pierre-André
Re: Mise en oeuvre d'une gauge
J'ai un peu progressé !! C'est l'exemple que j'ai téléchargé !Météo Villarzel a écrit :Salut Estelle
Pierre-André
J'arrive à afficher la gauge mais l'aiguille n'est pas visible mais la valeur change
Code : Tout sélectionner
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
</script>
</body>
</html>
A+
Estelle
Re: Mise en oeuvre d'une gauge
Concernant les données pas de pb, elles sont issues de mes BDD en MySql
J'utilise déjà Highcharts mais les gauges me posent problème d'affichage
http://ruches.montminoises.free.fr/index.php
Merci pour ton aide
PS: ton site est magnifique
J'utilise déjà Highcharts mais les gauges me posent problème d'affichage
http://ruches.montminoises.free.fr/index.php
Merci pour ton aide
PS: ton site est magnifique
Re: Mise en oeuvre d'une gauge
J'ai chargé toute les biblio avec les mêmes chemins et depuis cela fonctionne
- Météo Villarzel
- Administrateur du site
- Messages : 524
- Enregistré le : 06 févr. 2014, 09:48
- Contact :
Re: Mise en oeuvre d'une gauge
Nickel.
Sympa ton projet de ruche connectée.
A+
Sympa ton projet de ruche connectée.
A+
Re: Mise en oeuvre d'une gauge
Je n'arrive pas à supprimer le cadre blanc autour de la jauge
J'ai essayé
plotBorderColor : avec la couleur du fond de ma page
Peut on forcer la transparence du fond (pas l'intérieur du cadran et de la bordure ?
Sur ton site la tour de la jauge est couleur aluminium
Je souhaiterai une couleur cuivre
A+
Estelle
J'ai essayé
plotBorderColor : avec la couleur du fond de ma page
Peut on forcer la transparence du fond (pas l'intérieur du cadran et de la bordure ?
Sur ton site la tour de la jauge est couleur aluminium
Je souhaiterai une couleur cuivre
A+
Estelle
- Météo Villarzel
- Administrateur du site
- Messages : 524
- Enregistré le : 06 févr. 2014, 09:48
- Contact :
Re: Mise en oeuvre d'une gauge
Estelle,
je pense que tu confonds les jauges highcharts
https://www.highcharts.com/demo/gauge-speedometer
ou les options sont limitée au niveau du design, mais tu peux quand même modifier les couleurs de la panne (contour)
et la couleur de fonds
plotBackgroundColor: null,
tu peux faire tes tests ici
http://jsfiddle.net/gh/get/library/pure ... eedometer/
tu modifies le code dans la fenêtre de gauche (code JS) et tu fais Run en haut à gauche pour voir le résultat
Ne pas confondre avec les jauges SteelSeries qui sont écrite en html5
http://www.boock.ch/meteo/gauges_stelserie.php
Demo de configuration
http://www.boock.ch/meteo/gauges_stelse ... radial.php
Tutoriel
http://www.boock.ch/meteo/tuto_steelser ... ies_01.php
A+
je pense que tu confonds les jauges highcharts
https://www.highcharts.com/demo/gauge-speedometer
ou les options sont limitée au niveau du design, mais tu peux quand même modifier les couleurs de la panne (contour)
et la couleur de fonds
plotBackgroundColor: null,
tu peux faire tes tests ici
http://jsfiddle.net/gh/get/library/pure ... eedometer/
tu modifies le code dans la fenêtre de gauche (code JS) et tu fais Run en haut à gauche pour voir le résultat
Ne pas confondre avec les jauges SteelSeries qui sont écrite en html5
http://www.boock.ch/meteo/gauges_stelserie.php
Demo de configuration
http://www.boock.ch/meteo/gauges_stelse ... radial.php
Tutoriel
http://www.boock.ch/meteo/tuto_steelser ... ies_01.php
A+
- jturlier
- Administrateur du site
- Messages : 394
- Enregistré le : 10 déc. 2014, 10:20
- Localisation : Sérignan 34410
- Contact :
Re: Mise en oeuvre d'une gauge
Bonjour,
je ne crois pas que l'utilisation de highchart/highstock, soit la meilleure solution en ce qui concerne les jauges circulaires. En effet, c'est plutôt orienté graphes et charts.
Il me semblerait plus simple et avec beaucoup plus de possibilités d'utiliser les jauges radial "steel series" qui sont beaucoup plus faciles à mettre en oeuvre !
je ne crois pas que l'utilisation de highchart/highstock, soit la meilleure solution en ce qui concerne les jauges circulaires. En effet, c'est plutôt orienté graphes et charts.
Il me semblerait plus simple et avec beaucoup plus de possibilités d'utiliser les jauges radial "steel series" qui sont beaucoup plus faciles à mettre en oeuvre !
Jean
Station :
VP2pro + anémomètre ultrasons et console Vue
Cumulus 1.9.4 + Cumulus2SQL + MySQL
Audio :
FR
PC :
W10 64bits migré
http://meteoserignan.ddns.net
Station :
VP2pro + anémomètre ultrasons et console Vue
Cumulus 1.9.4 + Cumulus2SQL + MySQL
Audio :
FR
PC :
W10 64bits migré
http://meteoserignan.ddns.net
- Météo Villarzel
- Administrateur du site
- Messages : 524
- Enregistré le : 06 févr. 2014, 09:48
- Contact :
Re: Mise en oeuvre d'une gauge
pour la couleur de fond il faut rajouter cette instruction
chart: {
type: 'gauge',
plotBackgroundColor: null,
backgroundColor: '',
tu peux indiquer la couleur que tu veux entre ' '
pour la couleur des autre éléments il faut consulter les API
https://api.highcharts.com/highcharts/
chart: {
type: 'gauge',
plotBackgroundColor: null,
backgroundColor: '',
tu peux indiquer la couleur que tu veux entre ' '
pour la couleur des autre éléments il faut consulter les API
https://api.highcharts.com/highcharts/