autograph 0.2.0 → 0.3.0

data/.gitignore

@@ -24,3 +24,5 @@ load_test*
 eapis*
 *.svg
 *.gemspec
+
+*.html

data/README.rdoc

@@ -4,11 +4,10 @@
 
 Autograph drives httperf, varying the request rate and graphing the output.  This exercise provides graphical data showing how the requested resources hold up under an increasing rate, particularly with request to response time and achieved request rate.
 
-Can work with SOAP.
-
 == NOTES:
 
-A note on stats, from Zed Shaw: http://zedshaw.com/essays/programmer_stats.html
+Start off with broad ranges and zero in on rate/call/connection limits
+Run from a server, not your laptop, you don't want to be limited by your internet connection.
 
 == PROBLEMS:
 
@@ -21,46 +20,6 @@ A note on stats, from Zed Shaw: http://zedshaw.com/essays/programmer_stats.html
 
   autograph --host example.com --low-rate 10 --high-rate 50 --rate-step 10 --output-file my_load_test.html
 
-== INSTALL:
-
-* Get httperf installed ('brew install httperf' if you've got homebrew installed)
-* Download project and run 'rake build install'
-
-  nick-stielaus-computer-3:autograph nick$ httperf -h
-  Usage: httperf [-hdvV] [--add-header S] [--burst-length N] [--client N/N]
-    [--close-with-reset] [--debug N] [--failure-status N]
-    [--help] [--hog] [--http-version S] [--max-connections N]
-    [--max-piped-calls N] [--method S] [--no-host-hdr]
-    [--num-calls N] [--num-conns N] [--period [d|u|e]T1[,T2]]
-    [--port N] [--print-reply [header|body]] [--print-request [header|body]]
-    [--rate X] [--recv-buffer N] [--retry-on-failure] [--send-buffer N]
-    [--server S] [--server-name S] [--session-cookies]
-    [--ssl] [--ssl-ciphers L] [--ssl-no-reuse]
-    [--think-timeout X] [--timeout X] [--uri S] [--verbose] [--version]
-    [--wlog y|n,file] [--wsess N,N,X] [--wsesslog N,X,file]
-    [--wset N,X]
-  nick-stielaus-computer-3:autograph nick$ autograph
-  Usage: autograph [options]
-          --host HOST                  The host to load test
-          --port PORT                  The port to load test
-          --uris PATH,PATH             A comma separated list of pages to cycle through
-          --output-file PATH           Specify the file to output to.
-          --output-dir PATH            Specify a directory to write output files to.
-          --notes NOTES                Notes to be written to the report.
-          --test                       Do not run benchmarks. Use test data to generate reports.
-  Httperf Knobs:
-          --timeout SECONDS            The length in seconds before a request is marked as errored
-          --num-call NUMCALLS          The number of calls to make for each connection in the test (defaults to one).
-          --num-conns NUMCONNS         The number of connections to make for each test
-          --low-rate LOWRATE           The starting rate
-          --high-rate HIGHRATE         The highest rate at which to perform a test
-          --rate-step RATESTEP         The ammount at which to increment the rate for each interation of the test
-          --wsesslog PATH              Path to the wsesslog file.
-  Common options:
-      -h, --help                       Displays this help info
-      -v, --verbose                    Verbose output
-
-
 == THANKS:
 
 Thanks to
@@ -80,7 +39,6 @@ http://www.hpl.hp.com/research/linux/httperf/
 
 == LICENSE:
 
-
 Autograph
 Copyright (c) 2009 Nick Stielau
 

data/Rakefile

@@ -10,10 +10,6 @@ begin
     gem.email = "nick.stielau@gmail.com"
     gem.homepage = "http://github.com/nstielau/autograph"
     gem.authors = ["Nick Stielau"]
-    gem.add_runtime_dependency 'builder',  '= 2.1.2'
-    gem.add_runtime_dependency 'ruport',  '= 1.6.3'
-    gem.add_runtime_dependency 'scruffy', '= 0.2.5'
-    gem.add_runtime_dependency 'gchart',  '= 1.0.0'
     # gem is a Gem::Specification... see http://www.rubygems.org/read/chapter/20 for additional settings
   end
   Jeweler::GemcutterTasks.new
@@ -30,7 +26,7 @@ end
 
 
 task :install_local do
-  `sudo gem install --local ./pkg/autograph-0.1.2.gem --no-ri --no-rdoc`
+  `sudo gem install --local ./pkg/$(ls ./pkg | head -1) --no-ri --no-rdoc`
 end
 
 task :test => :check_dependencies

data/TODO

@@ -1,32 +1,28 @@
-# Report for AVG says "Report for http://127.0.0.1Avg"
-# Skin report page
-# Compare two hosts
-# Config file?
+# Compare multiple hosts hosts
 
 # Deal with AcceptEncoding, add options
 
-# Factor out outputs types into a report_renderers dir
 # Control verbose output with a Logger, instead of just going to STDOUT
 
 # Don't include overview for one page...
-# Flag maxes
-# Set report overview y-axis to the max request rate
 
 # Pass-through httperf args
-# Pick output format
-# Pick graph types
-# take a txt file for the urls
 
-# Remove default timeout httperf option
+# Config file?
+# Take a txt file for the urls
+
+# Remove default timeout httperf option...(what happens if it is removed?)
 # Add interactive mode
-# Add badass testing server
 
-# JS for selecting right view after page refresh
+# Trap exit and write output to file? (Can you have two traps?)
 
-# Fix Graphs x=y!
+# Skinning
+  Improve table styles
 
-# --group graphs, or separate into different pages
+# Put real connection/timeout etc. values in discussion.
 
 
-# Trap exit and write output to file? (Can you have two traps?)
+# Docs
+  Add EC2 instructions
 
+# Add gh-pages with graphs

data/VERSION

@@ -1 +1 @@
-0.2.0
+0.3.0

data/bin/autograph

@@ -50,11 +50,6 @@ opt_parse_opts = OptionParser.new do |opts|
     command_parts << "--test"
   end
 
-  opts.on("--graph-renderer RENDERER", "The class to use as a graph renderer (#{BaseRenderer::AVAILABLE_GRAPH_RENDERERS.join(', ')}).") do |opt|
-    options['graph_renderer'] = opt
-    command_parts << "--graph-renderer '#{opt}'"
-  end
-
   opts.separator ""
   opts.separator "Httperf Knobs:"
 
@@ -93,11 +88,6 @@ opt_parse_opts = OptionParser.new do |opts|
     command_parts << "--rate-step #{opt}"
   end
 
-  # opts.on("--wlog PATH", String, "A file a ASCII nul terminated pages to cycle through") do |opt|
-  #   options['httperf_wlog'] = "y,#{opt}";
-  #   command_parts << "--wlog #{opt}"
-  # end
-
   opts.on("--wsesslog PATH", "Path to the wsesslog file.") do |opt|
     options['httperf_wsesslog'] = opt
     command_parts << "--wsesslog '#{opt}'"
@@ -150,5 +140,6 @@ end
 begin
   AutoPerf.new(options)
 rescue => e
-  abort(e.to_s)
+  abort(e.to_s) unless options["verbose"]
+  raise e
 end

data/lib/autograph.rb

@@ -2,15 +2,11 @@ $:.unshift(File.dirname(__FILE__)) unless $:.include?(File.dirname(__FILE__)) ||
 
 require 'rubygems'
 require 'optparse'
-require 'ruport'
 require 'pp'
 
 require 'autograph/autoperf'
+require 'autograph/configuration'
+require 'autograph/graph'
 require 'autograph/graph_series'
 require 'autograph/html_report'
-require 'autograph/configuration'
-
-require 'autograph/graph_renderers/base_renderer'
-require 'autograph/graph_renderers/gchart_renderer'
-require 'autograph/graph_renderers/scruffy_renderer'
-require 'autograph/graph_renderers/flot_renderer'
+require 'autograph/table'

data/lib/autograph/autoperf.rb

@@ -4,17 +4,32 @@ class AutoPerf
   def initialize(opts = {})
     conf = Configuration.new(opts)
 
-    puts configuration.pretty_print if opts['verbose']
-
     if conf['use_test_data']
-      conf['uris'] = ['/', '/page1', '/page2']
-      @reports = load_test_data(conf)
+      reports = load_test_data(conf)
     else
-      @reports = run_tests(conf)
+      reports = run_tests(conf)
     end
 
-    graphs = BaseRenderer.generate_graphs(@reports, conf)
-    HtmlReport.new(@reports, graphs, conf)
+    graphs = generate_graphs(reports, conf)
+    HtmlReport.new(reports, graphs, conf)
+  end
+
+  def generate_graphs(reports, configuration)
+    graphs = {}
+    graphs[:request_rate]     = Graph.new(:title => "Demanded vs. Achieved Request Rate (r/s)")
+    graphs[:response_time]    = Graph.new(:title => "Demanded Request Rate (r/s) vs. Response Time")
+    graphs[:max_request_rate] = Graph.new(:title => "Maximum Achieved Request Rate")
+
+    reports.each do |uri, report|
+      graphs[:request_rate].series  << GraphSeries.new(report.column('rate'), report.column('conn/s').map{|x| x.to_f}, "Request rate for '#{uri}'", uri)
+      graphs[:response_time].series << GraphSeries.new(report.column('rate'), report.column('reply time'), "Response time for '#{uri}'", uri)
+    end
+
+    reports.keys.each_with_index do |key, index|
+      graphs[:max_request_rate].series << GraphSeries.new([index], [reports[key].max('conn/s')], "Max Request Rate for '#{key}'")
+    end
+
+    graphs
   end
 
   def benchmark(conf)
@@ -51,7 +66,7 @@ class AutoPerf
   def vary_rate(uri, configuration)
     puts "Config is #{configuration.inspect}" if configuration['verbose']
     results = {}
-    report = Table(:column_names => COLUMN_NAMES)
+    report = Table.new(COLUMN_NAMES)
 
     (configuration['low_rate']..configuration['high_rate']).step(configuration['rate_step']) do |rate|
       results[rate] = benchmark(configuration.merge({'httperf_rate' => rate, 'httperf_uri' => uri}))
@@ -69,35 +84,25 @@ class AutoPerf
     configuration['uris'].uniq.each do |uri|
       reports[uri] = vary_rate(uri, configuration)
     end
-
-    # TODO: Factor out to create_httperf_wlog
-    if !configuration['httperf_wlog'] && configuration['uris'].length > 1 && configuration['average']
-      replay_log = File.open('tmp_replay_log', 'w')
-      path = replay_log.path
-      puts "Tmp replay log is at #{path}" if configuration['verbose']
-      index = 1
-      configuration['uris'].each do |uri|
-        replay_log.print uri
-        replay_log.putc 0 if index < configuration['uris'].length # ASCII NUL Terminate join paths
-        index = index + 1
-      end
-      replay_log.close
-      puts "Replay log is at #{path}" if configuration['verbose']
-      reports["Avg"] = vary_rate('httperf_wlog' => "y,#{path}")
-    end
     reports
   end
 
   def load_test_data(configuration)
     reports = {}
+    configuration['host'] = "127.0.0.1"
+    configuration['uris'] = ['/', '/page1', '/page2']
     configuration['uris'].each do |uri|
-      reports[uri] = ::Ruport::Data::Table.new(:column_names => COLUMN_NAMES)
+      reports[uri] = Table.new(COLUMN_NAMES)
       times = [130.7, 132.7, 180.4, 438.3, 591.9, 686.9, 739.4, 661.3, 727.1, 546.5, 711.1, 893.7, 870.0]
       conns = [5.0, 21.5, 28.8, 30.6, 26.3, 24.7, 23.0, 25.8, 28.0, 27.4, 27.9, 22.2, 22.7]
       1.upto(10) do |i|
         reports[uri] << {'rate' => i*10 - 10,
-                         'conn/s' => conns[i % conns.length],
-                         'reply time' => times[i % times.length]}
+                         'errors' => 0,
+                         'conn/s' => conns[((i + rand * 10) % conns.length).to_i],
+                         'req/s' => 0,
+                         'replies/s avg' => 0,
+                         'net io (KB/s)' => 100,
+                         'reply time' => times[((i + rand * 10) % times.length).to_i]}
       end
     end
     reports

data/lib/autograph/configuration.rb

@@ -1,6 +1,6 @@
 class Configuration
   def initialize(opts={})
-    @conf = {'httperf_timeout' => 20,
+    @conf = {'httperf_timeout' => 120,
              'httperf_num-call'  => 1,
              'httperf_num-conns' => 100,
              'httperf_rate' => 5,
@@ -29,6 +29,8 @@ class Configuration
       # TODO: Add AcceptEncoding: gzip,deflate option
     end
 
+    puts pretty_print if opts['verbose']
+
     @conf
   end
 
@@ -56,12 +58,4 @@ class Configuration
     io.puts
     io.read
   end
-
-  def graph_renderer_class
-    begin
-      Object.const_get(@conf['graph_renderer'].to_s)
-    rescue => e
-      abort("#{@conf['graph_renderer'].to_s} is not one of the available graph renderers (#{BaseRenderer::AVAILABLE_GRAPH_RENDERERS.join(', ')})")
-    end
-  end
 end

data/lib/autograph/graph.rb

@@ -0,0 +1,9 @@
+class Graph
+  attr :title, true
+  attr :series
+
+  def initialize(options={})
+    @title = options[:title]
+    @series = []
+  end
+end

data/lib/autograph/graph_series.rb

@@ -2,11 +2,9 @@ class GraphSeries
   attr :x_values, true
   attr :y_values, true
   attr :label, true
-  attr :type, true
   attr :path, true
-  
-  def initialize(t, xs, ys, l, p=nil)
-    @type = t
+
+  def initialize(xs, ys, l, p=nil)
     @x_values = xs.map{|x| x.to_f}
     @y_values = ys.map{|x| x.to_f}
     @label = l

data/lib/autograph/html_report.rb

@@ -4,12 +4,9 @@ class HtmlReport
   def initialize(reports, graphs, configuration)
     date = Time.now
     host = configuration['host']
-    title = "Report for #{host}"
     uris = configuration['uris']
     command_run = configuration["command_run"]
     notes = configuration["notes"]
-    summary_graph = graphs['summary_graph']
-    graph_header_html = configuration.graph_renderer_class.header_html
 
     output_file = HtmlReport.determine_output_file(configuration['output_file'], configuration['output_dir'])
 

data/lib/autograph/report.html.erb

@@ -1,175 +1,260 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-        "http://www.w3.org/TR/html4/strict.dtd">
-<html lang="en">
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title><%= title %></title>
-  <%=  graph_header_html %>
-  <style type="text/css">
-  body,
-  html {
-    margin:0;
-    padding:0;
-    color:#000;
-  }
-  body {
-    min-width:950px;
-  }
-  #wrap {
-    margin:0 auto;
-    width:950px;
-  }
-  #header h1 {
-      padding:5px;
-      margin:0;
-      text-align: center;
-    }
-  #header h3 {
-    margin: 0;
-  }
-  #nav {
-
-    padding:5px;
-  }
-  #nav ul{
-    margin:0;
-    padding:0;
-    list-style:none;
-  }
-  #nav li{
-    display:inline;
-    margin:0;
-    padding:0;
-  }
-  #main {
-    float:right;
-    width:700px;
-  }
-  #main h2, #main h3, #main p {
-    padding:0 10px;
-    }
-  #sidebar {
-    float:left;
-    width:240px;
-  }
-  #sidebar ul {
-    margin-bottom:0;
-    }
-  #sidebar h3, #sidebar p {
-  padding:0 10px 0 0;
-  }
-  #footer {
-    clear:both;
-  }
-  #footer p {
-    padding:5px;
-    margin:0;
+    <title>Autograph report for <%= host %></title>
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="http://nstielau.github.com/autograph/stylesheets/images/favicon.ico" />
+  <!--Stylesheets-->
+  <link href="http://nstielau.github.com/autograph/stylesheets/master.css" type="text/css" media="screen" rel="stylesheet" />
+  <!--[if lt IE 8]><link rel="stylesheet" type="text/css" media="screen" href="http://nstielau.github.com/autograph/stylesheets/ie.css" /><![endif]-->
+  <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="http://nstielau.github.com/autograph/stylesheets/ie6.css" /><![endif]-->
+  <script type="text/javascript" src="http://nstielau.github.com/autograph/js/jquery.js"></script>
+  <script type="text/javascript" src="http://nstielau.github.com/autograph/js/jquery.flot.js"></script>
+</head>
+<body>
+  <div id="wrapper">
+    <div id="header" class="clear">
+      <h1 id="title">Autograph report for <%= host %></h1>
+      <div id="description">
+        <h2>Created at <%= date %></h2>
+      </div><!--end description-->
+      <div id="nav">
+        <ul>
+        </ul>
+      </div><!--end nav-->
+    </div><!--end header-->
+    <div id="content" class="pad">
+    <div id="post">
+        <div id="main">
+          <div id="graphs" class="section section_graphs">
+          <% graphs.each_pair do |k,g| %>
+            <h2><%= g.title %></h2>
+            <div class="flot-graph" id="<%= k %>" style="width:600px;height:300px;padding-bottom: 25px;"></div>
+          <% end %>
+          </div>
+
+      <div id="graph_discussion" class="section section_discussion" style="display:none;">
+        <h2>Methods</h2>
+        <p>
+          Use <a href="http://www.hpl.hp.com/research/linux/httperf/">httperf</a> to load different pages a fixed number of times, at a fixed rate, and record the response time and rate at which connections are accepted.  By varying the rate, we can see how the response time and connection rate are effected by increased load on the server.  Unlike log analysis, which relies on extrapolation to guess at maximum requests/second, Autograph actually stresses the system and yields real-world results.
+        </p>
+        <h2>Goals</h2>
+        <p>
+          Autograph will help you
+          <ul style="list-style: disc; font-size: 1.3em; padding-left: 25px; padding-bottom: 25px;">
+            <li>Compare the relative 'weight' of different pages, hopefully pointing you to which pages need more some caching or other form of optimization.</li>
+            <li>Determine rough maximum request rates that either a) block other calls, or b) increase response time beyond an acceptable limit.</li>
+          </ul>
+        </p>
+        <h2>Graphs</h2>
+        <h4>Demanded vs. Achieved request rate</h4>
+        <p>
+        Ideally, this graph would be a straight line at 45 degrees; for every request that is sent to the server, it accepts a connection, regardless of how many concurrent requests are made.  Realistically, this graph will start linear and degrade as network or software bottlenecks are hit. The point at which this graph breaks linearity indicates the maximum possible concurrent requests the system can successfully serve.
+        </p>
+        <h4>Demanded Request Rate vs. response time</h4>
+        <p>
+        Ideally, this graph would be flat and low, indicating consistent and fast responses times.  Realistically, this graph will either be slightly angled or flat followed by a dramatic uptick.  The point at which the response times dramatically increase will coincide with the point at which it cannot serve all requests.
+        </p>
+      </div>
+      <div id="tables" class="section section_tables" style="display:none;">
+          <% reports.each do |uri, report| %>
+            <div id="page_<%= uri %>" class='report' >
+              <h2>Results for <%= "http://#{host}#{uri}" %></h2>
+              <div class="table_data" style="padding-bottom: 25px;">
+                <%= report.to_html %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div><!--end post-->
+  </div><!--end content-->
+  <div id="sidebar">
+    <ul>
+      <li class="widget widget_recent_entries">
+        <h2 class="widgettitle">Report Sections</h2>
+        <ul>
+          <li><a href="#" onclick="show_section('graphs');">Graphs</a></li>
+          <li><a href="#" onclick="show_section('tables');">Tables</a></li>
+          <li><a href="#" onclick="show_section('discussion');">Discussion</a></li>
+        </ul>
+      </li>
+      <li class="section section_graphs">
+        <h2 class="widgettitle">Tested Pages</h2>
+        <div id="choices"></div>
+      </li>
+      <% if notes %>
+        <li>
+          <h2>Report Notes</h2>
+          <p><%= notes %></p>
+        </li>
+      <% end %>
+    </ul>
+  </div><!--end sidebar-->
+    <div id="footer">
+      <p class="right">Generated fearlessly with <a href="http://nstielau.github.com/autograph">Autograph</a></p>
+      <p>Theme modified from "Vigilance Theme" by <a href="http://thethemefoundry.com">The Theme Foundry</a></p>
+    </div><!--end footer-->
+  </div><!--end wrapper-->
+    <script language="javascript" type="text/javascript">
+    function show_section(name) {
+      $('.section').hide();
+      $('.section_' + name).show();
     }
 
-  div.report {
-    background: #FFFFFF;
-  }
-  </style>
-  <script type="text/javascript"``>
-    function hide_reports() {
-      var reports = document.getElementsByClassName('report');
-      for (var i=0; i < reports.length; i++) {
-        reports[i].style.display = 'none';
+      var acolor;
+      var default_graph_options = {
+        series: {
+          lines: { show: true, lineWidth: 3 },
+          points: { show: true, radius: 4 }
+        },
+        legend: {
+          show: true,
+          backgroundColor: '#FFF',
+          backgroundOpacity: 0.9
+        },
+        series: {
+          lines: { show: true, lineWidth: 3 },
+          points: { show: true, fill: false },
+          shadowSize: 0,
+        },
+        xaxis: {},
+        yaxis: {
+          show: true,
+        },
+        grid: {
+          show: true,
+          backgroundColor: null,
+          borderWidth: 2,
+          hoverable: true,
+          tickColor: "#E1E8F0",
+        },
+        colors: ["#5bba47","#d86b6d","#3d8aea","#333333"]
+      };
+
+      // Callback function to show the tooltip
+      function showTooltip(item) {
+        var contents = "(" + item.datapoint[1] + "," + item.datapoint[0] + ")";
+        var x = item.pageX;
+        var y = item.pageY - 10;
+
+        var obj = $('<div id="flot-tooltip">' + contents + '</div>').css( {
+          padding: '5px',
+          position: 'absolute',
+          minWidth: '5em',
+          display: 'block',
+          top:  y+5,
+          left: x+5,
+          zIndex: 9999
+        });
+
+        obj.appendTo('body').fadeIn('200');
       }
-    }
 
-    function show_report(uri) {
-      hide_reports();
-      document.getElementById(uri).style.display = '';
-    }
+      // Var to hold our previous point
+      var previousPoint = null;
 
-    function uri_change_handler(uri) {
-      var page_select = document.getElementById('pages');
-      show_report(page_select.value);
-    }
-  </script>
+      // Bind to the plothover so we can show a tooltip
+      $(".flot-graph").bind("plothover", function (event, pos, item) {
+        if (item) {
+          if (previousPoint != item.datapoint) {
+            previousPoint = item.datapoint;
+            $("#flot-tooltip").remove();
+            showTooltip(item);
+          }
+        } else {
+          $('#flot-tooltip').remove().fadeOut('200');
+          previousPoint = null;
+        }
+      });
 
-</head>
-<body>
-<div id="wrap">
-  <div id="header">
-    <h1>Load testing report</h1>
-    <h3>Date: <%= date %></h3>
-    <h3>Host: <%= host %></h3>
-    <h3>Page:
-      <select id="pages" onchange="uri_change_handler()">
-        <option value='overview'>Overview</option>
-        <% uris.each do |uri|%>
-          <option value='page_<%= uri %>'><%=uri%></option>
-        <% end %>
-      </select>
-    </h3>
-
-  </div>
-  <div id="nav">
-
-  </div>
-  <div id="sidebar">
-    <div style="display:none">
-      <h3>Tested Pages</h3>
-      <ul>
-        <li><a href="#" onclick="show_report('overview');" title="Overview">Overview</a></li>
-        <% uris.each do |uri|%>
-        <li><a href="#" onclick="show_report('page_<%= uri %>');" title="<%= uri %>"><%= uri %></a></li>
-        <% end %>
-      </ul>
-    </div>
-    <% if notes %>
-      <h3>Report Notes</h3>
-      <p><%= notes %></p>
-    <% end %>
-    <h3>Info</h3>
-    <ul>
-      <li><a href="#" onclick="show_report('graph_discussion');" title="Discussion">Discussion</a></li>
-    </ul>
+      var request_rate_datasets = {
+  <%=
+    dataset_id=0;
+    data_string = graphs[:request_rate].series.map do |s|
+      points = []
+      s.x_values.each_with_index do |x,i|
+        points << "[#{s.x_values[i]}, #{s.y_values[i]}]"
+      end
+      "'#{dataset_id=dataset_id+1}' : {label:  \"#{s.label}\", data: [#{points.join(", ")}]}"
+    end.join(", \n")
+    # ideal_points = graphs[:request_rate].series[0].x_values.map{|x|"[#{x},#{x}]"}
+    # data_string + ",'#{dataset_id=dataset_id+1}' : {label:  \"Ideal\", data: [#{ideal_points.join(", ")}]}"
+    data_string
+  %>
+      };
 
-  </div>
-  <div id="main">
-    <h2>Report Detail</h2>
-
-<div id="overview" class='report'>
-  <%= summary_graph.to_html %>
-</div>
-
-<div id="graph_discussion" class='report' style="display:none;">
-Discussion on what these graphs mean.
-
-• Increase concurrent connections, and see at which point your app will no longer serve at the demanded request rate
-• Find which pages are heavier/lighter than others
-• Replay a log (with a little work)
-
-• Actually hits your app with load, doesn't just extrapolate out from a few data points
-• Start broad and zero in on connection limits
-• Run from a server, not your laptop
-</div>
-
-    <% reports.each do |uri, report| %>
-      <div id="page_<%= uri %>" class='report' style="display:none;">
-        <p>Report for <%= "http://#{host}#{uri}" %></p>
-        <% graphs[uri].each do |graph| %>
-          <%= graph.to_html %>
-        <% end %>
-<pre>
-<%= report.to_s %>
-</pre>
-      </div>
-    <% end %>
-  </div>
-  <div id="footer" align="center">
-    <p>Generated at <%= date %></p>
-    <div>
-    <p><a onclick="document.getElementById('command_container').style.display = 'block';">Show Command<a/></p>
-    <div id="command_container" style="display:none">
-      <pre><%= command_run %></pre>
-    </div>
-    </div>
-  </div>
-</div>
-</body>
-</html>
+      var response_time_datasets = {
+  <%=
+    dataset_id=0;
+    data_string = graphs[:response_time].series.map do |s|
+      points = []
+      s.x_values.each_with_index do |x,i|
+        points << "[#{s.x_values[i]}, #{s.y_values[i]}]"
+      end
+      "'#{dataset_id=dataset_id+1}' : {label:  \"#{s.label}\", data: [#{points.join(", ")}]}"
+    end.join(", \n")
+    data_string
+  %>
+      };
+
+          var max_request_rate_datasets = [
+      <%=
+        data_strings = []
+        data_string = graphs[:max_request_rate].series.each_with_index do |s, index|
+          data_strings << "{label:  \"#{s.label}\", data: [[#{index}, #{s.y_values[0]}]]}"
+        end
+        data_strings.join(", \n")
+      %>
+          ];
+
+      // hard-code color indices to prevent them from shifting as
+      // countries are turned on/off
+      var i = 0;
+      $.each(request_rate_datasets, function(key, val) {
+          val.color = i;
+          ++i;
+      });
+      i = 0;
+      $.each(response_time_datasets, function(key, val) {
+          val.color = i;
+          ++i;
+      });
+
+      // insert checkboxes
+      var choiceContainer = $("#choices");
+      $.each(request_rate_datasets, function(key, val) {
+          choiceContainer.append('<br/><input type="checkbox" name="' + key +
+                                 '" checked="checked" id="id' + key + '">' +
+                                 '<label style="font-size: 1.5em; padding-left: 10px;" for="id' + key + '">'
+                                  + val.label.replace("Request rate for ", "") + '</label>');
+      });
+      choiceContainer.find("input").click(plotAccordingToChoices);
 
+
+      function plotAccordingToChoices() {
+          var data1 = [];
+          var data2 = [];
+
+          choiceContainer.find("input:checked").each(function () {
+              var key = $(this).attr("name");
+              if (key && request_rate_datasets[key])
+                  data1.push(request_rate_datasets[key]);
+                if (key && response_time_datasets[key])
+                    data2.push(response_time_datasets[key]);
+          });
+
+          if (data1.length > 0)
+              $.plot($("#request_rate"), data1, default_graph_options);
+
+
+          if (data2.length > 0)
+              $.plot($("#response_time"), data2, default_graph_options);
+      }
+
+      plotAccordingToChoices();
+      $.plot($("#max_request_rate"), max_request_rate_datasets, $.merge({series: {lines: {show: false}, bars : {show: true}}}, default_graph_options));
+  </script>
+  </body>
+  </html>