Add a timeline view to about:net-internals.

chrome/browser/resources/net_internals/timeline_graph_view.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * A TimelineGraphView displays a timeline graph on a canvas element.
+ */
+var TimelineGraphView = (function() {
+  'use strict';
+  // We inherit from DivView.

[eroman, 2011/11/16 04:03:46]

comment out of sync with reality.

[mmenke, 2011/11/16 18:39:35]

Done, though never really cared much for reality.

+  var superClass = TopMidBottomView;
+
+  // Default surrent scale factor, in terms of milliseconds per pixel.

[eroman, 2011/11/16 04:03:46]

"surrent" ?

[mmenke, 2011/11/16 18:39:35]

Done.  Too much comment copy+pasting.

+  var DEFAULT_SCALE = 1000;
+
+  // Vertical spacing between labels, and between the graph and labels.
+  var LABEL_VERTICAL_SPACING = 4;
+  // Horizontal spacing between vertically placed labels and the edges of the
+  // graph.
+  var LABEL_HORIZONTAL_SPACING = 3;
+  // Horizintal space between two horitonally placed labels along the bottom

[eroman, 2011/11/16 04:03:46]

typo horizontal

[mmenke, 2011/11/16 18:39:35]

Done.

+  // of the graph.
+  var LABEL_LABEL_HORIZONTAL_SPACING = 25;
+
+  // Length of ticks, in pixels, next to y-axis labels.  The x-axis only has
+  // one set of labels, so it can use lines instead.
+  var Y_AXIS_TICK_LENGTH = 10;
+
+  // Amount we zoom for one vertical tick of the mouse wheel, as a ratio.
+  var MOUSE_WHEEL_ZOOM_RATE = 1.25;
+  // Amount we scroll for one horizontal tick of the mouse wheel, in pixels.
+  var MOUSE_WHEEL_SCROLL_RATE = 120;
+  // Number of pixels to scroll per pixel the mouse is dragged.
+  var MOUSE_WHEEL_DRAG_RATE = 3;
+
+  var GRID_COLOR = '#CCC';
+  var TEXT_COLOR = '#000';
+  var BACKGROUND_COLOR = '#FFF';
+
+  // Which side of the canvas y-axis labels should go on, for a given Graph.
+  // TODO(mmenke):  Figure out a reasonable way to handle more than 2 sets
+  //                of labels.
+  var LabelAlign = {
+    LEFT: 0,
+    RIGHT: 1
+  };
+
+  /**
+   * @constructor
+   */
+  function TimelineGraphView(divId, canvasId, scrollbarId, scrollbarInnerId) {
+    this.scrollbar_ = new HorizontalScrollbarView(scrollbarId,
+                                                  scrollbarInnerId,
+                                                  this.onScroll_.bind(this));
+    // Call superclass's constructor.
+    superClass.call(this, null, new DivView(divId), this.scrollbar_);
+
+    this.graphDiv_ = $(divId);
+    this.canvas_ = $(canvasId);
+    this.canvas_.onmousewheel = this.onMouseWheel_.bind(this);
+    this.canvas_.onmousedown = this.onMouseDown_.bind(this);
+    this.canvas_.onmousemove = this.onMouseMove_.bind(this);
+    this.canvas_.onmouseup = this.onMouseUp_.bind(this);
+    this.canvas_.onmouseout = this.onMouseUp_.bind(this);
+
+    // Used for click and drag scrolling of graph.  Drag-zooming not supported,
+    // for a more stable scrolling experience.
+    this.isDragging_ = false;
+    this.dragX_ = 0;
+
+    // Set the range and scale of the graph.  Times are in milliseconds since
+    // the Unix epoch.
+
+    // All measurements we have must be after this time.
+    this.startTime_ = 0;
+    // The current rightmost position of the graph is always at most this.
+    // We may have some later events.  Only updated on a timer, after the
+    // first update.
+    this.endTime_ = 1;
+
+    // Current scale, in terms of milliseconds per pixel.  Each column of
+    // pixels represents a point in time |scale_| milliseconds after the
+    // previous one.  We only display times that are of the form
+    // |startTime_| + K * |scale_|, to avoid jittering, and the rightmost
+    // pixel that we can display has a time <= |endTime_|.  Non-integer values
+    // are allowed.
+    this.scale_ = DEFAULT_SCALE;
+
+    this.graphs_ = [];
+
+    // Initialize the scrollbar.
+    this.updateScrollbarRange_(true);
+  }
+
+  // Smallest allowed scaling factor.
+  TimelineGraphView.MIN_SCALE = 5;
+
+  TimelineGraphView.prototype = {
+    // Inherit the superclass's methods.
+    __proto__: superClass.prototype,
+
+    setGeometry: function(left, top, width, height) {
+      superClass.prototype.setGeometry.call(this, left, top, width, height);
+
+      // The size of the canvas can only be set by using its |width| and
+      // |height| properties, which do not take padding into account, so we
+      // need to use them ourselves.
+      var style = getComputedStyle(this.canvas_);
+      var horizontalPadding = parseInt(style.paddingRight)
+                                  + parseInt(style.paddingLeft);

[eroman, 2011/11/16 04:03:46]

nit: I recommend putting the + on the preceding line, since I am always afraid
of javscript's auto-semicolon nonsense now.

(To see what I mean, check out:
https://plus.sandbox.google.com/u/0/113677733573072861809/posts/evoSCXjGYYB)

[mmenke, 2011/11/16 18:39:35]

Done.  That's what I normally do, but switched since I think it just looks wrong
with minuses.  Your reasoning wins out, though.  Also, the lines with the
wrapping minuses have since been refactored out of existence, anyways.

+      var verticalPadding = parseInt(style.paddingTop)
+                                + parseInt(style.paddingBottom);
+      var width = parseInt(this.graphDiv_.style.width) - horizontalPadding;
+      // For unknown reasons, there's an extra 3 pixels border between the
+      // bottom of the canvas and the bottom margin of the enclosing div.
+      var height = parseInt(this.graphDiv_.style.height) - verticalPadding - 3;
+
+      // Protect against degenerates.
+      if (width < 10)
+        width = 10;
+      if (height < 10)
+        height = 10;
+
+      this.canvas_.width = width;
+      this.canvas_.height = height;
+
+      // Use the same font style for the canvas as we use elsewhere.
+      // Has to be updated every resize.
+      this.canvas_.getContext("2d").font = getComputedStyle(this.canvas_).font;

[eroman, 2011/11/16 04:03:46]

nit: '2d' for consistency with the other strings.

.. Sorry, I couldn't resist :-)

I feel like I need to be writing _some_ comments for this monster change, so if
it isn't going to be about the substance, it may as well be inconsequential
style nits.

[mmenke, 2011/11/16 18:39:35]

Done.  I don't mind, I know the feeling.

+
+      this.updateScrollbarRange_(false);
+      this.repaint();
+    },
+
+    show: function(isVisible) {
+      superClass.prototype.show.call(this, isVisible);
+      if (isVisible)
+        this.repaint();
+    },
+
+    // Returns the total length of the graph, in pixels.
+    getLength_ : function() {
+      var timeRange = this.endTime_ - this.startTime_;
+      // Math.floor is used to ignore the last partial area, of length less
+      // than |scale_|.
+      return Math.floor(timeRange / this.scale_);
+    },
+
+    /**
+     * Update the range of the scrollbar.  If |resetPosition| is true, also
+     * sets the slider to point at the rightmost position and triggers a
+     * repaint.
+     */
+    updateScrollbarRange_: function(resetPosition) {
+      var scrollbarRange = this.getLength_() - this.canvas_.width;
+      if (scrollbarRange < 0)
+        scrollbarRange = 0;
+
+      // If we've decreased the range to less than the current scroll position,
+      // we need to move the scroll position.
+      if (this.scrollbar_.getPosition() > scrollbarRange)
+        resetPosition = true;
+
+      this.scrollbar_.setRange(scrollbarRange);
+      if (resetPosition) {
+        this.scrollbar_.setPosition(scrollbarRange);
+        this.repaint();
+      }
+    },
+
+    /**
+     * Sets the date range displayed on the graph, sets the default scale and
+     * moves the scrollbar all the way to the right.
+     */
+    setDateRange: function(startDate, endDate) {
+      this.startTime_ = startDate.getTime();
+      this.endTime_ = endDate.getTime();
+
+      // Safety check.
+      if (this.endTime_ <= this.startTime_)
+        this.startTime_ = this.endTime_ - 1;
+
+      this.scale_ = DEFAULT_SCALE;
+      this.updateScrollbarRange_(true);
+    },
+
+    /**
+     * Updates the end time at the right of the graph to be the current time.
+     * Specifically, updates the scrollbar's range, and if the scrollbar is
+     * all the way to the right, keeps it all the way to the right.  Otherwise,
+     * leaves the view as-is and doesn't redraw anything.
+     */
+    updateEndDate: function() {
+      this.endTime_ = (new Date()).getTime();

[eroman, 2011/11/16 04:03:46]

I wander if we have a helper function for this, seem like a common idiom.

[mmenke, 2011/11/16 18:39:35]

Sounds good to me.  I've added timeutil.getCurrentTime().  Amausingly, it's
longer than inlining it everywhere, but it is clearer.

+      var updateScrollbarPosition =
+          this.scrollbar_.getPosition() == this.scrollbar_.getRange();
+      this.updateScrollbarRange_(updateScrollbarPosition);
+    },
+
+    /**
+     * Scrolls the graph horizontally by the specified amount.
+     */
+    horizontalScroll_: function(delta) {
+      var newPosition = this.scrollbar_.getPosition() + Math.round(delta);
+      // Make sure the new position is in the right range.
+      if (newPosition < 0) {
+        newPosition = 0;
+      } else if (newPosition > this.scrollbar_.getRange()) {
+        newPosition = this.scrollbar_.getRange();
+      }
+
+      if (this.scrollbar_.getPosition() == newPosition)
+        return;
+      this.scrollbar_.setPosition(newPosition);
+      this.onScroll_();
+    },
+
+    /**
+     * Zooms the graph by the specified amount.
+     */
+    zoom_: function(ratio) {
+      var oldScale = this.scale_;
+      this.scale_ *= ratio;
+      if (this.scale_ < TimelineGraphView.MIN_SCALE)
+        this.scale_ = TimelineGraphView.MIN_SCALE;
+
+      if (this.scale_ == oldScale)
+        return;
+
+      // If we were at the end of the range before, remain at the end of the
+      // range.
+      if (this.scrollbar_.getPosition() == this.scrollbar_.getRange()) {
+        // This will also take care of the repaint.
+        this.updateScrollbarRange_(true);
+        return;
+      }
+
+      // Otherwise, do our best to maintain the old position.  We use the
+      // position at the far right of the graph for consistency.
+      var oldMaxTime =
+          oldScale * (this.scrollbar_.getPosition() + this.canvas_.width);
+      var newMaxTime = Math.round(oldMaxTime / this.scale_);
+      var newPosition = newMaxTime - this.canvas_.width;
+
+      // Update range and scroll position.
+      this.updateScrollbarRange_(false);
+      this.horizontalScroll_(newPosition - this.scrollbar_.getPosition());
+      this.repaint();
+    },
+
+    onMouseWheel_: function(event) {
+      event.preventDefault();
+      this.horizontalScroll_(
+          MOUSE_WHEEL_SCROLL_RATE * -event.wheelDeltaX / 120);

[eroman, 2011/11/16 04:03:46]

nit: I noticed the 120 constant in a couple places, is it worth extracting to a
variable?

[mmenke, 2011/11/16 18:39:35]

Done.

+      this.zoom_(Math.pow(MOUSE_WHEEL_ZOOM_RATE, -event.wheelDeltaY / 120));
+    },
+
+    onMouseDown_: function(event) {
+      event.preventDefault();
+      this.isDragging_ = true;
+      this.dragX_ = event.clientX;
+    },
+
+    onMouseMove_: function(event) {
+      if (!this.isDragging_)
+        return;
+      event.preventDefault();
+      this.horizontalScroll_(
+          MOUSE_WHEEL_DRAG_RATE * (event.clientX - this.dragX_));
+      this.dragX_ = event.clientX;
+    },
+
+    onMouseUp_: function(event) {
+      this.isDragging_ = false;
+    },
+
+    onScroll_: function() {
+      this.repaint();
+    },
+
+    /**
+     * Replaces the current DataSeries with |dataSeries|.
+     */
+    setDataSeries: function(dataSeries) {
+      // Simplest jsut to recreate the Graphs.

[eroman, 2011/11/16 04:03:46]

typo

[mmenke, 2011/11/16 18:39:35]

Done.

+      this.graphs_ = [];
+      this.graphs_[TimelineDataType.BYTES_PER_SECOND] =
+          new Graph(TimelineDataType.BYTES_PER_SECOND, LabelAlign.RIGHT);
+      this.graphs_[TimelineDataType.SOURCE_COUNT] =
+          new Graph(TimelineDataType.SOURCE_COUNT, LabelAlign.LEFT);
+      for (var i = 0; i < dataSeries.length; ++i)
+        this.graphs_[dataSeries[i].dataType()].addDataSeries(dataSeries[i]);
+
+      this.repaint();
+    },
+
+    /**
+     * Draws the graph on |canvas_|.
+     */
+    repaint: function() {
+      this.repaintTimerRunning_ = false;
+      if (!this.isVisible())
+        return;
+
+      var width = this.canvas_.width;
+      var height = this.canvas_.height;
+      var context = this.canvas_.getContext("2d");

[eroman, 2011/11/16 04:03:46]

'2d'

[mmenke, 2011/11/16 18:39:35]

Done.

+
+      // Clear the canvas.
+      context.fillStyle = BACKGROUND_COLOR;
+      context.fillRect(0, 0, width, height);
+
+      // Try to get font height.  Needed for layout.
+      var fontHeight = parseInt(context.font.match(/[0-9]+px/));

[eroman, 2011/11/16 04:03:46]

I don't quite understand this --> won't font.match() return an array?

Feels like there should be a capturing group involved, and then you want to
return the match[1] (first capturing group).

[mmenke, 2011/11/16 18:39:35]

You're right.  My code actually works, probably because ['10px'].toString() is
'10px', but that's just weird.  Fixed.

+      // Safety check, to aboid drawing anything too ugly.
+      if (isNaN(fontHeight) || fontHeight <= 0 ||
+          fontHeight * 4 > height || width < 50) {
+        return;
+      }
+
+      // Save current transformation matrix so we can restore it later.
+      context.save();
+
+      // The center of an HTML canvas pixel is technically at (0.5, 0.5).  This
+      // makes near straight lines look bad, due to anti-aliasing.  This
+      // translation reduces the problem a little.
+      context.translate(0.5, 0.5);
+
+      // Calculate list of time values.
+      var position = this.scrollbar_.getPosition();
+      // If the entire time range is being displayed, align the right edge of
+      // the graph to the end of the time range.
+      if (this.scrollbar_.getRange() == 0)
+        position = this.getLength_() - this.canvas_.width;
+      var visibleStartTime = this.startTime_ + position * this.scale_;
+
+      height -= fontHeight + LABEL_VERTICAL_SPACING;
+      this.drawTimeLabels(context, width, height, visibleStartTime);
+
+      // Draw outline of the main graph area.
+      context.strokeStyle = GRID_COLOR;
+      context.strokeRect(0, 0, width - 1, height - 1);
+
+      // Layout graphs and have them draw their tick marks.
+      for (var i = 0; i < this.graphs_.length; ++i) {
+        this.graphs_[i].layout(width, height, fontHeight, visibleStartTime,
+                               this.scale_);
+        this.graphs_[i].drawTicks(context);
+      }
+
+      // Draw the lines of all graphs, and then draw their labels.
+      for (var i = 0; i < this.graphs_.length; ++i)
+        this.graphs_[i].drawLines(context);
+      for (var i = 0; i < this.graphs_.length; ++i)
+        this.graphs_[i].drawLabels(context);
+
+      // Restore original transformation matrix.
+      context.restore();
+    },
+
+    /**
+     * Draw time labels below the graph.  Takes in start time as an argument
+     * since it may not be |startTime_|, when we're zoomed out so as to display
+     * the entire time range.
+     */
+    drawTimeLabels: function(context, width, height, startTime) {
+      var textHeight = height + LABEL_VERTICAL_SPACING;
+
+      // Text for a time string to use in determining how far apart
+      // to place text labels.
+      var sampleText = (new Date(startTime)).toLocaleTimeString();
+
+      // The desired spacing for text labels.
+      var targetSpacing = context.measureText(sampleText).width
+                              + LABEL_LABEL_HORIZONTAL_SPACING;

[eroman, 2011/11/16 04:03:46]

I recommend putting the plus on the preceding line.

[mmenke, 2011/11/16 18:39:35]

Done.

+
+      // The allowed time step values between adjacent labels.  Anything much
+      // over a couple minutes isn't terribly realistic, given how much memory
+      // we use, and how slow a lot of the net-internals code is.
+      var timeStepValues = [
+        1000,  // 1 second
+        1000 * 5,
+        1000 * 30,
+        1000 * 60,  // 1 minute
+        1000 * 60 * 5,
+        1000 * 60 * 30,
+        1000 * 60 * 60,  // 1 hour
+        1000 * 60 * 60 * 5
+      ];
+
+      // Find smallest time step value that gives us at least |targetSpacing|,
+      // if any.
+      var timeStep = null;
+      for (var i = 0; i < timeStepValues.length; ++i) {
+        if (timeStepValues[i] / this.scale_ >= targetSpacing) {
+          timeStep = timeStepValues[i];
+          break;
+        }
+      }
+
+      // If no such value, give up.
+      if (!timeStep)
+        return;
+
+      // Find the time for the first label.  This time is a perfect multiple of
+      // timeStep, because of how UTC times work.
+      var time = Math.ceil(startTime / timeStep) * timeStep;
+
+      context.textBaseline = 'top';
+      context.textAlign = 'center';
+      context.fillStyle = TEXT_COLOR;
+      context.strokeStyle = GRID_COLOR;
+
+      // Draw labels and vertical grid lines.
+      while (true) {
+        var x = Math.round((time - startTime) / this.scale_);
+        if (x >= width)
+          break;
+        var text = (new Date(time)).toLocaleTimeString();
+        context.fillText(text, x, textHeight);
+        context.beginPath();
+        context.lineTo(x, 0);
+        context.lineTo(x, height);
+        context.stroke();
+        time += timeStep;
+      }
+    }
+  };
+
+  /**
+   * A Graph is responsible for drawing all the TimelineDataSeries that use
+   * the same data type.  Graphs are responsible for scaling the values, laying
+   * out the labels, and drawing both the labels and the lines of its data
+   * series.
+   */
+  var Graph = (function() {
+    /**
+     * |dataType| is the DataType that will be shared by all its DataSeries.
+     * |labelAlign| is the LabelAlign value indicating whether the labels
+     * should be aligned to the right of left of the graph.
+     * @constructor
+     */
+    function Graph(dataType, labelAlign) {
+      this.dataType_ = dataType;
+      this.dataSeries_ = [];
+      this.labelAlign_ = labelAlign;
+
+      // Cached properties of the graph, set in layout.
+      this.width_ = 0;
+      this.height_ = 0;
+      this.fontHeight_ = 0;
+      this.startTime_ = 0;
+      this.scale_ = 0;
+
+      // At least the highest value in the displayed range of the graph.
+      // Used for scaling and setting labels.  Set in layoutLabels.
+      this.max_ = 0;
+
+      // Cached position of labels.  Set in layoutLabels.
+      this.labels_ = [];
+    }
+
+    /**
+     * A Label is the label at a particular position along the y-axis.
+     * @constructor
+     */
+    function Label(height, text) {
+      this.height = height;
+      this.text = text;
+    }
+
+    Graph.prototype = {
+      addDataSeries: function(dataSeries) {
+        this.dataSeries_.push(dataSeries);
+      },
+
+      /**
+       * Returns a list of all the values that should be displayed for a given
+       * data series, using the current graph layout.
+       */
+      getValues: function(dataSeries) {
+        if (!dataSeries.isVisible())
+          return null;
+        return dataSeries.getValues(this.startTime_, this.scale_, this.width_);
+      },
+
+      /**
+       * Updates the graph's layout.  In particular, both the max value and
+       * label positions are updated.  Must be called before calling any of the
+       * drawing functions.
+       */
+      layout: function(width, height, fontHeight, startTime, scale) {
+        this.width_ = width;
+        this.height_ = height;
+        this.fontHeight_ = fontHeight;
+        this.startTime_ = startTime;
+        this.scale_ = scale;
+
+        // Find largest value.
+        var max = 0;
+        for (var i = 0; i < this.dataSeries_.length; ++i) {
+          var values = this.getValues(this.dataSeries_[i]);
+          if (!values)
+            continue;
+          for (var j = 0; j < values.length; ++j) {
+            if (values[j] > max)
+              max = values[j];
+          }
+        }
+
+        this.layoutLabels_(max);
+      },
+
+      /**
+       * Lays out labels and sets |max_|, taking the time units into
+       * consideration.  |maxValue| is the actual maximum value, and
+       * |max_| will be set to the value of the largest label, which
+       * will be at least |maxValue|.
+       */
+      layoutLabels_: function(maxValue) {
+        if (this.dataType_ != TimelineDataType.BYTES_PER_SECOND) {
+          this.layoutLabelsBasic_(maxValue, 0);
+          return;
+        }
+
+        // Special handling for data rates.
+
+        // Find appropriate units to use.
+        var units = ['B/s', 'kB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s'];

[eroman, 2011/11/16 04:03:46]

hehe, somehow I don't think we'll ever be using the PB/s or TB/s labels.... ^.^

[mmenke, 2011/11/16 18:39:35]

I figure it's best to have to many than too few.  My idea of future-proofing is
go as high as is reasonable...Then tack on 3 orders of magnitude.

Though now that you mention it, since reads are generally no more than 32k, and
v8 has a memory limit of...what... 400MB?  800MB?  I think you may be right.  Of
course, if it weren't for the memory limit...  :)

+        // Units to use for labels.  0 is bytes, 1 is kilobytes, etc.
+        // We start with kilobytes, and work our way up.
+        var unit = 1;
+        // Update |maxValue| to be in the right units.
+        var maxValue = maxValue / 1024;
+        while (units[unit + 1] && maxValue >= 999) {
+          maxValue /= 1024;
+          ++unit;
+        }
+
+        // Calculate labels.
+        this.layoutLabelsBasic_(maxValue, 1);
+
+        // Append units to labels.
+        for (var i = 0; i < this.labels_.length; ++i)
+          this.labels_[i] += ' ' + units[unit];
+
+        // Convert |max_| back to bytes, so it can be used when scaling values
+        // for display.
+        this.max_ *= Math.pow(1024, unit);
+      },
+
+      /**
+       * Same as layoutLabels_, but ignores units.  |maxDecimalDigits| is the
+       * maximum number of decimal digits allowed.  The minimum allows
+       * difference between two adjacent labels is 10^-|maxDecimalDigits|.

[eroman, 2011/11/16 04:03:46]

something is wrong with this sentence.

[mmenke, 2011/11/16 18:39:35]

Done.

+       */
+      layoutLabelsBasic_: function(maxValue, maxDecimalDigits) {
+        this.labels_ = [];
+        // No labels if |max| is 0.
+        if (maxValue == 0) {
+          this.max_ = maxValue;
+          return;
+        }
+
+        // The maximum number of equally spaced labels allowed.  |fontHeight_|
+        // is doubled because the first and second labels both occur in the
+        // same gap.
+        var minLabelSpacing = 2 * this.fontHeight_ + LABEL_VERTICAL_SPACING;
+        var maxLabels = 1 + this.height_ / minLabelSpacing;
+        if (maxLabels < 2) {
+          maxLabels = 2;
+        } else if (maxLabels > 6) {
+          maxLabels = 6;
+        }
+
+        // Initial try for step size between conecutive labels.
+        var stepSize = Math.pow(10, -maxDecimalDigits);
+        // Number of digits to the right of the decimal of |stepSize|.
+        // Used for formating label strings.
+        var stepSizeDecimalDigits = maxDecimalDigits;
+
+        // Pick a reasonable step size.
+        while (true) {
+          if (Math.ceil(maxValue / stepSize) + 1 <= maxLabels)

[eroman, 2011/11/16 04:03:46]

I'll be honest, I've kinda tuned out here... (no action required)

[mmenke, 2011/11/16 18:39:35]

I've added some comments.  It's very uninteresting code.  You didn't miss much.

I'd really like to be able to combine the two places where I decide on label
step sizes, but because of the rounding here, and funky step sizes needed in the
other one, it may be more effort than it's worth.

+            break;
+          if (Math.ceil(maxValue / (stepSize * 2)) + 1 <= maxLabels) {
+            stepSize *= 2;
+            break;
+          }
+          if (Math.ceil(maxValue / (stepSize * 5)) + 1 <= maxLabels) {
+            stepSize *= 5;
+            break;
+          }
+          stepSize *= 10;
+          if (stepSizeDecimalDigits > 0)
+            --stepSizeDecimalDigits;
+        }
+
+        this.max_ = Math.ceil(maxValue / stepSize) * stepSize;
+
+        for (var label = this.max_; label >= 0; label -= stepSize)
+          this.labels_.push(label.toFixed(stepSizeDecimalDigits));
+      },
+
+      /**
+       * Draws tick marks for each of the labels in |labels_|.
+       */
+      drawTicks: function(context) {
+        var x1;
+        var x2;
+        if (this.labelAlign_ == LabelAlign.RIGHT) {
+          x1 = this.width_ - 1;
+          x2 = this.width_ - 1 - Y_AXIS_TICK_LENGTH;
+        } else {
+          x1 = 0;
+          x2 = Y_AXIS_TICK_LENGTH;
+        }
+
+        context.fillStyle = GRID_COLOR;
+        context.beginPath();
+        for (var i = 1; i < this.labels_.length - 1; ++i) {
+          // The rounding is needed to avoid ugly 2-pixel wide anti-aliased
+          // lines.
+          var y = Math.round(this.height_ * i / (this.labels_.length - 1));
+          context.moveTo(x1, y);
+          context.lineTo(x2, y);
+        }
+        context.stroke();
+      },
+
+      /**
+       * Draws a graph line for each of the data series.
+       */
+      drawLines: function(context) {
+        // Factor by which to scale all values to convert them to a number from
+        // 0 to height - 1.
+        var scale = 0;
+        var bottom = this.height_ - 1;
+        if (this.max_)
+          scale = bottom / this.max_;
+
+        // Draw in reverse order, so first data series are drawn on top of
+        // subsequent ones.
+        for (var i = this.dataSeries_.length - 1; i >= 0; --i) {
+          var values = this.getValues(this.dataSeries_[i]);
+          if (!values)
+            continue;
+          context.strokeStyle = this.dataSeries_[i].color();
+          context.beginPath();
+          for (var x = 0; x < values.length; ++x) {
+            // The rounding is needed to avoid ugly 2-pixel wide anti-aliased
+            // horizontal lines.
+            context.lineTo(x, bottom - Math.round(values[x] * scale));
+          }
+          context.stroke();
+        }
+      },
+
+      /**
+       * Draw labels in |labels_|.
+       */
+      drawLabels: function(context) {
+        if (this.labels_.length == 0)
+          return;
+        var x;
+        if (this.labelAlign_ == LabelAlign.RIGHT) {
+          x = this.width_ - LABEL_HORIZONTAL_SPACING;
+        } else {
+          // Find the width of the widest label.
+          var maxTextWidth = 0;
+          for (var i = 0; i < this.labels_.length; ++i) {
+            var textWidth = context.measureText(this.labels_[i]).width;
+            if (maxTextWidth < textWidth)
+              maxTextWidth = textWidth;
+          }
+          x = maxTextWidth + LABEL_HORIZONTAL_SPACING;
+        }
+
+        // Set up the context.
+        context.fillStyle = TEXT_COLOR;
+        context.textAlign = 'right';
+
+        // Draw top label, which is the only one that appears below its tick
+        // mark.
+        context.textBaseline = 'top';
+        context.fillText(this.labels_[0], x, 0);
+
+        // Draw all the other labels.
+        context.textBaseline = 'bottom';
+        var step = (this.height_ - 1) / (this.labels_.length - 1);
+        for (var i = 1; i < this.labels_.length; ++i)
+          context.fillText(this.labels_[i], x, step * i);
+      }
+    };
+
+    return Graph;
+  })();
+
+  return TimelineGraphView;
+})();