How do I send data to an element with a certain ID using JavaScript?

Question

I am using WebSockets to receive a packet of data that needs to be sent to two different canvases with IDs called magnitude1 and magnitude2. There are graphs being drawn on these canvases, and I am looking to refresh the graphs with new data periodically. However, when I call the function that sends the data to the correct element, my console shows that data is getting sent to magnitude1 once, magnitude2 once, and then data only gets sent to magnitude1 for refreshing. Here is my code:

dataCollector.onmessage = function(evt)
{
        console.log("onmessage is being called");
        var realData = new Float32Array(evt.data); //data is expected in the format [nodeID,(256 floats)]
        setInterval(function(){readMagPacket(realData);},1000);
}

function readMagPacket(theGoods)
{
    var nodeID = theGoods[0];
    console.log("The node ID is " + nodeID);
    var magnitude = new Array();
    for(var i = 1; i < theGoods.length; i++)
    {
            magnitude[i-1] = theGoods[i];
    }

   console.log("The length of packet " + nodeID + " is " + magnitude.length);

   graphMagnitude(magnitude,nodeY,freqRange);

   Mag(magnitude,nodeID,freqRange);
}

function Mag(magnitude,index,freqRange)
{
    console.log("Mag is called");

    var magPlot = new RGraph.Bar('magnitude'+index,magnitude);

    magPlot.Set('labels',freqRange);
    magPlot.Set('gutter.left',100);
    magPlot.Set('gutter.bottom',40);
    magPlot.Set('ymax',.01);
    magPlot.Set('ymin',0);
    magPlot.Set('backgroun.grid',true);
    magPlot.Set('numyticks',2);
    magPlot.Set('title','Magnitude of Channel ' + index);
    magPlot.Set('title.yaxis','Magnitude (dB)');
    magPlot.Set('title.xaxis','Frequency (MHz)');
    magPlot.Set('title.xaxis.pos',.2);
    magPlot.Set('title.yaxis.pos',.5);
    magPlot.Set('background.color','white');
    magPlot.Set('colors',['green']);
    magPlot.Set('hmargin',.00001);

    magPlot.Draw();
}

Some more detail: I want to get the packets through the socket as floats and store them in realData. I want to pass this to a function which separates the nodeID, which is the first number in the packet, from the rest of the data. I will use this to figure out which canvas to send the data to. In the line var magPlot = new RGraph.Bar('magnitude'+index,magnitude);, I pass in the nodeID as index. The part of the constructor that says 'magnitude' + index should determine the id of the canvas in which I want to create the graph. I think this is where the error is. I want to be able to refresh both graphs by combining setInterval, readMagPacket, and Mag, but it only seems to be refreshing magnitude1 only. When I looked at my console to see what was going on, I saw that all the packets were sent across first and then readMagPacket was called afterwards. Ideally, I'd like readMagPacket to be called on each packet that comes through. Is there any way to fix the code to make that happen?

Answer 1

You are calling readMagPacket repeatedly with the same data when each packet arrives. I believe it will work as you want if you remove the setInterval call, and call readMagPacket directly.