Plotly: Comment éliminer les anciens points?

Question

TL; DR Je souhaite afficher un graphique en bande de longue durée avec Plotly.js. Je ne sais pas comment jeter les vieux points.

Détails

Le updater suivant de mon CodePen à https://codepen.io/Michael-F-Ellis/pen/QvXPQr fait presque ce que je veux. Il montre un ensemble de 20 échantillons dans 2 traces qui se mettent à jour continuellement à intervalles de 500 msec. A la fin de la démo, il trace tous les points pour montrer qu'ils existent toujours.

var cnt = 0; 
var interval = setInterval(function() { 
    // Add next point to each trace 
    Plotly.extendTraces('graph', { 
    y: [[rand()], [rand()]] 
    }, [0, 1]) 
    // Display only 20 most recent points 
    Plotly.relayout('graph', { 'xaxis.range': [cnt-20, cnt]}) 

    cnt = cnt+1; 
    if(cnt === 100) { 
    // Before ending the run, show all points 
    // to demonstrate they still exist in Plotly. 
    Plotly.relayout('graph', { 'xaxis.range': [0, cnt]}); 
    clearInterval(interval); 
    } 
}, 500); 

Le problème est que je ne voulez supprimer des points plus âgés. L'application réelle doit fonctionner essentiellement pour toujours sur un système avec une mémoire limitée. Je cherche un appel Plotly qui va laisser tomber les N plus anciens points de trace. Il doit être raisonnablement efficace car les performances du système cible sont également limitées.

Merci!

Answer 1

https://codepen.io/Michael-F-Ellis/pen/YxeEwm

Ce qui précède semble réalisable d'un point de vue comportemental. Voici la routine de mise à jour révisée:

Plotly.plot('graph', data); 
var cnt = 0; 
var max = 20; 
var interval = setInterval(function() { 
    // Add next point to each trace 
    Plotly.extendTraces('graph', { 
    y: [[rand()], [rand()]] 
    }, [0, 1]) 
    // Keep only 'max' most recent points 
    if(cnt > max) { 
    data[0].y.shift(); 
    data[1].y.shift(); 
    } 
    cnt = cnt+1; 
    if(cnt === 100) { 
    // Before ending the run, show all points 
    // to demonstrate that only 'max' points 
    // still exist in Plotly. 
    Plotly.relayout('graph', { 'xaxis.range': [0, cnt]}); 
    clearInterval(interval); 
    } 
}, 500); 

La solution est de garder l'objet de données dans un var extérieur de Plotly et utiliser shift() d'abandonner les anciens points depuis le début du tableau en tant que nouveaux points sont ajoutés.

Je suis ouvert à une autre solution, surtout s'il y a des problèmes connus de mémoire ou de performance avec cette approche.