Question

Hi I need to create a flot graph. for that I am using this plugin http://people.iola.dk/olau/flot/API.txt.

I need to show time (h:m) on x axis and counts on y axis. For that I written this kind of a script. But its not working. Any body can help me please.

var running = false;
var array;
var xscale = 10;

//this function does the plotting 
function draw() {
    var timearr = getTimeArray();
    this.array=timearr;
    var sTime ="";
    var oDate = new Date();
    var sTimestamp ="";
    var exparr = "";
    for (var l = 0; l < 10; l++) {
        sTime = this.array[l][1];
        oDate.setUTCHours(
            parseInt(sTime.substr(0, 2), 10),
            parseInt(sTime.substr(3, 2), 10),
            0,
            0
        );
        sTimestamp = oDate.getTime();
        this.array[l]=[parseInt(l),parseInt(sTimestamp)];
    }
    $.plot(
        $("#graphdiv"),[
            {
                label: "Logged In",
                data: this.array,
                lines: { show: true, fill: true, fillColor: "rgba(249, 28, 61,0.3)",lineWidth: 2.5 },
                //color:"rgba(249, 28, 61, 1)"
                color:0
            }         
        ],
        {
        xaxis: {
            ticks: getTimeArray(1),
            mode: "time",
            timeformat: "%H:%M"

        },
        yaxis: {
            ticks: [0 , 1, 2, 3,4,5, 6,7,8,9,10],
            min: 0,
            tickDecimals: 0
        },            
        grid: {
            show: true,
            color: '#474747',
            tickColor: '#474747',
            borderWidth: 2,
            autoHighlight: true,
            mouseActiveRadius: 2
        }
    });
}

function getTimeArray(flg)
{
    array = [];
    var d = new Date();
    var hour='';
    var minute='';
    var timeString ='';

    for (var i = 9; i >= 0; i--){
        if(i<9)d = new Date( d.getTime() - 5*60*1000 );
        hour   = d.getHours();
        minute = d.getMinutes();
        if (hour   > 12) { hour = hour - 12;      }
        if (hour   == 0) { hour = 12;             }
        if (hour   < 10) { hour   = "0" + hour;   }
        if (minute < 10) { minute = "0" + minute; }
        timeString = hour + ':' + minute;
        if(timeString!=undefined){
            array[i]=[i,timeString];
        }
    }
    return array;
} 


function initialize() {
    this.array = new Array();
    for (var i = 0; i < xscale; i++) {
        this.array[i] = [i, 0.0];
    }
}

function refreshStat() {
    if (!running) {
        running = true;
        draw();
        running = false;
    }
}

$(document).ready(function () {
    initialize();
    refreshStat();
    setInterval("refreshStat()", 10);
});

Answer 1

You have mistaken how flot deals with xaxis mode “time”. What it wants is x values that are integers representing javascript timestamps. It then takes care of the formatting to %H:%M.

So you’ve got some convoluted code there to make values in %H:%M and then convert them to timestamps and pass them into flot, but then also specify which ticks to show. Instead, you can just generate the timestamps you want, put them into your data array like this:

[[1329930943084,0],
 [1329931043084,1],
 ...
 [<timestamp>  ,10]]

And that’s it, just feed that into flot, no need to define the ticks on either x or y axis.

Further, your setInterval throws an error, which may have been why you weren’t getting anywhere. You can make that more like this:

setInterval(refreshStat, 10);

Here is a super-simplified version of your code: http://jsfiddle.net/ryleyb/MaJgn/