et plus d'options dans la partie JShttp://www.boock.ch/meteo/graphiques_ph ... _test2.php
<?php
// appel du script de connexion
require("mysql_connect.php");
$sql="select max(tstamp) from data";
$query=mysql_query($sql);
$list=mysql_fetch_array($query);
$sql = "SELECT tstamp, outdoortemperature FROM data where tstamp ORDER BY 1 DESC LIMIT 1";
$query=mysql_query($sql);
$i=0;
while ($list = mysql_fetch_assoc($query)) {
$dtime[$i]=($list['tstamp']+3600)*1000;
$dtemp[$i]=$list['outdoortemperature']*1;
Tu dois adapter le nom de ta table data dans l'exemple, la variable tstamp pour l'heure et (outdoortemperature) pour la valeur que tu veux récupérer dans ta bd
Le code complet
Code : Tout sélectionner
<?php
// appel du script de connexion
require("mysql_connect.php");
$sql="select max(tstamp) from data";
$query=mysql_query($sql);
$list=mysql_fetch_array($query);
$sql = "SELECT tstamp, outdoortemperature FROM data where tstamp ORDER BY 1 DESC LIMIT 1";
$query=mysql_query($sql);
$i=0;
while ($list = mysql_fetch_assoc($query)) {
$dtime[$i]=($list['tstamp']+3600)*1000;
$dtemp[$i]=$list['outdoortemperature']*1;
$i++;
}
?>
<!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">
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=9" >
<META NAME="LANGUAGE" CONTENT="FR">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1">
<title></title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/themes/grid.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
function comArr(unitsArray) {
var outarr = [];
for (var i = 0; i < dTime.length; i++) {
outarr[i] = [dTime[i], unitsArray[i]];
}
return outarr;
}
$(function () {
var chart;
$(document).ready(function() {
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'test'
},
credits: {
text: 'Météo Villarzel',
href: '',
position: {
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: -65
}
},
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%'
}]
},
yAxis: [{
min: -40,
max: 40,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 15,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 23,
tickColor: '#666',
labels: {
distance: -40,
step: 2,
rotation: 'auto'
},
title: {
text: 'Température'
},
plotBands: [{
from: -40,
to: -15,
color: '#7adeec',
outerRadius: '100%',
thickness: '12%'
}, {
from: -15,
to: 15,
color: '#1f9bdc',
outerRadius: '100%',
thickness: '12%'
}, {
from: 15,
to: 40,
color: '#ea8870',
outerRadius: '100%',
thickness: '12%'
},
],
offset: 0,
endOnTick: false
}],
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',
data: comArr(dTemp),
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
});
eval(<?php echo "'var dTime = ".json_encode($dtime)."'" ?>);
eval(<?php echo "'var dTemp = ".json_encode($dtemp)."'" ?>);
</script>
</head>
<body>
<div id="container" style="width: 900px; height: 450px; margin: 0 auto"></div>
</body>
</html>
merci encore