JQuery Flot Charts with Time Series
Flot is an awesome library to produce the simple charts based on the great JQuery.
Using the date/time data (e.g. X-axis data type) is a little difficult to get working right but after exchanging the emails with the developer of the Flot library, I got it right and this solution I couldn’t find anywhere on Google/Bing.
Here’s the code snippet and I hope this helps.
This example uses our OLD json-based asmx ASP.Net service (sorry, I didn’t need to use WCF). :) You may have to tweak this code to suite your needs.
1: function LoadCharts() {
2: $.ajax({
3: type: "POST",
4: contentType: "application/json; charset=utf-8",
5: url: "SomeService.asmx/ChartData",
6: data: "{dataFor: 'blah'}",
7: success:
8: function(msg) {
9: ProcessCharts($.evalJSON(msg).d);
10: },
11: error:
12: function(XMLHttpRequest, textStatus, errorThrown) {
13: alert(XMLHttpRequest.responseText);
14: }
15: });
16: }
17:
18: function ProcessCharts(tables) {
19: var plot0, plot1, plot2;
20: //Assume I've 3 tables in the result.
21: $(tables).each(function(i) {
22: var data = tables[i].Data;
23: var plotData = [];
24: var offset = new Date().getTimezoneOffset() * 60 * 1000;
25:
26: //TODO: find a simple better way in jquery to do this.
27: for (var j = 0; j < data.length; j++) {
28: var d = data[j].Date; //my case the date is 20090101 format
29: d = d.substr(4, 2) + "/" + d.substr(6, 2) + "/" + d.substr(0, 4);
30: var date = new Date(d).getTime() - offset;
31: tables[i].Data[j].Date = date;
32:
33: plotData.push([date, data[j].Val]);
34: }
35: var previousPoint = null;
36: var lbl = "";
37: var options = {
38: colors: ['#123658', '#000000'],
39: series: {
40: lines: { show: true, lineWidth: 2 },
41: points: {
42: show: true
43: }
44: },
45: shadowSize: 5,
46: grid: {
47: hoverable: true,
48: clickable: false,
49: borderWidth: 1,
50: backgroundColor: '#ddf0ff'
51: },
52: legend: {
53: show: false
54: //position: "nw"
55: },
56: xaxis: {
57: mode: "time",
58: timeformat: "%m/%d/%y",
59: minTickSize: [1, "day"]
60: }
61: };
62: var InitChart = function() {
63:
64: $("#Chart" + i).remove();
65:
66: return $.plot($("#Chart" + i),
67: [{ data: plotData, label: lbl }],
68: options
69: );
70: }
71: //I've more tables in my case so change this code as per your need
72: switch (i.toString()) {
73: case "0":
74: lbl = "Label1";
75: plot0 = InitChart();
76: break;
77: default:
78: break;
79: }
80:
81: $("#Chart" + i).bind("plothover", function(event, pos, item) {
82: if (item) {
83: if (previousPoint != item.datapoint) {
84: previousPoint = item.datapoint;
85:
86: $("#tooltip").remove();
87: var x = item.datapoint[0], y = item.datapoint[1];
88:
89: var d = new Date();
90: d.setTime(x + offset);
91:
92: showTooltip(item.pageX, item.pageY, "Total " + item.series.label + " of " + d.toDateString() + " is " + addCommas(y));
93: }
94: }
95: else {
96: $("#tooltip").remove();
97: previousPoint = null;
98: }
99: });
100: });
101:
102: }
103:
104: function showTooltip(x, y, contents) {
105: $('<div id="tooltip">' + contents + '</div>').css({
106: position: 'absolute',
107: display: 'block',
108: "z-index": 10,
109: top: y + 5,
110: left: x + 5,
111: border: '1px solid #e17009',
112: padding: '3px',
113: 'background-color': '#fee',
114: opacity: 0.70,
115: margin: '5px',
116: 'font-size': '10px'
117: }).appendTo("body").fadeIn(200);
118: }
3 Comments
Comments have been disabled for this content.
akhil said
Could you post your data format, or the sample application if possible? :). Thanks!
rachitp said
@akhilparasa: You can use any sample JSON data format to use this code with. It's really no-brainer. Did you even try? Read the jFlot's documentation and you'll know what you need. Copy/pasting is easy but when you use a little of your brain as well, it'll be fun. Trust me! Good luck!
Lee Theobald said
Thanks for the great article Rachit. It's nice to see a solid example as Flot's documentation can be lacking. I just wanted to point out some trouble that I was having incase anyone stumbles across this article first. I was attempting to use the above code but mark the data up as a bar chart. The trouble with this is that each bar was just 1px wide. The bar was being sized for the exact timestamp I supplied (so 0:00 on each day) instead of the 1 day I wanted (and my axis showed). The fix for me (as I was showing daily counts was to calculate the bar width manually). E.g. series : { bars : { show : true, barWidth : 24*60*60*1000 // 1 day in milliseconds } } With that in your flot options you get lovely wide bars!