从网页中的实时JSON绘制实时图表？

Question

我正在我的php网页中创建一个实时的javascript图表。下面是名为“Smoothie”的javascript图，我已将“Math.random（）”更改为我已从JSON URL解析数据的值。但是，它没有实时更新。我已经使用了html refesh 5秒钟，但它正在重置图表。

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 });

这是从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'];

由于JSON数据是来自网络的数据包，并且它是每秒位数，因此它在JSON URL中每秒更新一次。 Json看起来像这个

但是，我无法在我的java思慕雪图中显示更新值。

发现类似问题：here但对我没有帮助。

这是另一张图，我尝试了另一个具有相同概念here

的图表

Answer 1

最后，工作了几个星期后，我终于找到了名为“＃Ajax＆＃34;它可用于更新PHP页面中的信息（PHP有单独的代码）。我首先创建了PHP页面以获取信息，然后js脚本将更新每1秒更新的信息。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<?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));


?>

＆＃13;

＆＃13;

＆＃13;

希望如果有人试图像我一样弄清楚这件事，这会有所帮助。 随意发表评论并问我。

Answer 2

<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>