é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
<!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>
data_temp_1.php étant le fichier créé en premier pour récupérer la dernière valeur dans la base de données
