Flot Time Series Line Chart

To make a time series line chart is simple, you need to use javascript timestamps, javascript timestamps is represented as milliseconds(1000 milliseconds equals to 1 seconds) since 1970-01-01 00:00. Also, the timestamps are UTC format to prevent graph shifting with each different time zones.

And you need to set xaxis mode to 'time', otherwise Flot will show xaxis exactly what you
xaxis: {
    mode: "time"
}
Line chart with time series
ExampleMake a time series line chart
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var data5 = [];

function DoSeries5(){
    var data = [];
    var start = 1354586000000;

    for(i=1;i<=50;i++){                
        data.push([start, Math.cos(i)]);
        start+= 100000
    }

    return data;
}

$(function () {    
    data5 = DoSeries5();
    
    $.plot($("#flotcontainer"),
        [
            {data: data5}
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#75A7E0", "#1F77DB"]  }
            },
            xaxis: {
                mode: "time"
            }
        }
    );

});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>


Custom Time Format

If you use time series, you can also customize your time format.
xaxis: {
    mode: "time",
    timeformat: "%Y/%m/%d"
}

/*
Time format

%h: hours
%H: hours (left-padded with a zero)
%M: minutes (left-padded with a zero)
%S: seconds (left-padded with a zero)
%d: day of month (1-31), use %0d for zero-padding
%m: month (1-12), use %0m for zero-padding
%y: year (four digits)
%b: month name (customizable)
%p: am/pm, additionally switches %h/%H to 12 hour instead of 24
%P: AM/PM (uppercase version of %p)
*/


Line chart with custom time format
ExampleMake a time series line chart with custom time format
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var data6 = [];

function DoSeries6(){
    var data = [];
    var start = 1354586000000;

    for(i=1;i<=50;i++){                
        data.push([start, i * Math.cos(i)]);
        start+= 100000
    }

    return data;
}

$(function () {    
    data6 = DoSeries6();
    
    $.plot($("#flotcontainer"),
        [
            {
              data: data6,
              points: { show: true },
              lines: { show: true}
            }
        ],
        {            
            grid: {
                backgroundColor: { colors: ["#B0D5FF", "#5CA8FF"] }
            },
            xaxis: {
                mode: "time",
                timeformat: "%0m/%0d %0H:%0M"
            }
        }
    );
});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>


comments powered by Disqus