0

Below is the HTML document that is implementing a Smoothie.js live streaming chart. On their own, timeSeries.append() and getJSON() methods work perfectly fine, but timeSeries.append() seems to not allow JSON data values.

The program gets stuck in the count() function; I added a document.write() method to see if it would output (see below) and it did not.

I thought maybe it was because the JSON data. when parsed, would be a string. So I took the data and made it a string and then an int.

But that didn't work.

I've been experimenting and nothing works like how I need it

<!DOCTYPE html>
<html>

  <body>
    <button onclick="myFunction()">Click to open the live PeopleCount chart </button>
    <script src="https://cdn.rawgit.com/Manaal123/smoothie/master/smoothie.js"></script>
    <canvas id="chart" width="700" height="350"></canvas>
    <style>
      div.smoothie-chart-tooltip {
        background: #999;
        padding: 1em;
        margin-top: 20px;
        font-family: consolas;
        color: white;
        font-size: 17px;
        pointer-events: none;
      }

    </style>
    <script>
      var chart = new SmoothieChart({
          interpolation: 'step',
          grid: {
            fillStyle: '#ffffff',
            strokeStyle: '#c0c0c0',
            verticalSections: 10
          },
          labels: {
            fillStyle: '#000000',
            fontSize: 16,
            precision: 0
          },
          tooltip: true,
          maxValue: 10,
          minValue: 0,
          timestampFormatter: SmoothieChart.timeFormatter
        }),

        timeSeries = new TimeSeries();
      chart.addTimeSeries(timeSeries, {
        strokeStyle: 'blue',
        lineWidth: 1,
        fillStyle: 'rgba(0,128,255,0.30)'
      });

      function count() {
        $.getJSON("http://192.168.20.193:8001/count", function(result) {
          temp = result.data.count;
        });
        document.write("hi");
        temp = parseInt(temp, 10);
        return temp;
      }

      function myFunction() {
        chart.streamTo(document.getElementById('chart'), 100);
        setInterval(function() {
            timeSeries.append(new Date().getTime(), count());
        }, 5000);

      }
      var temp;

    </script>
  </body>

</html>

1 Answer 1

0

count() is returning undefined because $.getJSON is asynchronous and you are returning temp before it is set in the callback. I would rewrite count() to something like

function count(callback) {
    $.getJSON("http://192.168.20.193:8001/count", function(result) {
        return callback(parseInt(result.data.count, 10));
    });
}

Now you have a way to know when count(...) is finished (when the callback function is called)

Then I would rewrite the way you call it like

setInterval(function() {
    count(function(temp){
        timeSeries.append(new Date().getTime(), temp);
    })
}, 5000);

Doing it this way ensures you wait for the request to your server to finish before setting data on the chart. If you would like to learn more I would suggest googling around with the word asynchronous.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.