CODEWITHSUNDEEP
javascriptchartsplotly.js
debRoo
debRoo

Reputation: 3

plotly.js: How To Plot 100 points In One Second

So what I am trying to accomplish is to plot over 100 points in one second. I am using plotlyJs right now.

But it looks quite slow when it comes to plotting. I set the time to 10 so that 100 points can be plotted in one second. But as I can see the Chart is working quite slow its plotting less amount of points in one second time.

Here is the code that I am trying:

The Code:

<script>
    function getData() {
        console.log(Math.random());
        return Math.random();
    }  
    Plotly.plot('chart',[{
        y:[getData()],
        type:'line'
    }]);

    var cnt = 0;
    setInterval(function(){
        Plotly.extendTraces('chart',{ y:[[getData()]]}, [0]);
        cnt++;
        if(cnt > 1000) {
            Plotly.relayout('chart',{
                xaxis: {
                    range: [cnt-1000,cnt]
                }
            });
        }
    },10);
</script>

Here is the fiddle that I created.

Please tell me If I am missing something or this not possible in plotlyjs? The problem only arises of plotting over 100 points in one second.

If it's not possible in PlotlyJs I am open for any other charting Library suggestion.

Upvotes: 0

Views: 677

Answers (1)

Jonas Wilms
Jonas Wilms

Reputation: 138477

Your eye can only see changes at < 60fps, and the monitors therefore only rerender at 60fps. That's every 16ms. It doesn't make sense to run a timer in a smaller interval, as you won't see the updates at that speed anyway. Instead, slow down the interval, and show multiple points at a time. That's faster, and the speed in which the plot is shown can be adjusted more easily.

Upvotes: 3

Related Questions