Bonjour à tous !
Je prépare un projet pour la classe de terminale SSI et je suis devant un problème. Je m'explique, je doit afficher à l'aide de Highcharts un graphique présentant la hauteur d'eau (avec un historique). Je dispose d'un Fichier JSON comme ceci :
et d'un code HTML comme ceci :
Cependant rien ne s'affiche et ça fais déjà pas mal de temps que je bloque là dessus et j'aimerais donc avancer ! De plus j'aimerais bien afficher en xAxis la date à laquelle la hauteur d'eau est récupérée du tableau mais je n'ai absolument aucune idée de comment réaliser ceci. J'approche de la deadline du projet...
Merci d'avance pour votre aide.
Bon dimanche !
Victor
Je prépare un projet pour la classe de terminale SSI et je suis devant un problème. Je m'explique, je doit afficher à l'aide de Highcharts un graphique présentant la hauteur d'eau (avec un historique). Je dispose d'un Fichier JSON comme ceci :
[[200],[250],[150]]et d'un code HTML comme ceci :
<html>
<head>
<title>Premier test de Highcharts </title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="./js/highstock.js"></script>
<script src="./js/modules/exporting.js"></script>
</head>
<body>
<?php
$date = date("d-m-Y");
$heure = date("H:i");
Print("Nous sommes le $date et il est $heure");
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<pre class="brush:jscript;">
<script type="text/javascript">
$(function() {
$.getJSON('data.json', function(data) {
var H1 = [];
for (var i=0;i<data.length;i++) {
H1.push([data[i][0],data[i][1]]);
}
// Create a timer
var start = + new Date();
// Create the chart
$('#container').highcharts('StockChart',{
chart : {
// Affichage temps chargement
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Graphique généré en : '+ (new Date() - start) +'ms'
});
}
},
zoomType: 'x'
//renderTo : 'container'
},
rangeSelector : {
inputEnabled: $('#container').width() > 144,
buttons: [{
type: 'day',
count: 1,
text: '1j'
}, {
type: 'day',
count: 2,
text: '2j'
}, {
type: 'day',
count: 3,
text: '3j'
}, {
type: 'week',
count: 1,
text: '1s'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1a'
}, {
type: 'all',
text: 'tout'
}],
selected: 1
},
yAxis: {
title: {
text: 'Hauteur d\'eau'
}
//min: -20,
//max: 40
//startOnTick: false,
//endOnTick: false
},
title : {
text : 'Mesures de hauteur d\'eau'
},
legend: {
enabled: true,
align: 'center',
layout: 'horizontal',
verticalAlign: 'bottom',
},
series : [{
name : 'Hauteur d\'eau',
data : H1,
color: '#008000',
type: 'spline',
tooltip: {
valueDecimals: 2,
valueSuffix: 'm'
}
}
]
});
});
});
</script>
<div id="container" style="height: 700px; min-width: 500px"></div>
</body>
</html>Cependant rien ne s'affiche et ça fais déjà pas mal de temps que je bloque là dessus et j'aimerais donc avancer ! De plus j'aimerais bien afficher en xAxis la date à laquelle la hauteur d'eau est récupérée du tableau mais je n'ai absolument aucune idée de comment réaliser ceci. J'approche de la deadline du projet...
Merci d'avance pour votre aide.
Bon dimanche !
Victor