6👍
Instead of polling, you can use server-sent-events, which does not put as much strain on the server as data is only sent if a new event has happened (like a new row). More can be found out about them here: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
Here is an example, as the one in the link is not that good.
The result will look like the following gif:
chart.html
<html>
<head>
<meta charset="UTF-8">
<title>Server-sent events demo</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div"></div>
<button>Close the connection</button>
<script>
// google chart function
function chart(chart_data) {
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows(chart_data);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
// stop button
var button = document.querySelector('button');
// the rest is the EventSource, simplez..
var evtSource = new EventSource('sse.php', { withCredentials: true });
evtSource.onopen = function() {
chart([])
}
evtSource.onmessage = function(e) {
chart(JSON.parse(e.data))
}
evtSource.onerror = function() {
console.log("EventSource failed.");
}
button.onclick = function() {
console.log('Connection closed');
evtSource.close();
}
/**
* or you could use addEventListener's to listen to specific events, like event: chartdata (or incase you wanted to send multiple events in the same stream)
*/
// evtSource.addEventListener("ping", function(e) {
// // do somthing with JSON.parse(e.data)
// }, false);
// evtSource.addEventListener("message", function(e) {
// // do somthing with JSON.parse(e.data)
// }, false);
</script>
</body>
</html>
Then the event loop, note that this is not an infinite loop nor do you need to maintain it, it will get created once a client connects and exit once the client disconnects.
sse.php
<?php
// no normal requests
if ($_SERVER['HTTP_ACCEPT'] !== 'text/event-stream') {
exit();
}
// make session read-only
session_start();
session_write_close();
// disable default disconnect checks
ignore_user_abort(true);
// set headers for stream
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Access-Control-Allow-Origin: *");
// a new stream or an existing one
$lastEventId = intval(isset($_SERVER["HTTP_LAST_EVENT_ID"]) ? $_SERVER["HTTP_LAST_EVENT_ID"] : 0);
if ($lastEventId === 0) {
// resume from a previous event
$lastEventId = intval(isset($_GET["lastEventId"]) ? $_GET["lastEventId"] : 0);
}
echo ":".str_repeat(" ", 2048)."\n"; // Padding for IE
echo "retry: 2000\n";
// query initial data, or select by event id
$data = [
[0, 0],
[1, 5],
[2, 15],
[3, 45],
[4, 34],
[5, 21],
];
// mock we at event 6
$lastEventId = 6;
// start stream
while (true) {
// user disconnected, kill process
if (connection_aborted()) {
exit();
} else {
// force an update, normally you would assign ids to your events/data
$latestEventId = $lastEventId+1;
//
if ($lastEventId < $latestEventId) {
// generate some data, use array_shift() before to limit array leght whilst rolling
$data[] = [$latestEventId, rand(0, 100)];
echo "id: " . $latestEventId . "\n";
echo "event: message\n";
echo "data: ".json_encode($data)."\n\n";
$lastEventId = $latestEventId;
} else {
echo "event: ping\n";
}
}
// flush buffer
ob_flush();
flush();
// 2 second sleep
sleep(2);
}
Hope it helps, avoid polling its 2018!
- [Chartjs]-How set color family to pie chart in chart.js
- [Chartjs]-In ChartJs using a Polar area chart to show both percentage and value independently
1👍
What you can do is set a timer, then execute your ajax call every n seconds/minutes, but this is expensive if your data is too large/big. I recommend using web socket, as this will only one time open a bridge connection from your server side to your client side, then it will just cost minimal resources to transfer data between.
ref for php web socket: http://socketo.me/
Or just do the timer thing with your javascript:
setInterval(function() {
//call your ajax function here
}, 5 * 1000) //1000 millisecond = 1 second, so multiply by 5 for 5 seconds
- [Chartjs]-Changing color of specific chartjs point
- [Chartjs]-Chart.js Line chart with different background colors for each section
0👍
there are two ways to do this (there is much more, I know). the first is you create a javascript function that executes this request from time to time, (this will cost processing).
function functionAjax () {
console.log ('Running');
}
var interval = setInterval (Ajax function, 3000);
the other is you study something that is fashionable, RXJS, a javascript technology, you will need a good time to study.
If it is only for study, I recommend FireBase (google technology) in which it provides this database in real time
Simple Ajax implementation with RxJS
And always remember to search before posting anything, maybe you find the answer that you are looking for, good study =)
- [Chartjs]-Change point size and color on hover in chartjs
- [Chartjs]-Inserting percentage charts.js doughnut