Bonjour à tous !

Je suis nouveau sur le forum et vous vous en doutez je me suis inscrit parce que je rencontre quelques problèmes sur un de mes projets.

Alors, globalement, le projet consiste à récupérer des données via l'I²C d'un Raspberry, de les stocker dans une base de données (environ 100 valeurs), de mettre à jour cette base de données et enfin d'afficher le tout sous forme de graph en temps reel dans une page web: en fait, je veux lire la valeur , puis la 2, etc. et arrivé à la dernière valeur de la base de données, je reprends à 0 puisque mes valeurs ont été mises à jour entre temps. (Je ne sais pas si c'est très clair...)
Pour mon graph, j'utilise HighCharts.

Mon problème vient de l'affichage des données dans le graphique en "temps reel". En fait, j'ai mis pas mal de temps à me rendre compte que la base de données était lu avant que ma page web s'affiche, ce qui m’empêche d'avoir toute notion de "temps reel". D'où ma question, est il possible d'aller chercher les valeurs de ma base de données alors que ma page web est déjà chargée ?

J'aimerais obtenir ce résultat: http://www.highcharts.com/demo/dynamic-update en remplaçant les valeurs random par les valeurs de ma base de données.

Ça fait plusieurs jours que je cherche une solution et que je teste plein de choses, mais rien à faire. Je sèche...

Merci d'avance pour vos réponses !

il faut récupérer les données sur le serveur en ajax.
un exemple : faq-tutoriels/application-ajax-accessib ... 35431.html

Merci, je vais creuser dans ce sens !

Re bonjour !

Alors, dans l'absolu ça fonctionne. j'ai utilisé JSON. Cependant, je rencontre un soucis au niveau de l'ajout des points en temps reel dans mon graphique.
Dans http://www.highcharts.com/demo/dynamic-update on utilise un push, sauf que je n'arrive pas à mixer ça avec mon json.

Il faut que tu sois + précis dans ta question, où bloques-tu, que n'arrives-tu pas à faire, quels sont les messages d'erreur rencontrés ?

Alors, voilà mon code actuel:

[javascript]$(function () {
var chart;
$(document).ready(function() {
$.getJSON("valeur.php", function(json) {

chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
animation: Highcharts.svg,
marginRight: 130,
marginBottom: 25,
events: {
load: function () {

// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
$.getJSON('valeur.php', function (json) {
series.addPoint(json);
});
}, 1000);
}
}
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});

});

});[/javascript]

Et je voudrais ajouter un "push" comme ici :

[javascript]series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;

for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}][/javascript]

Mon souci vient du fait qu'il y a un décalage vers la gauche qui s'effectue mais qu'il n'y a pas de nouvelles valeurs qui s'affiche (pas de nouveaux points). Et aussi, dans un second temps j'aimerais intégrer un "push" comme dans le bout de code précédent, mais là je ne vois pas comment faire avec mon "json". J'ai essayé je ne sais combien de trucs différents, sans succès.

Concernant les erreurs, baaaaah, si le code ne fonctionne j'obtiens une page blanche >_<