Je cherche à faire pour ma version smartphone un graphique responsive, graphique qui s'adapte automatiquement en longueur et hauteur à la taille de l'écran.
j'ai trouvé sur Highcharts cet exemple
http://jsfiddle.net/gh/get/library/pure ... esponsive/
J'ai essayé d'adapté le code à mon graphique sans les boutons, il s'adapte bien à la taille de l'écran, mais seulement en longueur, donc j'ai loupé quelques chose, mais je ne vois pas quoi.
Mon graphique:
http://www.meteo-jarny.com/test-mobile/ ... re-24h.php
Je sais qu'il y a des morceaux de code à supprimer qui ne servent qu'aux boutons, je les supprimerais après
Code : Tout sélectionner
<?php
require("mysqli_connect.php");
$sql="select max(tstamp) from data";
$query=mysqli_query($conn,$sql);
$list=mysqli_fetch_array($query);
$stop=$list[0];
$start=$stop-(43200*2);
$sql = "SELECT tstamp, outdoortemperature FROM data where tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1";
$query=mysqli_query($conn,$sql);
$i=0;
while ($list = mysqli_fetch_array($query)) {
if (date("I",time())==0) {
$dtime[$i]=($list['tstamp']+3600)*1000;
$minuit=(mktime(0 ,0 ,0 , date("n"), date("j"), date("Y"))+3600)*1000;
}
else {
$dtime[$i]=($list['tstamp']+7200)*1000;
$minuit=(mktime(0 ,0 ,0 , date("n"), date("j"), date("Y"))+7200)*1000;
}
$outdoortemperature[$i]=$list['outdoortemperature']*1;
$i++;
}
$debut= $dtime[0];
?>
<script type="text/javascript">
eval(<?php echo "'var dTime = ".json_encode($dtime)."'" ?>);
eval(<?php echo "'var outdoortemperature = ".json_encode($outdoortemperature)."'" ?>);
eval(<?php echo "'var debut = ".json_encode($debut)."'" ?>);
eval(<?php echo "'var minuit = ".json_encode($minuit)."'" ?>);
</script>
<!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 NAME="SUBJECT" CONTENT="Graphique Vantage Pro Davis">
<META NAME="DESCRIPTION" CONTENT="graphique dynamique">
<META NAME="KEYWORDS" CONTENT=" mto, pluie, vent, temprature, temperature, station, Vantage, Davis, Pro, Davis Vantage Pro,pression, UV, soleil,">
<META NAME="REVISIT-AFTER" CONTENT="5 DAYS">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=9" >
<META NAME="LANGUAGE" CONTENT="FR">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Météo Jarny (54)</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="highcharts/js/themes/default.js"></script>
<script type="text/javascript" src="jquery/overlib.js"></script>
<script type="text/javascript" src="jquery/overlib_fade.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<div id="container"></div>
<style type ='text/css'>
#container {
min-width: 310px;
max-width: 800px;
}
</style>
<!-- 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;
}
var conf_heure =
{
days: {'Sun': 'Dimanche','Mon': 'Lundi','Tue': 'Mardi','Wed': 'Mercredi','Thu': 'Jeudi','Fri': 'Vendredi','Sat': 'Samedi'},
mois: {'01': 'Janvier','02': 'Février','03': 'Mars','04': 'Avril','05': 'Mai','06': 'Juin','07': 'Juillet','08': 'Août','09': 'Septembre','10': 'Octobre','11': 'Novembre','12': 'Décembre'},
}
$(function () {
var chart;
$(document).ready(function() {
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({
lang: {
months: ["Janvier "," Février "," Mars "," Avril "," Mai "," Juin "," Juillet "," Août "," Septembre "," Octobre "," Novembre "," Décembre"],
weekdays: ["Dim "," Lun "," Mar "," Mer "," Jeu "," Ven "," Sam"],
resetZoom: 'Reset zoom',
resetZoomTitle: 'Reset zoom à 1:1',
downloadPNG: "Télécharger au format PNG image",
downloadJPEG: "Télécharger au format JPEG image",
downloadPDF: "Télécharger au format PDF document",
downloadSVG: "Télécharger au format SVG vector image",
exportButtonTitle: "Exporter image ou document",
printChart: "Imprimer le graphique",
loading: "Laden..."
}
});
chart = new Highcharts.Chart({
chart: {
height: 400,
renderTo: 'container',
zoomType: 'x',
type: 'spline',
marginRight: 10,
marginBottom: 40,
plotBorderColor: '#346691',
plotBorderWidth: 1,
borderRadius: 15,
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(176, 176, 176)'],
[1, 'rgb(170, 170, 170)']
]
},
},
title: {
text: 'Température des dernières 24 heures',
y: 7,
x: 10, //center
style: {
fontSize: '12px',
color:'black'}
},
credits: {
style: {
color: '#000000'},
text: '© Météo Jarny',
href: ''
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {day: "%H:%M", hour: "%H:%M"},
tickInterval: 14400*1000,
labels: {rotation: 0, align: 'center', style:{font: '9px arial, sans-serif', color: '#000000'} },
title: false,
plotLines: [{
value: minuit,
dashStyle: 'ShortDash',
width: 1.5,
color: '#ffffff',
label: {
text: 'Minuit',
align: 'right',
style:{font: 'bold 10px sans-serif', color: '#ffffff'},
rotation: 0,
y: 10,
x: -2,
}
}],
},
yAxis: {
tickInterval: 5,
labels: {rotation: 0, align: 'right', style:{font: '', color: '#000000'} },
title: {
text: null,
},
labels: {
formatter: function() {
return this.value +' °C';
},
style: {
color: '#0000FF'
}
},
plotLines: [{
value: 0,
width: 1.5,
color: '#FFFF00'
}]
},
legend: {
enabled: false
},
tooltip: {
crosshairs:[true],
borderColor: '#4b85b7',
shared: true,
backgroundColor: '#c4c4c4',
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Température': ' °C'
}[this.point.series.name];
s = s + '<br>' + '<span style="color:'+ point.series.color +'">' + point.series.name + '</span> : '
+Highcharts.numberFormat(point.y,1,","," ")
+ unit;
});
return s;
},
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [
{
name: 'Température',
zIndex: 1,
color: '#0000ff',
lineWidth: 1,
data: comArr(outdoortemperature)
},
]
});
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 300
},
subtitle: {
text: null
},
navigator: {
enabled: false
}
}
}]
}
});
$('#small').click(function () {
chart.setSize(400);
});
$('#large').click(function () {
chart.setSize(800);
});
$('#auto').click(function () {
chart.setSize(null);
});
});
</script>
</head>
<body>
</body>
</html>
