score:4

Accepted answer

I've cleaned up and refactored your code a good bit to show you an example implementation. In it I'm plotting time vs. b_400_Hz since I'm not sure which signal you are after. I've commented the code below pretty well, and it's runn-able, so just ask if you have any questions:

<!DOCTYPE HTML>
<html>

<head>
  <title>Client Stomp 1</title>

  <style>
    body {
      font: 12px Arial;
    }
    
    path {
      stroke: steelblue;
      stroke-width: 2;
      fill: none;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: grey;
      stroke-width: 1;
      shape-rendering: crispEdges;
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

  <!-- *** D3.js library inclusion ... *** -->
  <script src="https://d3js.org/d3.v3.min.js"></script>
</head>

<body>
  <script>
    var urlServer;
    var topics;

    // *** The vector that will mantain the couple values  data - temperatura that there will be plotted in the line graph ...
    var dataLineGraph = [];

    // *** Setting the server and topic parameters ...
    urlServer = "ws://stream.smartdatanet.it/ws";
    topics = "/topic/output.arpa_rumore.4c5d7481-fa5e-4f2f-d26d-d4e8095b9dd2_s_01";

    // *** Create the stomp client and estabilish the connection ...
    // *** username and password are public
    client = Stomp.client(urlServer);
    client.connect("guest", "Aekieh6F", connectCallBack, function(){});

    // *** Manage the connection ...
    function connectCallBack(x) {
      client.subscribe(topics, messageCallback);
    }
    
    function compare(a,b) {
      if (a.time < b.time)
        return -1;
      if (a.time > b.time)
        return 1;
      return 0;
    }

    // parse the times from the server
    var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S%Z").parse;
    
    // *** Manage the message callback...
    function messageCallback(x) {

      // *** Convert the body message in JSON format ...
      var theJson = JSON.parse(x.body);

      // grab the values of interest
      dataLineGraph.push({
        time: parseDate(theJson.values[0].time),
        value: +theJson.values[0].components.b_400_Hz
      });
      
      // make sure we stay sorted
      dataLineGraph.sort(compare);
      
      plotLineGraph();
    }

    // intial graph setup
    setupGraph();

    // keep reference to these variables from setupGraph
    var valueline, x, y, xAxisG, yAxisG, line;
    
    function setupGraph() {
      // Set the dimensions of the canvas / graph
      var margin = {
          top: 30,
          right: 20,
          bottom: 30,
          left: 50
        },
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;

      // Set the ranges
      x = d3.time.scale().range([0, width]);
      y = d3.scale.linear().range([height, 0]);

      // Define the line
      valueline = d3.svg.line()
        .x(function(d) {
          console.log(d)
          return x(d.time);
        })
        .y(function(d) {
          return y(d.value);
        });

      // Adds the svg canvas
      var svg = d3.select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      // Add the X Axis
      xAxisG = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")");

      // Add the Y Axis
      yAxisG = svg.append("g")
        .attr("class", "y axis");

      line = svg.append("path");
    }


    // *** Function for to draw the line graph ...
    function plotLineGraph() {

      // Scale the range of the data
      x.domain(d3.extent(dataLineGraph, function(d) {
        return d.time;
      }));
      y.domain([0, d3.max(dataLineGraph, function(d) {
        return d.value;
      })]);
 
      // transistion axis
      xAxisG
        .transition()
        .duration(500)
        .ease("linear")
        .call(d3.svg.axis().scale(x).orient("bottom"));
        
      yAxisG
        .transition()
        .duration(500)
        .ease("linear")
        .call(d3.svg.axis().scale(y).orient("left"));

      // change the line
      line.transition()
        .duration(500)
        .attr("d", valueline(dataLineGraph));
    }
  </script>
</body>

</html>


Related Query

More Query from same tag