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(); }
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 }
yaxis: { color: "black", tickDecimals: 2, axisLabel: "Gold Price in USD/oz", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Verdana, Arial', axisLabelPadding: 5 }
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(); });