flot + ruby

flot

<h1 style="text-align:center;"> Page Statistics </h1>
<div style="clear:both">
  <div style="float:left" id="stats">
    loading...
  </div>
  <div style="float:left; height:300px; width:10%" id="stats_legend">
    loading...
  </div>
</div>

<script>
$(function() {
	
	$("#stats").css('height', 300);
	$("#stats").css('width', "90%");
	var plot = $.plot(
	  $("#stats"), 
	  [<%= @page_durations.map {|page| "{ label: '#{page[:label]}', data: #{page[:data]} }" }.join(", ") %>],
	  {
	    
	    legend:{
	      container: $("#stats_legend")
	    },
	  }
	);
	
});
</script>