Realtime Chart v1

Realtime Chart with random y-value and no graphics.clear(),

by Tenobaal

HTML

<script src="http://www.goodboydigital.com/pixijs/examples/8/pixi.js"></script>
<script src="https://github.com/darsain/fpsmeter/raw/master/dist/fpsmeter.js"></script>

CSS

margin: 0;
			padding: 0;
			background-color: #000000;

JavaScript

var w     = window.innerWidth;
var h     = window.innerHeight;

var dx    = 2;
var x     = 0;
var count = 20;
var oldx  = [];
var oldy  = [];

var renderer     = PIXI.autoDetectRenderer(w, h, null);
var stage        = new PIXI.Stage(0x2222);
var container    = new PIXI.DisplayObjectContainer();
var meter        = new FPSMeter();

document.body.appendChild(renderer.view);
stage.addChild(container);
container.position.x = w;
container.position.y = h;

for (var i = 0; i < count; i++) {
    var graph = new PIXI.Graphics();
    container.addChild(graph);
    oldx.push(0);
    oldy.push(0);
}

requestAnimFrame(animate);

function animate() {
    var y = [];
    for (var i = 0; i<count; i++){
        y[i] = h/count * (i + Math.random());
    }
    draw(dx, y);
    
    meter.tick();
    renderer.render(stage);
    requestAnimFrame(animate);
}

function draw(dx, y) {
    x += dx;
    container.position.x -= dx;
    for (var i = 0; i < count; i++) {
        graph = container.getChildAt(i);
        graph.lineStyle(2, 0xFFFFFF, 1);
        graph.moveTo(oldx[i], oldy[i]);
        graph.lineTo(x, -y[i]);
        oldx[i] = x;
        oldy[i] = -y[i];
        
        if (x > w){
            //graph.graphicsData.shift();  // Width Canvas-Renderer is it possibel to shift the data.
        }
    }
}