gwatts / jquery.sparkline

A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser
http://omnipotent.net/jquery.sparkline/
1.24k stars 278 forks source link

How to "Mouse speed" #155

Open henrytran9x opened 8 years ago

henrytran9x commented 8 years ago

Hi people ! I Used the type "Line" , i want to used "Mouse Speed" for it . How to did it ? Thanks

mylesboone commented 2 years ago

Taken from https://omnipotent.net/jquery.sparkline/assets/index.js

All you'll need is <div id="mousespeed"></div>

    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);