Chartjs mise à jour en temps réel

Par heb, il y a 2 ans

PHP

Bonjour,

Je vous propose ce code :

var ' . $var1 . ' = []; var ' . $var2 . ' = []; var data = { labels: '.$var1.', datasets: [{ label: "data", data: '.$var2.', backgroundColor: "#0156AC", pointStyle: "circle", pointRadius: 5, pointHoverRadius: 10 }] }; var config = { type: "line", data: data }; var myChart = new Chart ( document.getElementById("myChart"), config ); var getData = function() { jQuery.ajax({ type: "GET", dataType: "json", url: "' . $url . '", success: function(data) { for(var i in data) { ' . $var1 . '.push("" + data[i].' . $var1 . '); ' . $var2 . '.push(data[i].' . $var2 . '); } } }); myChart.update(); } setTimeout(getData, 1000); setInterval(getData, 2000);

J'obtiens toutes les valeurs dans mon graph. Comment faire pour n'afficher que les nouvelles en plus des anciennes. J'ai regardé avec la fonction shift() mais bon...

Merci !

3 réponses

heb, il y a 2 ans

Bonjour,
j'ai progressé un peu me semble-t-il lol.

En effet, je ne sais pas comment afficher les nouvelles données dans le graph.

Mon code "fonctionne", mais j'affiche l'ensemble des données répétées toutes les 2 secondes. C'est pas bien lol !

Je cherche à avoir mes données déjà présentes, les afficher une fois et dès qu'un nouvel avis entre dans la table de base de données, ce nouvel enregistrement j'ajoute au graph en temps réel.

var date_insert = []; var count = []; const ctx = $("#myChart"); const data = { labels: date_insert, datasets: [{ label: "Student Marks", data: count, backgroundColor: "#0156AC", pointStyle: "circle", pointRadius: 5, pointHoverRadius: 10 }] }; const config = { type: "line", data: data }; const myChart = new Chart ( ctx, config ); function addData(chart, label, data) { chart.data.labels.push(label); chart.data.datasets.forEach((dataset) => { dataset.data.push(data); }); chart.update(); } setInterval(function() { jQuery.ajax({ type: "GET", dataType: "json", url: "page.php", success: function(data) { for(var i in data) { date_insert.push("" + data[i].date_insert); count.push(data[i].count); }myChart.update(); } }); }, 2000);

Je ne parviens pas à utiliser la fonction addData non plus.

Il me semble que je ne suis pas loin.

Merci beaucoup

Grafikart, il y a 2 ans

Que considère tu comme "nouveau" ?

heb, il y a 2 ans

Oups en effet ...

J'ai travaillé et j'ai obtenu ce résultat.

Maintenant le problème vient du fait que le dernier segment se met bien à jour mais il est répété deux fois.

pouvez-vous m'aider à résoudre ?

var date_insert = []; var count = []; const ctx = $("#myChart"); const data = { labels: [], datasets: [{ label: "Student Marks", data: [], backgroundColor: "#0156AC", pointStyle: "circle", pointRadius: 5, pointHoverRadius: 10 }] }; const config = { type: "line", data: data }; const myChart = new Chart ( ctx, config ); function addData( chart, label, data ) { // pop last label and data point if we have 1 minutes data in chart // if ( chart.data.labels.length >= 9 ) { removeData(myChart) }; chart.data.labels.push( label ); chart.data.datasets.forEach(( dataset ) => { dataset.data.push( data ); } ); chart.update(); } function removeData( chart, callback ) { chart.data.labels.pop(); chart.data.datasets.forEach((dataset) => { dataset.data.pop(); }); chart.update(); } setInterval(function() { $.getJSON("'.$url.'", function (result) { $.each(result, function(i, field) { var count_length = result.length; if (data.labels.length < count_length) { addData(myChart, field.date_insert, field.count); } else { myChart.data.datasets[0].data[count_length] = field.count; myChart.data.labels[count_length] = field.date_insert; myChart.update(); } }); }); }, 2000);';