Why do data from column data swap position in certain row and / How to update data effectively while streaming

[stevedanomodolor]

I am currently working on a project that uses perspective to stream data in real-time. The data is created and update every x milliseconds. As I was streaming the data I notice that some column data change position in some certain role but weirdly enough does not affect the visualization. This brings me to think, it has something to do with synchronitzation. This can be seen in the following image. How can I solve this issue?
.

The second issue I am having is when I try to update the data, since the new data is not at the exact position as the old data, it produces a weird misalignment.
This effect can be seen in the following image.
I have two questions with respect to this second problem.
1- How do I stop that from happening
2- How to maintain fix the length of the x axis and the y axis. What I mean is how to like for example fix x length to go from 0 to 9 or y from -5 to 5. Also, since the data is constantly updating, I want the new data to move while the view (x-axis and x-axis) remains static.

This is the code in case you want to reproduce the result

`

// variables for perspective update

// How many rows per update?
const UPDATE_SIZE = 1;

// Update every N milliseconds
const TICK_RATE = 50;


// Size limit of the table
const TABLE_SIZE = 100;

// initializing simulation variables
var controler = 0;
var dt = 0.0001; // 1 ms
var lastLoop = 0;
var fps_avg = 0;
var state = "run";


// main update function
function update_motor(total_rows) {
    var rows = [];
    for (x = 0; x < total_rows; x++) {

        var thisLoop = new Date;
        if (lastLoop == 0) {
            lastLoop = thisLoop;
            return rows;
        }
        var fps = 1000 / (thisLoop - lastLoop);
        lastLoop = thisLoop;
        fps_avg = fps_avg * 0.9 + fps * 0.1;
        var pos_output; // To prevent data overflow
        if(state == "run"){
        var steps = 1 / fps / dt;
      let array_result = [1,2,3,4,5,6,7,8]

      if (controler == 2) {
          pos_output = array_result[5];
      } else {
          pos_output = 0;
      }
      rows.push({
          lastUpdate: new Date(),
          computational_time: array_result[0], // time of simulation in seconds
          va: array_result[1],
          vc: array_result[2],
          vb: array_result[3],
          rpm: array_result[4],
          position: pos_output,// For visualitzation purpose
          iq: array_result[6],
          id: array_result[7],
          avg_stream_rate: fps
      });
}

 }

    return rows;

}

window.addEventListener("WebComponentsReady", function() {
      var elem = document.getElementsByTagName("perspective-viewer")[0];

      var worker = perspective.worker();
      var schema = {
      lastUpdate: "datetime",
          computational_time: "integer", // time of simulation in seconds
          va: "float",
          vc: "float",
          vb: "float",
          rpm: "float",
          position: "float", // curent position
          iq: "float",
          id: "float",
          avg_stream_rate: "integer"
      };

        const table = worker.table(schema, {limit: TABLE_SIZE});
        elem.load(table);
         elem.toggleConfig();


      // Loop and update the `table` oocasionally.
      (function postRow() {
            if(state == "run"){
          table.update(update_motor(UPDATE_SIZE));

           }
           setTimeout(postRow, TICK_RATE);




      })();




});
`

[texodus]

Thanks @stevedanOgochu for the bug report and reproduction.

The second issue I am having is when I try to update the data, since the new data is not at the exact position as the old data, it produces a weird misalignment.

Perspective does not know anything about your data's "alignment". If you want to see a line chart on a time axis, you need to tell it this explicitly by making lastUpdate an aggregate, as in the example on our gh-page.

While perspective-viewer-d3fc does not yet have an xy-line chart type, perspective-viewer-highcharts does and both support xy-scatter which allows non-linear time series plots as well.
You may also want to review the Concepts Guide which goes into some detail about how row and column pivots work.

2- How to maintain fix the length of the x axis and the y axis. What I mean is how to like for example fix x length to go from 0 to 9 or y from -5 to 5. Also, since the data is constantly updating, I want the new data to move while the view (x-axis and x-axis) remains static.

Remove TABLE_SIZE. perspective-viewer-d3fc doesn't currently support fixed viewports outside of the dataset's current bounds.
We could pretty easily add "chart lifetime bounds" that only grow, or unlock mouse scroll zooming on this axis, in perspective-viewer-d3fc plugin; the first step would be creating a properly templated Issue for it.

I am currently working on a project that uses perspective to stream data in real-time. The data is created and update every x milliseconds. As I was streaming the data I notice that some column data change position in some certain role but weirdly enough does not affect the visualization.

This is just a bug in perspective-viewer-datagrid - it has already been fixed and will be in the 0.5.0 release. perspective-viewer-hypergrid is still available and has identical functionality (though will be removed in future releases).

A note for future contributions:

• Please don't use the Github "edit comment" feature to rewrite or substantively rephrase your questions - it destroys the context of the conversation. Future developers, who may be experiencing this same issue, need conversations like these to fix their own apps!

• Please try not to conflate multiple reports in a single Github Issue - this makes it hard to use our "Issues" log to find relevant duplicates, for example.

• Please use the provided issue templates.

• If you provide screenshots, make sure they match the code you post (the screenshot and example data are very different). Proper formatting and use of ```javascript GH flavored markdown is also much appreciated.