Plotting real-time graph from live JSON in webpage?

Question

I am creating a real-time javascript graph in my php web page. Below is the javascript graph called "Smoothie" and I have changed the "Math.random()" to my value which I have parsed the data from JSON URL. However, it is not updating in real-time. I have used the html refesh for 5 seconds but it is resetting the graph.

var smoothie = new SmoothieChart({
  grid: { strokeStyle:'rgb(125, 0, 0)', fillStyle:'rgb(60, 0, 0)',
          lineWidth: 1, millisPerLine: 250, verticalSections: 6, },
  labels: { fillStyle:'rgb(60, 0, 0)' }
});
smoothie.streamTo(document.getElementById("mycanvas"),1 /*delay*/);

// Data
var line1 = new TimeSeries();
var line2 = new TimeSeries();

// Add a random value to each line every second
var sw_2=<?php echo json_encode($sw2); ?>; //from JSON (live-data)
var sw_1=<?php echo json_encode($sw1); ?>; //from JSON (live-data)

setInterval(function() {
  line1.append(new Date().getTime(), 'sw_2'); //it was "Math.random()"
  line2.append(new Date().getTime(), 'sw_1');}, 1000);//tried change this delay,no luck

// Add to SmoothieChart
smoothie.addTimeSeries(line1,{ strokeStyle:'rgb(0, 255, 0)', fillStyle:'rgba(0, 255, 0, 0.4)', lineWidth:3 });
smoothie.addTimeSeries(line2,{ strokeStyle:'rgb(255, 0, 255)', fillStyle:'rgba(255, 0, 255, 0.3)', lineWidth:3 });

This is the input data, parsed from the JSON,

$json_string = '[![http://0.0.0.0:8080/wm/statistics/bandwidth/00:00:00:00:00:00:00:01/1/json][1]][1]';
$jsondata = file_get_contents($json_string);
$obj = json_decode($jsondata,true);
$sw1=$obj[1]['bits-per-second-rx'];
$sw2=$obj[2]['bits-per-second-rx'];

As the JSON data are packets from the network and it is bits per second, it is updating every second in the JSON URL. The Json look like this

However, I am unable to display update value in my java smoothie graph.

Found similar question:here but doesn't help me.

Here is another graph, I have tried another graph with the same concept here

Your provided code runs on an error. Also check your JSFiddle, its not working. The question you linked shows the way to go! `file_get_contents()` only executes once - for your purpose you have to stream the json like in your linked question. html reload resets the complete site for sure :) — Felix Haeberle, Apr 12 '17 at 23:52
@FelixHäberle, unfortunately, the code will not work as u can see is running on localhost. The code are there and understand the concepts so u can point out mistake or errors.thx — Cin Sb Sangpi, Apr 12 '17 at 23:56
@nogad, would you be able to explain and put example as in answer? thanks — Cin Sb Sangpi, Apr 15 '17 at 00:26

score 0 · Answer 1 · answered Sep 21 '17 at 03:20

Finally, working few weeks I have finally found out the technology called "Ajax" which can be used to update the information from the PHP page (there is the separate code for PHP). I have first created PHP page to grab the information then the js script will update information for every 1-second update.

<script>
var graph5; // global
function requestData6() {
$.ajax({
url: 'graph/sw7port1.php', 
success: function(point) {var series = graph5.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
graph5.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData6, 1000);},
cache: false});}
$(document).ready(function() {
graph5 = new Highcharts.Chart({
chart: {renderTo: 'sw7_port1',defaultSeriesType: 'spline',events: {load: requestData6}},
title: {text: 'Switch 7 -Host 7'},
xAxis: {type: 'datetime',tickPixelInterval: 150,maxZoom: 20 * 1000},
yAxis: {minPadding: 0.2,maxPadding: 0.2,title: {text: 'bits-per-second-rx',margin: 40}},
series: [{name: 'Live Traffic Port1',data: []}]});});
</script>

<?php
//header('Content-type: application/json');


Session_start(); //session store
//----------------------------Getting packets data rate from switch 1----variables-------------------//
$json_string = 'http://0.0.0.0:8080/wm/statistics/bandwidth/00:00:00:00:00:00:00:03/2/json';
$jsondata = file_get_contents($json_string);
$obj = json_decode($jsondata,true);
$sw0=$obj[0]['bits-per-second-rx'];
$sw1=$obj[1]['bits-per-second-rx'];
$sw2=$obj[2]['bits-per-second-rx'];
$sw3=$obj[3]['bits-per-second-rx'];
if ($_GET['run']) {
  exec("sh enable.sh");
}

$x1 = time() * 1000;
$y = rand(0, 100);



$ret1 = array($x1, $sw2);

echo str_replace('"', '', json_encode($ret1));


?>

Hopefully, this will help if someone is trying to figure out this thing as me. Feel free to comment and ask me.

score 0 · Answer 2 · answered Feb 12 '19 at 07:15

<script>
var graph5; // global
function requestData6() {
$.ajax({
url: 'graph/sw7port1.php', 
success: function(point) {var series = graph5.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
graph5.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData6, 1000);},
cache: false});}
$(document).ready(function() {
graph5 = new Highcharts.Chart({
chart: {renderTo: 'sw7_port1',defaultSeriesType: 'spline',events: {load: requestData6}},
title: {text: 'Switch 7 -Host 7'},
xAxis: {type: 'datetime',tickPixelInterval: 150,maxZoom: 20 * 1000},
yAxis: {minPadding: 0.2,maxPadding: 0.2,title: {text: 'bits-per-second-rx',margin: 40}},
series: [{name: 'Live Traffic Port1',data: []}]});});
</script>

Plotting real-time graph from live JSON in webpage?

2 Answers2