J'ai quand même essayer en ajoutant maxPadding et startOnTick: true, à l'axe xAxis, mais c'est toujours pareil.
Suite au conseil de Pascal, j'ai créé un autre graphique avec highcharts mais mon graphique ne s'affiche pas, j'ai un page blanche. Ca fait une paire d'heures que je suis dessus mais je ne trouve pas mon erreur. Est ce qu'une âme charitable pourrait jeté un oeil sur mon code et m'aider à trouver mon ou mes erreurs.
Code : Tout sélectionner
<?php
require("mysql_connect.php");
$sql = "SELECT tstamp, SUM(t_out_mini <= 0) FROM MiniMaxidata WHERE substr(recdateTZ,5,2)='01' group by substr(recdateTZ,1,6) order by 1.";
$query=mysql_query($sql);
$i=0;
while ($list = mysql_fetch_assoc($query)) {
$dtime[$i]=($list['tstamp']+7200)*1000;
$t_out_mini[$i]=$list['SUM(t_out_mini <= 0)']*1;
$i++;
}
?>
<script type="text/javascript">
eval(<?php echo "'var dtime = ".json_encode($dtime)."'" ?>);
eval(<?php echo "'var t_out_mini <= 0 = ".json_encode($t_out_mini)."'" ?>);
</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=" météo, pluie, vent, température, 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/plain; charset=ISO-8859-1">
<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="highstock/js/highstock.js"></script>
<script type="text/javascript" src="highstock/js/highcharts-more.js"></script>
<script type="text/javascript" src="highstock/js/modules/exporting.js"></script>
<script type="text/javascript" src="highstock/js/themes/grid.js"></script>
<link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript"src="jquery/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="jquery/development-bundle/demos/datepicker/jquery.ui.datepicker-fr.js"></script>
<link rel="stylesheet" href="jquery/development-bundle/demos/demos.css">
<script type="text/javascript" src="jquery/overlib.js"></script>
<script type="text/javascript" src="jquery/overlib_fade.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 < time.length; i++) {
outarr[i] = [time[i], unitsArray[i]];
}
return outarr;
}
$(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"],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
decimalPoint: ',',
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: {
renderTo: 'container',
zoomType: 'x',
alignTicks: true,
marginRight: 10,
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 1,
},
title: {
text: 'Jours de gel des mois de janvier',
x: -20 //center
},
subtitle: {
text: 'Source: Météo Jarny',
x: -20
},
credits: {
text: '© Météo Jarny',
href: 'http://www.meteo-jarny.com/'
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y}',
align: 'center',
step: 1
}
},
yAxis: {
title: {
text: 'JOurs de gel (J.)'
},
plotLines: [{
value: 0,
width: 1,
color: '#FF0000'
}]
},
tooltip: {
crosshairs:[true],
borderColor: '#4b85b7',
shared: true,
backgroundColor: '#edf1c8',
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%Y', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Jours de gel': ' J.'
}[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: {
column: {
grouping: false,
shadow: false,
},
},
series: [{
name: 'Jours de gel',
type: 'column',
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y1: 1 },
stops: [
[0, 'rgba(180, 180, 180, .7)'],
[1, 'rgba(0, 0, 255, .8)']
]
},
data:
comArr(t_out_mini),
dataGrouping: {
approximation:'average',
units: [[
'year', // unit name
[1,2,3] // allowed multiples
], ]
},
}
]
</script>
</head>
<body>
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
</body>
</html>