Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,895 views

Published on

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

×