How to make Flot time series chart

Time series data is often used for line chart, we can use the chart to see trends over time. Flot time series data is based on javascript timestamps, that is milliseconds, since January 1, 1970 00:00:00 UTC. In this chapter we will show you how to customize time series data.

Gold price

Required files

All the required files to make a time series chart are listed below.  jquery.flot.axislabels.js is an axis label plugin, and jquery.flot.time.js is a plugin used for making time series chart. In order to make chart working properly in IE8 or below, we included excanvas.min.js plugin.
 
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>      
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->   
<script type="text/javascript" src="/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
        

Creating data

In this example we put two lines in one chart, so we need to create two arrays, and insert the data that are formatted as [x ,y], that represents the data in x-axis and y-axis, we also create a function call gd() to retrieve jvascript timestamps in x-axis, then we put gold price in y-axis. Below is the codes.
 
//sell out
var data1 = [
    [gd(2013, 1, 2), 1690.25], [gd(2013, 1, 3), 1696.3], [gd(2013, 1, 4), 1659.65], [gd(2013, 1, 7), 1668.15], [gd(2013, 1, 8), 1656.1], [gd(2013, 1, 9), 1668.65], [gd(2013, 1, 10), 1668.15], [gd(2013, 1, 11), 1680.2], [gd(2013, 1, 14), 1676.7], [gd(2013, 1, 15), 1680.7], [gd(2013, 1, 16), 1689.75], [gd(2013, 1, 17), 1687.25], [gd(2013, 1, 18), 1698.3], [gd(2013, 1, 21), 1696.8], [gd(2013, 1, 22), 1701.3], [gd(2013, 1, 23), 1700.8], [gd(2013, 1, 24), 1686.75], [gd(2013, 1, 25), 1680], [gd(2013, 1, 28), 1668.65], [gd(2013, 1, 29), 1671.2], [gd(2013, 1, 30), 1675.7], [gd(2013, 1, 31), 1684.25]
];
//buy in
var data2 = [
    [gd(2013, 1, 2), 1674.15], [gd(2013, 1, 3), 1680.15], [gd(2013, 1, 4), 1643.8], [gd(2013, 1, 7), 1652.25], [gd(2013, 1, 8), 1640.3], [gd(2013, 1, 9), 1652.75], [gd(2013, 1, 10), 1652.25], [gd(2013, 1, 11), 1664.2], [gd(2013, 1, 14), 1660.7], [gd(2013, 1, 15), 1664.7], [gd(2013, 1, 16), 1673.65], [gd(2013, 1, 17), 1671.15], [gd(2013, 1, 18), 1682.1], [gd(2013, 1, 21), 1680.65], [gd(2013, 1, 22), 1685.1], [gd(2013, 1, 23), 1684.6], [gd(2013, 1, 24), 1670.65], [gd(2013, 1, 25), 1664], [gd(2013, 1, 28), 1652.75], [gd(2013, 1, 29), 1655.25], [gd(2013, 1, 30), 1659.7], [gd(2013, 1, 31), 1668.2]
];

function gd(year, month, day) {
    return new Date(year, month - 1, day).getTime();
}
        
Next, we create an array call dataset and put two objects into this array, then specify data1 and data2 to data attribute in the first and second object, we also set label attribute with the values "Sell out" and "Buy in", this will be used in the legend. And color attribute decides the color of the lines. We use points.fillColor to change the filled color of data point, also, we need to set points.show to true to make data points appear in the chart. Last, because we`re making line charts, so lines.show needs to be set to true to make lines appear in the chart.
 
var dataset = [
    {
        label: "Sell out",
        data: data1,
        color: "#FF0000",
        points: { fillColor: "#FF0000", show: true },
        lines: { show: true }
    },
    {
        label: "Buy in",
        data: data2,
        xaxis:2,
        color: "#0062E3",
        points: { fillColor: "#0062E3", show: true },
        lines: { show: true }
    }
];
        

Chart options

In order to change the look of the line chart, we set series.shadowSize, this makes the lines to create a drop shadow.
 
    series: {
        shadowSize: 5
    }
        
In the y-axis options, yaxis.color represents the color of tick labels in y-axis, in here, we set it to black color. And yaxis.tickDecimals is used to set the number of decimals to display, because gold prices have decimal point, so we set tickDecimals with the value 2, the output of gold prices will be like 1650.00. All the attributes that start with "axisLabel" are belong to axis label, the axis label attributes are provided by jquery.flot.axislabels.js plugin.
 
    yaxis: {
        color: "black",
        tickDecimals: 2,
        axisLabel: "Gold Price  in USD/oz",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 5
    }
        
We use time series in x-axis, so xaxis.mode must be set with the value "time", this makes Flot to interpret tick labels of x-axis as datetime object. We also use xaxis.tickFormatter to create a function that formats tick labels, in here, we make tick labels to show the day of week. If you don`t want to create your own function to format tick labes, you can also use  timeformat:"%a", this does the same effect. We can also control where you want tick labels to appear by using xaxis.position, we set it with the value "top" means the that tick lables will appear on the top side of the chart.

In the second object of xaxes, we set tickformat with the value "%m/%d", this makes tick labels to appear like "01/05", or you can set it with the value "%Y/%m/%d", the output of tick labels will be like "2012/01/05". We also set tickSize with the value [3, "day"], this makes tick labels to be shown in three days interval, if the value is set with [2, "month"], the tick labels will be shown in two months interval.

Below is the codes of x-axes in the options.
 
    var dayOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"];

    xaxes: [{
        mode: "time",        
        tickFormatter: function (val, axis) {            
            return dayOfWeek[new Date(val).getDay()];
        },
        color: "black",
        position: "top",        
        axisLabel: "Weekday",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 5
    },
    {
        mode: "time",
        timeformat: "%m/%d",
        tickSize: [3, "day"],
        color: "black",        
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    }]
        

The final step

In the end, we call $.plot and pass dataset and options into this function, then call UseTootip() if you want to use tooltip function, the chart is completed.
 
    $(document).ready(function () {
        $.plot($("#flot-placeholder"), dataset, options);
        $("#flot-placeholder").UseTooltip();
    });
        

Practice

You can find the source code of this example and test it online! Go to Example Tester