JQuery Flot is a charting library that allows creating line, bar, and pie charts. It works across many browsers from IE6+ and has plugins for additional chart types. The document discusses using Flot to display time-series data with tabs, radio buttons, and tooltips. Code examples are provided for building the charts, handling interactions, and blocking elements to indicate loading.

1. JQuery Flot
by Arshavski Alexander

2. Charting libraries
A lot of choices -
http://my.opera.com/tagawa/blog/list-of-javascript-ch

4. Good list of
features
http://socialcompare.com/en/comparison/javascript-g

5. Should work
offline

6. Date-time axis

7. ...

8. Flot works on:
Firefox 2.x+
Safari 3.0+
Opera 9.5+
Konqueror 4.x+
Internet Explorer 6+ (the excanvas
Javascript emulation helper is used for
IE < 9)

9. A lot of plugins
and examples
Plugins -
http://code.google.com/p/flot/wiki/Plugins
Bubble charts -
https://github.com/ubermajestix/flot-plugins
Usage examples:
http://code.google.com/p/flot/wiki/FlotUsage

10. It’s not all pink and
rosy
Documentation sucks!

11. That’s why I’m here

12. What I want to do?

13. What I want to do?

14. What I want to do?

15. Imports
<link type="text/css" href="...jquery-ui.css">
<link type="text/css" href="...flot_layout.css" >
<link type="text/css" href="...jquery-ui-1.8.16.custom.css">
<script type="text/javascript" src="...jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="...jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="...jquery.flot.min.js"></script>
<script type="text/javascript" src="...jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="...jquery.blockUI.js"></script>

16. Radio buttons
<div id="radio">
<input type="radio" id="connections_radio" name="radio"
checked="checked" /><label for="connections_radio">Connections</label>
<input type="radio" id="usage_radio" name="radio" /><label
for="usage_radio">Usage</label>
<input type="radio" id="export_radio" name="radio" /><label
for="export_radio">Export</label>
</div>

17. Tabs
<div id="usage" style="display: none">
<div id="usage_tabs">
<ul>
<li><a href="#day_statistics">Day</a></li>
<li><a href="#week_statistics">Week</a></li>
<li><a href="#month_statistics">Month</a></li>
<li><a href="#year_statistics">Year</a></li>
</ul>
<div id="day_statistics">
<div id="graphs_container1" class="graph_container”>
<div id="graph1"></div>
<div id="graph1_legend" class="graph_legend"></div>
</div>
</div>
...
</div>
...
</div>

18. Radio buttons
$(function () {
$("#connections_radio").click(function(event) {
$("#connections").show();
$("#usage").hide();
$("#export").hide();
});
$("#usage_radio").click(function(event) {
$("#connections").hide();
$("#usage").show();
$("#export").hide();
});
$("#export_radio").click(function(event) {
$("#connections").hide();
$("#usage").hide();
$("#export").show();
});
});

19. Tabs
$(function () {
...
$("#connections_tabs").tabs();
$("#usage_tabs").tabs();
$("#usage_distribution_tabs").tabs();
});

20. Till now...

21. As a
python
guy it’s a
lot of
code for
me
already,
so it’s
gonna be a
mess

22. Refactoring
<script type="text/javascript" src="...statistics.js"></script>
$(function () {
...
get_connections_statistics();
get_usage_statistics();
get_api_distribution_statistics();
get_distribution_statistics();
...
});
{% include "statistics/connections.html" %}
{% include "statistics/usage.html" %}
{% include "statistics/export.html" %}

23. And now to the main
part...
var weekdayNames = "Sunday Monday Tuesday Wednesday Thursday Friday
Saturday".split(" ");
var shortMonthNames = "Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov
Dec".split(" ");
$.get('/manage/get_statistics_usage_data', {}, function(data){
var stat_data = jQuery.parseJSON(data);
//variables init
var now = new Date().getTime() + stat_data.time_offset;
var weekday = new Date(now).getDay();
var month = new Date(now).getMonth();
...

24. And now to the main
part...
//building weekly data
var api_calls_points = stat_data.api_calls_weekly;
var bandwidth_points = stat_data.bandwidth_weekly;
for(var i=0; i<api_calls_points.length; i++) {
graph2_ticks.push([7-i, weekdayNames[(weekday+7-i)%7]]);
api_calls_weekly.push([i, api_calls_points[i]]);
bandwidth_weekly.push([i, bandwidth_points[i]]);
}
...
//building yearly data
var api_calls_points = stat_data.api_calls_yearly;
var bandwidth_points = stat_data.bandwidth_yearly;
for(var i=0; i<api_calls_points.length; i++) {
graph4_ticks.push([12-i, shortMonthNames[(month+12-i)%12]]);
api_calls_yearly.push([i, api_calls_points[i]]);
bandwidth_yearly.push([i, bandwidth_points[i]]);
}

25. And now to the main
part...
var options2 = {
legend: {
position: "ne",
container: $("#graph2_legend")
}, xaxis: {
ticks: graph2_ticks
}, yaxis: {
min: 0,
tickDecimals: 0 //only whole numbers
}, grid: { hoverable: true }
};
xaxis: { //in case of time axis
mode: "time",
timeformat: "%H:%M"
},

26. And now to the main
part...
var usage_plot2 = $.plot($("#graph2"), [
{
data: api_calls_weekly,
label: "API calls",
lines: { show: true }
},
{
label: "Bandwidth (KB)",
data: bandwidth_weekly,
lines: { show: true }
},
], options2);

27. Till now...

28. What if I want to
select a graph?

29. Graph Select
$('.legendColorBox').parent().click(function() {
var plot = usage_plot1;
var data = [api_calls_daily, bandwidth_daily];
var graph = $(this).parent().parent().parent().attr("id").split("_")[0];
if (graph == "graph2") {
plot = usage_plot2;
data = [api_calls_weekly, bandwidth_weekly];
}
...
if ($(this).children().text() == "API calls”) {
plot.setData(get_plot_data([data[0], null, "lines", [], null, "lines"]));
}
if ($(this).children().text() == "Bandwidth (KB)") {
plot.setData(get_plot_data([[], null, "lines", data[1], null, "lines"]));
}
plot.draw();
...

30. Graph Select
var ticks = [graph2_ticks, graph3_ticks, graph4_ticks];
if ($(this).siblings().text().search("Show all") == -1) {
$('<tr/>', {
style: 'cursor: auto;'
}).bind('click', {plot: plot, data: data, ticks: ticks, now: now},
show_all_usage_graphs)
.append("<td class='legendColorBox'></td><td>Show all</td>").appendTo($
(this).parent());
}
});
function show_all_usage_graphs(e) {
e.data.plot.setData(get_plot_data([e.data.data[0], null, "lines",
e.data.data[1], null, "lines"]));
e.data.plot.draw();
$(this).remove();
}

31. Till now...

32. What about
tooltips?
I could take them from a lot of places. For
example: http://jquerytools.org/

33. I decided to do it
myself

34. Tooltips
function add_usage_tooltips(now, ticks) {
for (var i=1; i<=4; i++) {
...
$("#graph" + i).bind("plothover", function (event, pos, item) {
draw_tooltip(item, tick, now);
});
}
}
function draw_tooltip(item, ticks, now) {
...
var tooltip = get_tooltip_message(item, ticks, now);
showChartTooltip(tooltip, item);
...
}

35. Tooltips
function showChartTooltip(contents, item) {
...
$("<div id='charttooltip'>" + contents + "</div>").css(
{
position: 'absolute',
display: 'none',
top: item.pageY + 5,
left: item.pageX + 5,
border: '1px solid #bfbfbf',
padding: '2px',
'background-color': item.series.color,
opacity: 1
}).appendTo("body").fadeIn(200);
...
}

36. Till now...

37. How can I make
bars?
$.plot($("#graph2"), [
{
data: api_calls_weekly,
label: "Clients API hourly",
bars: { show: true } //instead of: lines: { show: true }
},
...
], options2);

38. By the way tooltips
on bars looks
good...

39. For charts you
should add:
<script type="text/javascript" src="...jquery.flot.pie.min.js"></script>

40. Charts
var options = {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3/4,
formatter: function(label, series){
return '<div style="font-size:12pt;text-
align:center;padding:2px;color:black;">'+label+'<br/>'+Math.round(series.percent)+'%</
div>'; }, background: { opacity: 0.5 }
}
}
}
};
$.plot($("#countries_piechart"), data, options);

41. One last thing...
JQuery BlockUI Plugin:
http://jquery.malsup.com/block/

42. BlockUI
<script type="text/javascript" src="...jquery.blockUI.js"></script>
$(function () {
...
var message = '<img src=".../loader.gif" /> Please wait...';
$("#usage_tabs").block({ message: message });
...
get_usage_statistics();
...
}
function get_usage_statistics() {
$.get('.../get_statistics_usage_data', {}, function(data){
...
$("#usage_tabs").unblock();
});
}

43. BlockUI

44. Questions?
alexarsh5@gmail.com
http://twitter.com/alexarsh
http://www.linkedin.com/pub