En temps réel graphique à l'aide d'flot jquery

Je suis à la recherche d'un moyen pour afficher une VM actuel d'utilisation de l'UC à l'aide d'un Flot (Jquery) Graphique.

À partir de maintenant, je peux dessiner des lignes simples mais aucune idée sur la façon d'obtenir le graphique de la déplacer vers la gauche à mesure que de nouvelles données.

<script type="text/javascript">
        var d1 = [ [0,0] ];
         options = {
                lines: {
                    show: true
                },
                points: {
                    show: true
                },
                xaxis: {
                    tickDecimals: 0,
                    tickSize: 1
                },
                grid: {
                    backgroundColor: {
                        colors: ["#fff", "#eee"]
                    }
                }
        };

        function init() {                                              
            $.plot($("#placeholder"), d1, options);
        } /* init Function */

        function update(){
            for (var i = 0; i < 14; i += 0.5) {
                d1.push([i, Math.floor(Math.random()*11)]);
            }
            $.plot($("#placeholder"), [ d1 ], options);
        }
        init();
        $("input.dataUpdate").click(function () {
            update();
        });         
    </script>

Toute idée ou peut-être un autre plugin qui puisse faire l'affaire ?

edit :

J'ai besoin de traduire le tableau associatif :

 [ [1, (random1)], [2, (random2), [3, (random2) ]

à 

 [ [2, (random2)], [3, (random3), [4, (random4) ] (new element 4)

Ne sais pas comment faire pour atteindre ce.

OriginalL'auteur Disco | 2011-01-21

  1. 16

    Je cherchais à leur API et ils ont un "setData" fonction qui ressemble, il vous permet de mettre à jour un des graphiques de données.

    http://flot.googlecode.com/svn/trunk/API.txt

    [Mise à jour]
    Après avoir regardé l'exemple ci-dessus dans les autres navigateurs, le taux de rafraîchissement lors de la reconstruction de la parcelle à partir de zéro est un peu lent. J'ai remarqué indésirables clignote entre les mises à jour. Ici, c'est une meilleure solution:

    var xVal = 0;
var data = [[],[]];
var plot = $.plot( $("#chart4"), data);

function getData(){
    //This could be an ajax call back.
    var yVal1 = Math.floor(Math.random()*11);
    var yVal2 = Math.floor(Math.random()*11);
    var datum1 = [xVal, yVal1];
    var datum2 = [xVal, yVal2];
    data[0].push(datum1);
    data[1].push(datum2);
    if(data[0].length>10){
        //only allow ten points
        data[0] = data[0].splice(1);
        data[1] = data[1].splice(1);
    }
    xVal++;
    plot.setData(data);
    plot.setupGrid();
    plot.draw();
}

setInterval(getData, 1000);

    J'ai également mis en place un blog à propos de flot décrivant cette dans un peu plus en détail:

    http://blog.bobcravens.com/2011/01/web-charts-using-jquery-flot/

    Bob

    Comment appeler cette fonction ? de la parcelle.setData ne fonctionne pas ... désolé pour mon ignorance
    Voici un flot exemple qui est en train de faire la mise à jour via ajax et settimer: people.iola.dk/olau/flot/examples/ajax.html
    Oui, presque, mais l'intrigue ne glisse pas ici .. pour un PROCESSEUR de surveillance, il peut devenir très illisible avec des milliers de données.
    Ok. J'ai bidouiller un peu. Voici un exemple qui est de la mise à jour de l'axe: jsfiddle.net/y9brY/2
    Encore quelques travaux à faire. À un certain point, vous aurez probablement envie de jeter le plus ancien des points. Aussi l'horizontale étiquetage laisse peu à désirer. Mais je pense que le problème initial est résolu.

    OriginalL'auteur rcravens

  2. 1

    Vous pouvez utiliser le shift méthode sur le tableau pour supprimer le premier élément (c'est à dire de la décaler vers la gauche et la diminution de sa taille par 1 élément) et push à ajouter à la fin et en augmentant sa taille à sa taille d'origine avant la shift par exemple

    d1.shift();
d1.push(new_element);

    puis afficher la parcelle de nouveau avec $.l'intrigue(....)

    Fonctionne presque, sauf que les nouvelles données que j'ai ajouter comme d1.push ([arraySize, randomValue]) jamais défile.
    Salut, je n'ai jamais utilisé FLOT; j'y ai pensé il y a quelques années, mais c'était un peu lourd pour ce que je voulais. "shift()" va supprimer le premier élément et le "push()" va ajouter un nouveau dernier élément, qui est ce que le défilement est tout au sujet, donc je ne comprends pas pourquoi le FLOT graphique n'a pas de défilement. Comment peut-il afficher l'ancien premier élément lorsqu'il n'existe plus dans le tableau?

    OriginalL'auteur Neil