title: Plotting real-time graph from live JSON in webpage?
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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=&lt;?php echo json_encode($sw2); ?&gt;; //from JSON (live-data)
  var sw_1=&lt;?php echo json_encode($sw1); ?&gt;; //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 });</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the input data, parsed from the JSON,</p>
  
  <pre><code>$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'];
  </code></pre>
  
  <p>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 <img src="https://i.stack.imgur.com/XR2ml.png"></p>
  
  <p>However, I am unable to display update value in my java smoothie graph.</p>
  
  <p>Found similar question:<a href="https://stackoverflow.com/questions/6558129/process-a-continuous-stream-of-json">here</a> but doesn't help me. </p>
  
  <p>Here is another graph, I have tried another graph with the same concept <a href="https://jsfiddle.net/0eb6mmdj/1/" rel="nofollow noreferrer">here</a></p>