Real time data plotting with animation (similar to mouse hover)

[Mohammadsalahuddin]

There is a example in spark-line documentation that, shows mouse hover data. since mouse hover is possible then, there is a possibilities to use spark-line for real time data visualization given that data comes from json API and the API gives only one value at a time not data array.

For example, if you call the API in time, t -and receive 10 after in time (t+1) it gives 12 again in time (t+2) it gives 20 and so on...

How to to visualize these data in spark-line with animation (like mouse hover example)

[mkkim417]

you can use this example. this is realtime mousespeed sparkline demo on Official jQuery Sparklines Homepage

function drawMouseSpeedDemo() {
    var mrefreshinterval = 500; // update display every 500ms
    var lastmousex=-1; 
    var lastmousey=-1;
    var lastmousetime;
    var mousetravel = 0;
    var mpoints = [];
    var mpoints_max = 30;
    $('html').mousemove(function(e) {
        var mousex = e.pageX;
        var mousey = e.pageY;
        if (lastmousex > -1) {
            mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
        }
        lastmousex = mousex;
        lastmousey = mousey;
    });
    var mdraw = function() {
        var md = new Date();
        var timenow = md.getTime();
        if (lastmousetime && lastmousetime!=timenow) {
            var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
            mpoints.push(pps);
            if (mpoints.length > mpoints_max)
                mpoints.splice(0,1);
            mousetravel = 0;
            $('#mousespeed').sparkline(mpoints, { width: mpoints.length*2, tooltipSuffix: ' pixels per second' });
        }
        lastmousetime = timenow;
        setTimeout(mdraw, mrefreshinterval);
    }
    // We could use setInterval instead, but I prefer to do it this way
    setTimeout(mdraw, mrefreshinterval); 

mpoints is array to show data. sparkline is redrawed everytime. In this example, when you move your mouse, mousemove event is triggered. and when mpoint's last time and now time is different, they push now mousespeed data to `mpoints' then redraw. if mpoints length is too long(above mpoints_max), old data is spliced.

to make your idea possible, I think you can use this demo, setInterval, ajax. hope this helps.