Reorders dygraph options, fixes tags.
authordsc <dsc@less.ly>
Mon, 27 Feb 2012 00:05:50 +0000 (16:05 -0800)
committerdsc <dsc@less.ly>
Mon, 27 Feb 2012 00:05:50 +0000 (16:05 -0800)
docs/graphs.md
docs/notes.md
docs/todo.md
lib/scaffold/view.co
msc/dygraph-options/data.yaml
www/css/colors.styl

index b3caea6..19b82b8 100644 (file)
@@ -1,8 +1,8 @@
-# graphs / metrics for the Feb. dealine
+# Graphs and Metrics for the March Dealine
 
-## done
+## Done
 
-## wanted
+## Wanted
 
 - traffic metrics
        - page views by language
@@ -11,9 +11,9 @@
        - ?
 
 - editor metrics       
-
+       
        NOTE: all the data files likely contain more raw information than can be displayed with simple line charts. For the Feb deadline it will probably be necessary to sum/average the data into a few descriptive 'totals'. The reason why I don't supply the already aggregated data is because we will be able to build more finegrained ways to explore the data without much effort.
-
+       
        - number of editors             
                - all editors (>1 edit) - [dropbox]/enwp/csv/Cohort_trends/Relative_age/More_than_1_edit/editors_RelativeAgeAllNamespaces.csv
                - active editors (>5 edits) - [dropbox]/enwp/csv/Cohort_trends/Relative_age/More_than_5_edits/editors_RelativeAgeAllNamespaces.csv
@@ -41,7 +41,7 @@
 
 
 
-## nice to have
+## Nice to Have
 
 
 
index 6a9ea45..c4746e5 100644 (file)
@@ -1,2 +1,10 @@
 # notes
 
+## Scaffold Forms
+
+- Type to form mappings:
+    - String, Integer, Float -> text
+    - Boolean -> checkbox
+    - Object, Array, Function -> textarea
+
+
index a016b47..723a801 100644 (file)
@@ -1,8 +1,9 @@
 # todo
 
-## notes
-
-## bugs
+- [graph options]
+    - special 'auto' value for width & height to fit to page-size
+        - non-lib option: redraw on page resize
+    - hide callbacks & handlers
 
 
 ## features
 - Dashboard
     - What datasets do we need?
     - How should they be laid out?
+- Outline all changed options
+
+
+
+
+## notes
+
+### UI Notes from Diederik (Future)
+
+- Relationships between datasets which can help inform rich UI responses (click on "Europe" and have it expand to the countries)
+- Legend by Default
+- value parsers for large numbers
+- easily create new graphs side-by-side
+- clear current graph
 
index 4bb31f0..b48e1f5 100644 (file)
@@ -22,7 +22,8 @@ BaseView = exports.BaseView = Backbone.View.extend do # {{{
     
     toTemplateLocals: ->
         json = {value:v} = @model.toJSON()
-        json.value = JSON.stringify v if _.isArray(v) or _.isObject(v)
+        if _.isArray(v) or _.isObject(v)
+            json.value = JSON.stringify v
         { $, _, op, @model, view:this } import json
     
     $template: (locals={}) ->
@@ -37,7 +38,7 @@ BaseView = exports.BaseView = Backbone.View.extend do # {{{
                 id    : outer.attr 'id'
                 class : outer.attr('class')
         
-        # @$parent = p if (p = @$el.parent()).length
+        
         this
     
     render: ->
index 9daa807..28edfbd 100644 (file)
 
--   name: width
-    type: Integer
-    default: 480
-    desc: Width, in pixels, of the chart. If the container div has been explicitly sized, this will be
-        ignored.
+-   name: title
     tags:
-    - overall display
+    - labels
+    - display
+    default: null
+    examples:
+    - border
+    - demo
+    - noise
+    - styled-chart-labels
+    - multi-scale
+    - range-selector
+    - temperature-sf-ny
+    type: String
+    desc: Text to display above the chart. You can supply any HTML for this value,
+        not just text. If you wish to style it using CSS, use the 'dygraph-label'
+        or 'dygraph-title' classes.
 
--   name: height
-    type: Integer
-    default: 320
-    desc: Height, in pixels, of the chart. If the container div has been explicitly sized, this will be
-        ignored.
+-   name: xlabel
     tags:
-    - overall display
+    - labels
+    - display
+    default: null
+    examples:
+    - border
+    - demo
+    - styled-chart-labels
+    - multi-scale
+    type: String
+    desc: Text to display below the chart's x-axis. You can supply any HTML for this
+        value, not just text. If you wish to style it using CSS, use the 'dygraph-label'
+        or 'dygraph-xlabel' classes.
 
--   name: file
+-   name: ylabel
+    tags:
+    - labels
+    - display
+    default: null
+    examples:
+    - border
+    - demo
+    - two-axes
+    - noise
+    - styled-chart-labels
+    - multi-scale
+    - range-selector
+    - temperature-sf-ny
+    - two-axes-vr
     type: String
+    desc: Text to display to the left of the chart's y-axis. You can supply any HTML
+        for this value, not just text. If you wish to style it using CSS, use the
+        'dygraph-label' or 'dygraph-ylabel' classes. The text will be rotated 90 degrees
+        by default, so CSS rules may behave in unintuitive ways. No additional space
+        is set aside for a y-axis label. If you need more space, increase the width
+        of the y-axis tick labels using the yAxisLabelWidth option. If you need a
+        wider div for the y-axis label, either style it that way with CSS (but remember
+        that it's rotated, so width is controlled by the 'height' property) or set
+        the yLabelWidth option.
+
+-   name: y2label
+    tags:
+    - labels
+    - display
     default: null
-    desc: Sets the data being displayed in the chart. This can only be set when calling updateOptions;
-        it cannot be set from the constructor. For a full description of valid data formats, see the Data
-        Formats page. String can be a URL of CSV or CSV, GViz DataTable or 2D Array.
+    examples:
+    - two-axes
+    - two-axes-vr
+    type: String
+    desc: Text to display to the right of the chart's secondary y-axis. This label
+        is only displayed if a secondary y-axis is present. See this test for an example
+        of how to do this. The comments for the 'ylabel' option generally apply here
+        as well. This label gets a 'dygraph-y2label' instead of a 'dygraph-ylabel'
+        class.
+
+-   name: titleHeight
     tags:
-    - data
+    - labels
+    - display
+    default: 18
     examples:
-    - drawing
-    - dygraph-many-points-benchmark
+    - styled-chart-labels
+    type: Integer
+    desc: Height of the chart title, in pixels. This also controls the default font
+        size of the title. If you style the title on your own, this controls how much
+        space is set aside above the chart for the title's div.
 
--   name: annotationClickHandler
-    type: function(annotation, point, dygraph, event)
-    default: null
-    desc: If provided, this function is called whenever the user clicks on an annotation.
+-   name: xLabelHeight
+    default: 18
     tags:
-    - annotations
-    - handler
+    - labels
+    - display
+    type: Integer
+    desc: Height of the x-axis label, in pixels. This also controls the default font
+        size of the x-axis label. If you style the label on your own, this controls
+        how much space is set aside below the chart for the x-axis label's div.
+
+-   name: yLabelWidth
+    default: 18
+    tags:
+    - labels
+    - display
+    type: Integer
+    desc: Width of the div which contains the y-axis label. Since the y-axis label
+        appears rotated 90 degrees, this actually affects the height of its div.
+
+-   name: connectSeparatedPoints
+    tags:
+    - lines
+    - data
+    - display
+    default: false
     examples:
-    - annotation
+    - connect-separated
+    - independent-series
+    type: Boolean
+    desc: Usually, when Dygraphs encounters a missing value in a data series, it interprets
+        this as a gap and draws it as such. If, instead, the missing values represents
+        an x-value for which only a different series has data, then you'll want to
+        connect the dots by setting this to true. To explicitly include a gap with
+        this option set, use a value of NaN.
 
--   name: annotationDblClickHandler
-    type: function(annotation, point, dygraph, event)
-    default: null
-    desc: If provided, this function is called whenever the user double-clicks on an annotation.
+-   name: drawPoints
     tags:
-    - annotations
-    - handler
+    - lines
+    - data
+    - display
+    default: false
     examples:
-    - annotation
+    - linear-regression-addseries
+    - draw-points
+    - dynamic-update
+    - independent-series
+    - interaction
+    - linear-regression-fractions
+    - linear-regression
+    - per-series
+    type: Boolean
+    desc: Draw a small dot at each point, in addition to a line going through the
+        point. This makes the individual data points easier to see, but can increase
+        visual clutter in the chart.
 
--   name: annotationMouseOutHandler
-    type: function(annotation, point, dygraph, event)
-    default: null
-    desc: If provided, this function is called whenever the user mouses out of an annotation.
+-   name: fillGraph
     tags:
-    - annotations
-    - handler
+    - lines
+    - data
+    - display
+    default: false
     examples:
-    - annotation
+    - fillGraph
+    - two-axes
+    - steps
+    type: Boolean
+    desc: Should the area underneath the graph be filled? This option is not compatible
+        with error bars.
 
--   name: annotationMouseOverHandler
-    type: function(annotation, point, dygraph, event)
-    default: null
-    desc: If provided, this function is called whenever the user mouses over an annotation.
+-   name: pointSize
     tags:
-    - annotations
-    - handler
+    - lines
+    - data
+    - display
+    default: 1
     examples:
-    - annotation
+    - per-series
+    type: Integer
+    desc: The size of the dot to draw on each point in pixels (see drawPoints). A
+        dot is always drawn when a point is "isolated", i.e. there is a missing point
+        on either side of it. This also controls the size of those dots.
 
--   name: displayAnnotations
+-   name: stackedGraph
+    tags:
+    - lines
+    - data
+    - display
+    default: false
+    examples:
+    - stacked
     type: Boolean
+    desc: If set, stack series on top of one another rather than drawing them independently.
+
+-   name: stepPlot
+    tags:
+    - lines
+    - data
+    - display
     default: false
-    desc: Only applies when Dygraphs is used as a GViz chart. Causes string columns following a data series
-        to be interpreted as annotations on points in that series. This is the same format used by Google's
-        AnnotatedTimeLine chart.
+    examples:
+    - avoidMinZero
+    - steps
+    - y-axis-formatter
+    type: Boolean
+    desc: When set, display the graph as a step plot instead of a line plot.
+
+-   name: strokePattern
     tags:
-    - annotations
+    - lines
+    - data
+    - display
+    default: null
     examples:
-    - annotation-gviz
+    - per-series
+    type: Array
+    desc: A custom pattern array where the even index is a draw and odd is a space
+        in pixels. If null then it draws a solid line. The array should have a even
+        length as any odd lengthed array could be expressed as a smaller even length
+        array.
+
+-   name: strokeWidth
+    tags:
+    - lines
+    - data
+    - display
+    default: 1
+    examples:
+    - linear-regression-addseries
+    - drawing
+    - grid_dot
+    - layout-options
+    - linear-regression-fractions
+    - linear-regression
+    - per-series
+    - unboxed-spark
+    - styled-chart-labels
+    type: Integer
+    desc: The width of the lines connecting data points. This can be used to increase
+        the contrast or some graphs.
+
+-   name: colorSaturation
+    default: 1.0
+    tags:
+    - color
+    - data
+    - display
+    type: Float (0.0 - 1.0)
+    desc: If colors is not specified, saturation of the automatically-generated data
+        series colors.
+
+-   name: colorValue
+    default: 1.0
+    tags:
+    - color
+    - data
+    - display
+    type: Float (0.0 - 1.0)
+    desc: If colors is not specified, value of the data series colors, as in hue/saturation/value.
+        (0.0-1.0, default 0.5)
+
+-   name: colors
+    tags:
+    - color
+    - data
+    - display
+    default: null
+    examples:
+    - century-scale
+    - color-visibility
+    - demo
+    - reverse-y-axis
+    - color-cycle
+    type: Array
+    desc: List of colors for the data series. These can be of the form "#AABBCC" or
+        "rgb(255,100,200)" or "yellow", etc. If not specified, equally-spaced points
+        around a color wheel are used.
 
 -   name: avoidMinZero
-    type: Boolean
-    default: false
-    desc: "When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value\
-        \ of zero is disabled. \nThis is particularly useful for data sets that contain many zero values,\
-        \ especially for step plots which may otherwise have lines not visible running along the bottom\
-        \ axis."
     tags:
     - axes
+    default: false
     examples:
     - avoidMinZero
+    type: Boolean
+    desc: "When set, the heuristic that fixes the Y axis at zero for a data set with\
+        \ the minimum Y value of zero is disabled. \nThis is particularly useful for\
+        \ data sets that contain many zero values, especially for step plots which\
+        \ may otherwise have lines not visible running along the bottom axis."
 
 -   name: axis
-    type: String or Object
-    default: null
-    desc: Set to either an object ({}) filled with options for this axis or to the name of an existing
-        data series with its own axis to re-use that axis. See tests for usage.
     tags:
     - axes
+    default: null
     examples:
     - two-axes
     - steps
     - two-axes-vr
     - value-axis-formatters
+    type: String or Object
+    desc: Set to either an object ({}) filled with options for this axis or to the
+        name of an existing data series with its own axis to re-use that axis. See
+        tests for usage.
 
 -   name: axisLabelColor
-    type: String
     default: black
-    desc: Color for x- and y-axis labels. This is a CSS color string.
     tags:
     - axes
+    - color
+    - labels
+    type: String
+    desc: Color for x- and y-axis labels. This is a CSS color string.
 
 -   name: axisLabelFontSize
-    type: Integer
     default: 14
-    desc: Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
     tags:
     - axes
+    - labels
+    type: Integer
+    desc: Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
 
 -   name: axisLabelFormatter
-    type: function(number or Date, granularity, opts, dygraph)
-    default: null
-    desc: Function to call to format the tick values that appear along an axis. This is usually set on
-        a per-axis basis. The first parameter is either a number (for a numeric axis) or a Date object
-        (for a date axis). The second argument specifies how fine-grained the axis is. For date axes,
-        this is a reference to the time granularity enumeration, defined in dygraph-tickers.js, e.g. Dygraph.WEEKLY.
-        opts is a function which provides access to various options on the dygraph, e.g. opts('labelsKMB').
     tags:
     - axes
+    - labels
+    default: null
     examples:
     - x-axis-formatter
     - y-axis-formatter
     - value-axis-formatters
+    type: function(number or Date, granularity, opts, dygraph)
+    desc: Function to call to format the tick values that appear along an axis. This
+        is usually set on a per-axis basis. The first parameter is either a number
+        (for a numeric axis) or a Date object (for a date axis). The second argument
+        specifies how fine-grained the axis is. For date axes, this is a reference
+        to the time granularity enumeration, defined in dygraph-tickers.js, e.g. Dygraph.WEEKLY.
+        opts is a function which provides access to various options on the dygraph,
+        e.g. opts('labelsKMB').
 
 -   name: axisLabelWidth
-    type: Integer
     default: 50
-    desc: Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also
-        controls
     tags:
     - axes
     - labels
+    type: Integer
+    desc: Width (in pixels) of the containing divs for x- and y-axis labels. For the
+        y-axis, this also controls
 
 -   name: axisLineColor
-    type: String
-    default: black
-    desc: Color of the x- and y-axis lines. Accepts any value which the HTML canvas strokeStyle attribute
-        understands, e.g. 'black' or 'rgb(0, 100, 255)'.
     tags:
     - axes
+    - color
+    default: black
     examples:
     - demo
+    type: String
+    desc: Color of the x- and y-axis lines. Accepts any value which the HTML canvas
+        strokeStyle attribute understands, e.g. 'black' or 'rgb(0, 100, 255)'.
 
 -   name: axisLineWidth
-    type: Float
     default: 0.3
-    desc: Thickness (in pixels) of the x- and y-axis lines.
     tags:
     - axes
+    type: Float
+    desc: Thickness (in pixels) of the x- and y-axis lines.
 
 -   name: axisTickSize
-    type: Number
     default: '3.0'
-    desc: The size of the line to display next to each tick mark on x- or y-axes.
-    tags:
-    - axes
-
--   name: dateWindow
-    type: Array of two Dates or numbers
-    default: null
-    desc: Initially zoom in on a section of the graph. Is of the form [earliest, latest], where earliest/latest
-        are milliseconds since epoch. If the data for the x-axis is numeric, the values in dateWindow
-        must also be numbers. By default, the full range of the input is shown.
     tags:
     - axes
-    examples:
-    - dateWindow
-    - drawing
-    - is-zoomed-ignore-programmatic-zoom
-    - link-interaction
-    - synchronize
-    - zoom
+    type: Number
+    desc: The size of the line to display next to each tick mark on x- or y-axes.
 
 -   name: drawXAxis
-    type: Boolean
-    default: true
-    desc: Whether to draw the x-axis. Setting this to false also prevents x-axis ticks from being drawn
-        and reclaims the space for the chart grid/lines.
     tags:
     - axes
+    - display
+    default: true
     examples:
     - unboxed-spark
+    type: Boolean
+    desc: Whether to draw the x-axis. Setting this to false also prevents x-axis ticks
+        from being drawn and reclaims the space for the chart grid/lines.
 
 -   name: drawYAxis
-    type: Boolean
-    default: true
-    desc: Whether to draw the y-axis. Setting this to false also prevents y-axis ticks from being drawn
-        and reclaims the space for the chart grid/lines.
     tags:
     - axes
+    - display
+    default: true
     examples:
     - drawing
     - unboxed-spark
+    type: Boolean
+    desc: Whether to draw the y-axis. Setting this to false also prevents y-axis ticks
+        from being drawn and reclaims the space for the chart grid/lines.
 
 -   name: includeZero
-    type: Boolean
-    default: false
-    desc: Usually, dygraphs will use the range of the data plus some padding to set the range of the y-axis.
-        If this option is set, the y-axis will always include zero, typically as the lowest value. This
-        can be used to avoid exaggerating the variance in the data
     tags:
     - axes
+    - display
+    default: false
     examples:
     - no-range
     - numeric-gviz
     - small-range-zero
+    type: Boolean
+    desc: Usually, dygraphs will use the range of the data plus some padding to set
+        the range of the y-axis. If this option is set, the y-axis will always include
+        zero, typically as the lowest value. This can be used to avoid exaggerating
+        the variance in the data
 
 -   name: logscale
-    type: Boolean
-    default: false
-    desc: When set for a y-axis, the graph shows that axis in log scale. Any values less than or equal
-        to zero are not displayed. Not compatible with showZero, and ignores connectSeparatedPoints. 
-        Also, showing log scale with valueRanges that are less than zero will result in an unviewable graph.
     tags:
     - axes
+    - display
+    default: false
     examples:
     - logscale
     - stock
-
--   name: panEdgeFraction
-    type: Float
-    default: null
-    desc: A value representing the farthest a graph may be panned, in percent of the display. For example,
-        a value of 0.1 means that the graph can only be panned 10% pased the edges of the displayed values.
-        null means no bounds.
-    tags:
-    - axes
-    - interactive elements
-    examples:
-    - zoom
+    type: Boolean
+    desc: When set for a y-axis, the graph shows that axis in log scale. Any values
+        less than or equal to zero are not displayed. Not compatible with showZero,
+        and ignores connectSeparatedPoints. Also, showing log scale with valueRanges
+        that are less than zero will result in an unviewable graph.
 
 -   name: pixelsPerLabel
-    type: Integer
-    default: null
-    desc: Number of pixels to require between each x- and y-label. Larger values will yield a sparser
-        axis with fewer ticks. This is set on a per-axis basis. By default, values are 60 (x-axis) or 30 (y-axes).
     tags:
     - axes
     - grid
-    examples:
-    - value-axis-formatters
-
--   name: ticker
-    type: "function(min, max, pixels, opts, dygraph, vals) -> [{v: ..., label: ...}, ...]"
-    default: null
-    desc: This lets you specify an arbitrary function to generate tick marks on an axis. The tick marks
-        are an array of (value, label) pairs. The built-in functions go to great lengths to choose good
-        tick marks so, if you set this option, you'll most likely want to call one of them and modify
-        the result. By default, uses Dygraph.dateTicker or Dygraph.numericTicks, but see
-        dygraph-tickers.js for an extensive discussion. This is set on a per-axis basis.
-    tags:
-    - axes
-
--   name: valueRange
-    type: Array of two numbers
+    - labels
     default: null
-    desc: Explicitly set the vertical range of the graph to [low, high]. This may be set on a per-axis
-        basis to define each y-axis separately. By default, the full range of the input is shown.
-    tags:
-    - axes
     examples:
-    - drawing
-    - dynamic-update
-    - is-zoomed-ignore-programmatic-zoom
-    - no-visibility
-    - reverse-y-axis
-    - synchronize
-    - zoom
-    - two-axes-vr
+    - value-axis-formatters
+    type: Integer
+    desc: Number of pixels to require between each x- and y-label. Larger values will
+        yield a sparser axis with fewer ticks. This is set on a per-axis basis. By
+        default, values are 60 (x-axis) or 30 (y-axes).
 
 -   name: xAxisHeight
-    type: Integer
     default: null
-    desc: Height, in pixels, of the x-axis. If not set explicitly, this is computed based on axisLabelFontSize
-        and axisTickSize.
     tags:
     - axes
+    - display
+    type: Integer
+    desc: Height, in pixels, of the x-axis. If not set explicitly, this is computed
+        based on axisLabelFontSize and axisTickSize.
 
 -   name: xAxisLabelWidth
-    type: Integer
-    default: 50
-    desc: Width, in pixels, of the x-axis labels.
     tags:
     - axes
+    - labels
+    default: 50
     examples:
     - x-axis-formatter
     - value-axis-formatters
+    type: Integer
+    desc: Width, in pixels, of the x-axis labels.
 
 -   name: yAxisLabelWidth
-    type: Integer
-    default: 50
-    desc: Width, in pixels, of the y-axis labels. This also affects the amount of space available for
-        a y-axis chart label.
     tags:
     - axes
+    - labels
+    default: 50
     examples:
     - customLabel
     - two-axes
     - multi-scale
     - two-axes-vr
     - value-axis-formatters
+    type: Integer
+    desc: Width, in pixels, of the y-axis labels. This also affects the amount of
+        space available for a y-axis chart label.
 
--   name: delimiter
-    type: String
-    default: ','
-    desc: The delimiter to look for when separating fields of a CSV file. Setting this to a tab is not
-        usually necessary, since tab-delimited data is auto-detected.
-    tags:
-    - csv parsing
-
--   name: xValueParser
-    type: function(str) -> number
-    default: null
-    desc: A function which parses x-values (i.e. the dependent series). Must return a number, even when
-        the values are dates. In this case, millis since epoch are used. This is used primarily for parsing
-        CSV data.
-        
-        * Dygraphs is slightly more accepting in the dates which it will parse. See code for
-        details.
-    tags:
-    - csv parsing
-
--   name: clickCallback
-    type: function(e, x, points)
+-   name: ticker
     default: null
-    desc: "A function to call when the canvas is clicked. The function should take three arguments, the\
-        \ event object for the click, the x-value that was clicked (for dates this is millis since epoch),\
-        \ and the closest points along that date. The points have these properties:\n * xval/yval: The\
-        \ data coordinates of the point (with dates/times as millis since epoch) \n * canvasx/canvasy:\
-        \ The canvas coordinates at which the point is drawn. \n name: The name of the data series to\
-        \ which the point belongs"
     tags:
-    - callbacks
-    examples:
+    - axes
+    - formatting
     - callback
+    type: 'function(min, max, pixels, opts, dygraph, vals) -> [{v: ..., label: ...},
+        ...]'
+    desc: This lets you specify an arbitrary function to generate tick marks on an
+        axis. The tick marks are an array of (value, label) pairs. The built-in functions
+        go to great lengths to choose good tick marks so, if you set this option,
+        you'll most likely want to call one of them and modify the result. By default,
+        uses Dygraph.dateTicker or Dygraph.numericTicks, but see dygraph-tickers.js
+        for an extensive discussion. This is set on a per-axis basis.
 
--   name: drawCallback
-    type: function(dygraph, is_initial)
-    default: null
-    desc: When set, this callback gets called every time the dygraph is drawn. This includes the initial
-        draw, after zooming and repeatedly while panning. The first parameter is the dygraph being drawn.
-        The second is a boolean value indicating whether this is the initial draw.
+-   name: dateWindow
     tags:
-    - callbacks
+    - interactivity
+    - axes
+    default: null
     examples:
-    - linear-regression-addseries
-    - annotation
-    - callback
-    - is-zoomed
+    - dateWindow
+    - drawing
     - is-zoomed-ignore-programmatic-zoom
+    - link-interaction
     - synchronize
     - zoom
+    type: Array of two Dates or numbers
+    desc: Initially zoom in on a section of the graph. Is of the form [earliest, latest],
+        where earliest/latest are milliseconds since epoch. If the data for the x-axis
+        is numeric, the values in dateWindow must also be numbers. By default, the
+        full range of the input is shown.
 
--   name: highlightCallback
-    type: function(event, x, points,row)
-    default: null
-    desc: 'When set, this callback gets called every time a new point is highlighted. The parameters are
-        the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted
-        points: [ {name: ''series'', yval: y-value}, ... ]'
+-   name: panEdgeFraction
     tags:
-    - callbacks
-    examples:
-    - callback
-    - crosshair
-
--   name: underlayCallback
-    type: function(canvas, area, dygraph)
+    - interactivity
+    - axes
+    - pan
     default: null
-    desc: When set, this callback gets called before the chart is drawn. It details on how to use this.
-    tags:
-    - callbacks
     examples:
-    - highlighted-region
-    - interaction
-    - linear-regression-fractions
-    - linear-regression
-    - underlay-callback
+    - zoom
+    type: Float
+    desc: A value representing the farthest a graph may be panned, in percent of the
+        display. For example, a value of 0.1 means that the graph can only be panned
+        10% pased the edges of the displayed values. null means no bounds.
 
--   name: unhighlightCallback
-    type: function(event)
-    default: null
-    desc: When set, this callback gets called every time the user stops highlighting any point by mousing
-        out of the graph.  The parameter is the mouseout event.
+-   name: valueRange
     tags:
-    - callbacks
-    examples:
-    - callback
-    - crosshair
-
--   name: zoomCallback
-    type: function(minDate, maxDate, yRanges)
+    - interactivity
+    - range
+    - axes
     default: null
-    desc: A function to call when the zoom window is changed (either by zooming in or out). minDate and
-        maxDate are milliseconds since epoch. yRanges is an array of [bottom, top] pairs, one for each
-        y-axis.
-    tags:
-    - callbacks
     examples:
-    - callback
+    - drawing
+    - dynamic-update
     - is-zoomed-ignore-programmatic-zoom
+    - no-visibility
+    - reverse-y-axis
+    - synchronize
     - zoom
-
--   name: title
-    type: String
-    default: null
-    desc: Text to display above the chart. You can supply any HTML for this value, not just text. If you
-        wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes.
-    tags:
-    - chart labels
-    examples:
-    - border
-    - demo
-    - noise
-    - styled-chart-labels
-    - multi-scale
-    - range-selector
-    - temperature-sf-ny
-
--   name: titleHeight
-    type: Integer
-    default: 18
-    desc: Height of the chart title, in pixels. This also controls the default font size of the title.
-        If you style the title on your own, this controls how much space is set aside above the chart
-        for the title's div.
-    tags:
-    - chart labels
-    examples:
-    - styled-chart-labels
-
--   name: xLabelHeight
-    type: Integer
-    default: 18
-    desc: Height of the x-axis label, in pixels. This also controls the default font size of the x-axis
-        label. If you style the label on your own, this controls how much space is set aside below the
-        chart for the x-axis label's div.
-    tags:
-    - chart labels
-
--   name: xlabel
-    type: String
-    default: null
-    desc: Text to display below the chart's x-axis. You can supply any HTML for this value, not just text.
-        If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel' classes.
-    tags:
-    - chart labels
-    examples:
-    - border
-    - demo
-    - styled-chart-labels
-    - multi-scale
-
--   name: y2label
-    type: String
-    default: null
-    desc: Text to display to the right of the chart's secondary y-axis. This label is only displayed if
-        a secondary y-axis is present. See this test for an example of how to do this. The comments for
-        the 'ylabel' option generally apply here as well. This label gets a 'dygraph-y2label' instead
-        of a 'dygraph-ylabel' class.
-    tags:
-    - chart labels
-    examples:
-    - two-axes
     - two-axes-vr
+    type: Array of two numbers
+    desc: Explicitly set the vertical range of the graph to [low,&n