| // Copyright (c) 2012 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 TopMidBottomView. |
| var superClass = TopMidBottomView; |
| |
| // Default starting scale factor, in terms of milliseconds per pixel. |
| var DEFAULT_SCALE = 1000; |
| |
| // Maximum number of labels placed vertically along the sides of the graph. |
| var MAX_VERTICAL_LABELS = 6; |
| |
| // 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 spacing between two horitonally placed labels along the bottom |
| // 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; |
| |
| // The number of units mouse wheel deltas increase for each tick of the |
| // wheel. |
| var MOUSE_WHEEL_UNITS_PER_CLICK = 120; |
| |
| // 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 = MOUSE_WHEEL_UNITS_PER_CLICK; |
| // 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. When actively capturing new events, it's |
| // updated on a timer. |
| 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); |
| var verticalPadding = parseInt(style.paddingTop) + |
| parseInt(style.paddingBottom); |
| var canvasWidth = |
| 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 canvasHeight = |
| parseInt(this.graphDiv_.style.height) - verticalPadding - 3; |
| |
| // Protect against degenerates. |
| if (canvasWidth < 10) |
| canvasWidth = 10; |
| if (canvasHeight < 10) |
| canvasHeight = 10; |
| |
| this.canvas_.width = canvasWidth; |
| this.canvas_.height = canvasHeight; |
| |
| // 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; |
| |
| this.updateScrollbarRange_(this.graphScrolledToRightEdge_()); |
| 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_); |
| }, |
| |
| /** |
| * Returns true if the graph is scrolled all the way to the right. |
| */ |
| graphScrolledToRightEdge_: function() { |
| return this.scrollbar_.getPosition() == this.scrollbar_.getRange(); |
| }, |
| |
| /** |
| * 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, switches to the default |
| * scale factor, 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_ = timeutil.getCurrentTime(); |
| this.updateScrollbarRange_(this.graphScrolledToRightEdge_()); |
| }, |
| |
| getStartDate: function() { |
| return new Date(this.startTime_); |
| }, |
| |
| /** |
| * 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.graphScrolledToRightEdge_()) { |
| 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()); |
| }, |
| |
| onMouseWheel_: function(event) { |
| event.preventDefault(); |
| this.horizontalScroll_( |
| MOUSE_WHEEL_SCROLL_RATE * |
| -event.wheelDeltaX / MOUSE_WHEEL_UNITS_PER_CLICK); |
| this.zoom_(Math.pow(MOUSE_WHEEL_ZOOM_RATE, |
| -event.wheelDeltaY / MOUSE_WHEEL_UNITS_PER_CLICK)); |
| }, |
| |
| 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 TimelineDataSeries with |dataSeries|. |
| */ |
| setDataSeries: function(dataSeries) { |
| // Simplest just to recreate the Graphs. |
| 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].getDataType()].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'); |
| |
| // Clear the canvas. |
| context.fillStyle = BACKGROUND_COLOR; |
| context.fillRect(0, 0, width, height); |
| |
| // Try to get font height in pixels. Needed for layout. |
| var fontHeightString = context.font.match(/([0-9]+)px/)[1]; |
| var fontHeight = parseInt(fontHeightString); |
| |
| // Safety check, to avoid drawing anything too ugly. |
| if (fontHeightString.length == 0 || 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); |
| |
| // Figure out what time values to display. |
| 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_; |
| |
| // Make space at the bottom of the graph for the time labels, and then |
| // draw the labels. |
| var textHeight = height; |
| height -= fontHeight + LABEL_VERTICAL_SPACING; |
| this.drawTimeLabels(context, width, height, textHeight, 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 displaying the entire |
| * time range. |
| */ |
| drawTimeLabels: function(context, width, height, textHeight, startTime) { |
| // 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; |
| |
| // 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 = 'bottom'; |
| 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 have |
| * the same data type. Graphs are responsible for scaling the values, laying |
| * out labels, and drawing both labels and lines for 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 text of equally spaced 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']; |
| // 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. |
| 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 allowed |
| * difference between two adjacent labels is 10^-|maxDecimalDigits|. |
| */ |
| layoutLabelsBasic_: function(maxValue, maxDecimalDigits) { |
| this.labels_ = []; |
| // No labels if |maxValue| is 0. |
| if (maxValue == 0) { |
| this.max_ = maxValue; |
| return; |
| } |
| |
| // The maximum number of equally spaced labels allowed. |fontHeight_| |
| // is doubled because the top two labels are both drawn in the same |
| // gap. |
| var minLabelSpacing = 2 * this.fontHeight_ + LABEL_VERTICAL_SPACING; |
| |
| // The + 1 is for the top label. |
| var maxLabels = 1 + this.height_ / minLabelSpacing; |
| if (maxLabels < 2) { |
| maxLabels = 2; |
| } else if (maxLabels > MAX_VERTICAL_LABELS) { |
| maxLabels = MAX_VERTICAL_LABELS; |
| } |
| |
| // 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 we use a step size of |stepSize| between labels, we'll need: |
| // |
| // Math.ceil(maxValue / stepSize) + 1 |
| // |
| // labels. The + 1 is because we need labels at both at 0 and at |
| // the top of the graph. |
| |
| // Check if we can use steps of size |stepSize|. |
| if (Math.ceil(maxValue / stepSize) + 1 <= maxLabels) |
| break; |
| // Check |stepSize| * 2. |
| if (Math.ceil(maxValue / (stepSize * 2)) + 1 <= maxLabels) { |
| stepSize *= 2; |
| break; |
| } |
| // Check |stepSize| * 5. |
| if (Math.ceil(maxValue / (stepSize * 5)) + 1 <= maxLabels) { |
| stepSize *= 5; |
| break; |
| } |
| stepSize *= 10; |
| if (stepSizeDecimalDigits > 0) |
| --stepSizeDecimalDigits; |
| } |
| |
| // Set the max so it's an exact multiple of the chosen step size. |
| this.max_ = Math.ceil(maxValue / stepSize) * stepSize; |
| |
| // Create labels. |
| 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 earlier 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].getColor(); |
| 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; |
| })(); |
