JQuery Flot by Arshavski Alexander
Charting librariesA lot of choices -http://my.opera.com/tagawa/blog/list-of-javascript-ch
Good list of       featureshttp://socialcompare.com/en/comparison/javascript-g
Should work  offline
Date-time axis
...
Flot works on:Firefox 2.x+Safari 3.0+Opera 9.5+Konqueror 4.x+Internet Explorer 6+ (the excanvasJavascript emulation helper...
A lot of plugins  and examplesPlugins -http://code.google.com/p/flot/wiki/PluginsBubble charts -https://github.com/ubermaj...
It’s not all pink and         rosy  Documentation sucks!
That’s why I’m here
What I want to do?
What I want to do?
What I want to do?
Imports<link type="text/css" href="...jquery-ui.css"><link type="text/css" href="...flot_layout.css" ><link type="text/css...
Radio buttons  <div id="radio">     <input type="radio" id="connections_radio" name="radio"checked="checked" /><label for=...
Tabs<div id="usage" style="display: none">  <div id="usage_tabs">      <ul>          <li><a href="#day_statistics">Day</a>...
Radio buttons$(function () {   $("#connections_radio").click(function(event) {      $("#connections").show();      $("#usa...
Tabs$(function () {   ...   $("#connections_tabs").tabs();   $("#usage_tabs").tabs();   $("#usage_distribution_tabs").tabs...
Till now...
As a  python guy it’s a  lot of code for    me already,  so it’sgonna be a   mess
Refactoring<script type="text/javascript" src="...statistics.js"></script>$(function () {   ...   get_connections_statisti...
And now to the main           part...  var weekdayNames = "Sunday Monday Tuesday Wednesday Thursday FridaySaturday".split(...
And now to the main         part...//building weekly datavar api_calls_points = stat_data.api_calls_weekly;var bandwidth_p...
And now to the main         part...var options2 = {   legend: {      position: "ne",      container: $("#graph2_legend")  ...
And now to the main         part...var usage_plot2 = $.plot($("#graph2"), [   {      data: api_calls_weekly,      label: "...
Till now...
What if I want toselect a graph?
Graph Select$(.legendColorBox).parent().click(function() {  var plot = usage_plot1;  var data = [api_calls_daily, bandwidt...
Graph Select     var ticks = [graph2_ticks, graph3_ticks, graph4_ticks];     if ($(this).siblings().text().search("Show al...
Till now...
What about        tooltips?I could take them from a lot of places. Forexample: http://jquerytools.org/
I decided to do it      myself
Tooltipsfunction add_usage_tooltips(now, ticks) {  for (var i=1; i<=4; i++) {     ...     $("#graph" + i).bind("plothover"...
Tooltipsfunction showChartTooltip(contents, item) {  ...  $("<div id=charttooltip>" + contents + "</div>").css(      {    ...
Till now...
How can I make                  bars?$.plot($("#graph2"), [   {       data: api_calls_weekly,       label: "Clients API ho...
By the way tooltips   on bars looks      good...
For charts you              should add:<script type="text/javascript" src="...jquery.flot.pie.min.js"></script>
Charts   var options = {      series: {        pie: {           show: true,           radius: 1,           label: {       ...
One last thing...JQuery BlockUI Plugin:http://jquery.malsup.com/block/
BlockUI<script type="text/javascript" src="...jquery.blockUI.js"></script>$(function () {  ...  var message = <img src=".....
BlockUI
Questions?     alexarsh5@gmail.com     http://twitter.com/alexarsh     http://www.linkedin.com/pub
JQuery Flot
Upcoming SlideShare
Loading in …5
×

JQuery Flot

10,835 views

Published on

2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
10,835
On SlideShare
0
From Embeds
0
Number of Embeds
833
Actions
Shares
0
Downloads
33
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

JQuery Flot

  1. 1. JQuery Flot by Arshavski Alexander
  2. 2. Charting librariesA lot of choices -http://my.opera.com/tagawa/blog/list-of-javascript-ch
  3. 3. Good list of featureshttp://socialcompare.com/en/comparison/javascript-g
  4. 4. Should work offline
  5. 5. Date-time axis
  6. 6. ...
  7. 7. Flot works on:Firefox 2.x+Safari 3.0+Opera 9.5+Konqueror 4.x+Internet Explorer 6+ (the excanvasJavascript emulation helper is used forIE < 9)
  8. 8. A lot of plugins and examplesPlugins -http://code.google.com/p/flot/wiki/PluginsBubble charts -https://github.com/ubermajestix/flot-pluginsUsage examples:http://code.google.com/p/flot/wiki/FlotUsage
  9. 9. It’s not all pink and rosy Documentation sucks!
  10. 10. That’s why I’m here
  11. 11. What I want to do?
  12. 12. What I want to do?
  13. 13. What I want to do?
  14. 14. 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>
  15. 15. 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" /><labelfor="usage_radio">Usage</label> <input type="radio" id="export_radio" name="radio" /><labelfor="export_radio">Export</label> </div>
  16. 16. 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>
  17. 17. 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(); });});
  18. 18. Tabs$(function () { ... $("#connections_tabs").tabs(); $("#usage_tabs").tabs(); $("#usage_distribution_tabs").tabs();});
  19. 19. Till now...
  20. 20. As a python guy it’s a lot of code for me already, so it’sgonna be a mess
  21. 21. 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" %}
  22. 22. And now to the main part... var weekdayNames = "Sunday Monday Tuesday Wednesday Thursday FridaySaturday".split(" "); var shortMonthNames = "Jan Feb Mar Apr May Jun Jul Aug Sep Oct NovDec".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(); ...
  23. 23. And now to the main part...//building weekly datavar 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 datavar 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]]);}
  24. 24. 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" },
  25. 25. 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);
  26. 26. Till now...
  27. 27. What if I want toselect a graph?
  28. 28. 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(); ...
  29. 29. 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(); }
  30. 30. Till now...
  31. 31. What about tooltips?I could take them from a lot of places. Forexample: http://jquerytools.org/
  32. 32. I decided to do it myself
  33. 33. Tooltipsfunction 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); ...}
  34. 34. Tooltipsfunction 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); ...}
  35. 35. Till now...
  36. 36. How can I make bars?$.plot($("#graph2"), [ { data: api_calls_weekly, label: "Clients API hourly", bars: { show: true } //instead of: lines: { show: true } }, ...], options2);
  37. 37. By the way tooltips on bars looks good...
  38. 38. For charts you should add:<script type="text/javascript" src="...jquery.flot.pie.min.js"></script>
  39. 39. 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);
  40. 40. One last thing...JQuery BlockUI Plugin:http://jquery.malsup.com/block/
  41. 41. 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(); });}
  42. 42. BlockUI
  43. 43. Questions? alexarsh5@gmail.com http://twitter.com/alexarsh http://www.linkedin.com/pub

×