From 0fcb7e7c6689c47c96b50a76e702dcd4da7e93c9 Mon Sep 17 00:00:00 2001 From: dsc Date: Sun, 26 Feb 2012 16:05:50 -0800 Subject: [PATCH] Reorders dygraph options, fixes tags. --- docs/graphs.md | 12 +- docs/notes.md | 8 + docs/todo.md | 21 +- lib/scaffold/view.co | 5 +- msc/dygraph-options/data.yaml | 1601 ++++++++++++++++++++++------------------- www/css/colors.styl | 4 +- 6 files changed, 911 insertions(+), 740 deletions(-) diff --git a/docs/graphs.md b/docs/graphs.md index b3caea6..19b82b8 100644 --- a/docs/graphs.md +++ b/docs/graphs.md @@ -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 diff --git a/docs/notes.md b/docs/notes.md index 6a9ea45..c4746e5 100644 --- a/docs/notes.md +++ b/docs/notes.md @@ -1,2 +1,10 @@ # notes +## Scaffold Forms + +- Type to form mappings: + - String, Integer, Float -> text + - Boolean -> checkbox + - Object, Array, Function -> textarea + + diff --git a/docs/todo.md b/docs/todo.md index a016b47..723a801 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -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 @@ -28,4 +29,18 @@ - 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 diff --git a/lib/scaffold/view.co b/lib/scaffold/view.co index 4bb31f0..b48e1f5 100644 --- a/lib/scaffold/view.co +++ b/lib/scaffold/view.co @@ -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: -> diff --git a/msc/dygraph-options/data.yaml b/msc/dygraph-options/data.yaml index 9daa807..28edfbd 100644 --- a/msc/dygraph-options/data.yaml +++ b/msc/dygraph-options/data.yaml @@ -1,752 +1,586 @@ -- 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, 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. -- name: yLabelWidth - type: Integer - default: 18 - 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. - tags: - - chart labels - -- name: ylabel - type: String - default: null - 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. - tags: - - chart labels - examples: - - border - - demo - - two-axes - - noise - - styled-chart-labels - - multi-scale - - range-selector - - temperature-sf-ny - - two-axes-vr - -- name: connectSeparatedPoints - type: Boolean - default: false - 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. - tags: - - data line display - examples: - - connect-separated - - independent-series - -- name: drawPoints - type: Boolean - default: false - 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. - tags: - - data line display - examples: - - linear-regression-addseries - - draw-points - - dynamic-update - - independent-series - - interaction - - linear-regression-fractions - - linear-regression - - per-series - -- name: fillGraph - type: Boolean - default: false - desc: Should the area underneath the graph be filled? This option is not compatible with error bars. - tags: - - data line display - examples: - - fillGraph - - two-axes - - steps - -- name: pointSize - type: Integer - default: 1 - 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. - tags: - - data line display - examples: - - per-series - -- name: stackedGraph - type: Boolean - default: false - desc: If set, stack series on top of one another rather than drawing them independently. - tags: - - data line display - examples: - - stacked - -- name: stepPlot - type: Boolean - default: false - desc: When set, display the graph as a step plot instead of a line plot. - tags: - - data line display - examples: - - avoidMinZero - - steps - - y-axis-formatter - -- name: strokePattern - type: Array - default: null - 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. - tags: - - data line display - examples: - - per-series - -- name: strokeWidth - type: Integer - default: 1 - desc: The width of the lines connecting data points. This can be used to increase the contrast or - some graphs. +- name: sigma + default: 2.0 tags: - - data line display - examples: - - linear-regression-addseries - - drawing - - grid_dot - - layout-options - - linear-regression-fractions - - linear-regression - - per-series - - unboxed-spark - - styled-chart-labels + - error bars + type: Float + desc: When errorBars is set, shade this many standard deviations above/below each + point. -- name: visibility - type: Array of booleans +- name: wilsonInterval default: true - desc: Which series should initially be visible? Once the Dygraph has been constructed, you can access - and modify the visibility of each series using the visibility and setVisibility methods. - tags: - - data line display - examples: - - color-visibility - - no-visibility - - visibility - -- name: colorSaturation - type: Float (0.0 - 1.0) - default: 1.0 - desc: If colors is not specified, saturation of the automatically-generated data series colors. tags: - - data series colors - -- name: colorValue - type: Float (0.0 - 1.0) - default: 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) - tags: - - data series colors - -- name: colors - type: Array - default: null - 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. - tags: - - data series colors - examples: - - century-scale - - color-visibility - - demo - - reverse-y-axis - - color-cycle + - error bars + type: Boolean + desc: Use in conjunction with the "fractions" option. Instead of plotting +/- + N standard deviations, dygraphs will compute a Wilson confidence interval + and plot that. This has more reasonable behavior for ratios close to 0 or + 1. - name: fillAlpha - type: Float (0.0 - 1.0) default: 0.15 - desc: Error bars (or custom bars) for each series are drawn in the same color as the series, but with - partial transparency. This sets the transparency. A value of 0.0 means that the error bars will - not be drawn, whereas a value of 1.0 means that the error bars will be as dark as the line for - the series itself. This can be used to produce chart lines whose thickness varies at each point. tags: - - data series colors - error bars - -- name: timingName - type: String - default: null - desc: Set this option to log timing information. The value of the option will be logged along with - the timimg, so that you can distinguish multiple dygraphs on the same page. - tags: - - debugging - examples: - - dygraph-many-points-benchmark - -- name: pixelsPerXLabel - type: Integer - default: null - desc: 'Prefer axes { x: { pixelsPerLabel } }' - hidden: true - tags: - - deprecated - -- name: pixelsPerYLabel - type: Integer - default: null - desc: 'Prefer axes: { y: { pixelsPerLabel } }' - hidden: true - tags: - - deprecated - examples: - - spacing - -- name: xAxisLabelFormatter - type: function - default: null - desc: 'Prefer axes { x: { axisLabelFormatter } }' - hidden: true - tags: - - deprecated - -- name: xValueFormatter - type: function - default: null - desc: 'Prefer axes: { x: { valueFormatter } }' - hidden: true - tags: - - deprecated - -- name: yAxisLabelFormatter - type: function - default: null - desc: 'Prefer axes: { y: { axisLabelFormatter } }' - hidden: true - tags: - - deprecated - -- name: yValueFormatter - type: function - default: null - desc: 'Prefer axes: { y: { valueFormatter } }' - hidden: true - tags: - - deprecated - examples: - - labelsKMB - - multi-scale + - color + - data + - display + type: Float (0.0 - 1.0) + desc: Error bars (or custom bars) for each series are drawn in the same color + as the series, but with partial transparency. This sets the transparency. + A value of 0.0 means that the error bars will not be drawn, whereas a value + of 1.0 means that the error bars will be as dark as the line for the series + itself. This can be used to produce chart lines whose thickness varies at + each point. - name: customBars - type: Boolean - default: false - desc: When set, parse each CSV cell as "low;middle;high". Error bars will be drawn for each point - between low and high, with the series itself going through middle. tags: + - source - error bars - - bars - csv - parsing + default: false examples: - custom-bars - zero-series - stock - range-selector - temperature-sf-ny + type: Boolean + desc: When set, parse each CSV cell as "low;middle;high". Error bars will be drawn + for each point between low and high, with the series itself going through + middle. - name: errorBars - type: Boolean - default: false - desc: Does the data contain standard deviations? Setting this to true alters the input format (see - above). tags: + - source - error bars - - bars - - csv parsing - csv - parsing + default: false examples: - callback - crosshair @@ -771,184 +605,207 @@ - underlay-callback - visibility - zoom + type: Boolean + desc: Does the data contain standard deviations? Setting this to true alters the + input format (see above). - name: fractions - type: Boolean - default: false - desc: When set, attempt to parse each cell in the CSV file as "a/b", where a and b are integers. The - ratio will be plotted. This allows computation of Wilson confidence intervals (see below). tags: + - source - error bars - - bars - - csv parsing - csv - parsing + default: false examples: - fractions - linear-regression-fractions + type: Boolean + desc: When set, attempt to parse each cell in the CSV file as "a/b", where a and + b are integers. The ratio will be plotted. This allows computation of Wilson + confidence intervals (see below). -- name: sigma - type: Float - default: 2.0 - desc: When errorBars is set, shade this many standard deviations above/below each point. +- name: delimiter + default: ',' tags: - - error bars + - source + - csv + type: String + 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. -- name: wilsonInterval - type: Boolean - default: true - desc: Use in conjunction with the "fractions" option. Instead of plotting +/- N standard deviations, - dygraphs will compute a Wilson confidence interval and plot that. This has more reasonable behavior - for ratios close to 0 or 1. +- name: xValueParser + default: null tags: - - error bars + - source + - csv + type: function(str) -> number + 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.' - name: drawXGrid - type: Boolean - default: true - desc: Whether to display vertical gridlines under the chart. tags: - grid + default: true examples: - demo - unboxed-spark + type: Boolean + desc: Whether to display vertical gridlines under the chart. - name: drawYGrid - type: Boolean - default: true - desc: Whether to display horizontal gridlines under the chart. tags: - grid + default: true examples: - drawing - unboxed-spark + type: Boolean + desc: Whether to display horizontal gridlines under the chart. - name: gridLineColor - type: String - default: rgb(128,128,128) - desc: The color of the gridlines. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow". tags: - grid + - color + default: rgb(128,128,128) examples: - drawing - grid_dot + type: String + desc: The color of the gridlines. This can be of the form "#AABBCC" or "rgb(255,100,200)" + or "yellow". - name: gridLineWidth - type: Float default: 0.3 - desc: Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines - can be turned off entirely by using the drawXGrid and drawYGrid options. tags: - grid + type: Float + desc: Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal + gridlines can be turned off entirely by using the drawXGrid and drawYGrid + options. - name: animatedZooms - type: Boolean - default: false - desc: Set this option to animate the transition between zoom windows. Applies to programmatic and - interactive zooms. Note that if you also set a drawCallback, it will be called several times on - each zoom. If you set a zoomCallback, it will only be called after the animation is complete. tags: - - interactive elements + - interactivity + - zoom + default: false examples: - highlighted-region - link-interaction + type: Boolean + desc: Set this option to animate the transition between zoom windows. Applies + to programmatic and interactive zooms. Note that if you also set a drawCallback, + it will be called several times on each zoom. If you set a zoomCallback, it + will only be called after the animation is complete. - name: highlightCircleSize - type: Integer - default: 3 - desc: The size in pixels of the dot drawn over highlighted points. tags: - - interactive elements + - interactivity + default: 3 examples: - dygraph-many-points-benchmark - grid_dot - per-series - unboxed-spark + type: Integer + desc: The size in pixels of the dot drawn over highlighted points. - name: interactionModel - hidden: true - type: Object - default: null - desc: 'TODO(konigsberg): document this' tags: - - interactive elements + - interactivity + default: null examples: - drawing - interaction + hidden: true + type: Object + desc: 'TODO(konigsberg): document this' - name: pointClickCallback - type: function(e, point) - default: null - desc: "A function to call when a data point is clicked. The function should take two arguments, the\ - \ event object for the click, and the point that was clicked. The 'point' argument has 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: - - interactive elements + - interactivity - callback + default: null examples: - annotation - callback + type: function(e, point) + desc: "A function to call when a data point is clicked. The function should take\ + \ two arguments, the event object for the click, and the point that was clicked.\ + \ The 'point' argument has 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" - name: rangeSelectorHeight - type: Integer - default: 40 - desc: Height, in pixels, of the range selector widget. This option can only be specified at Dygraph - creation time. tags: - - interactive elements + - interactivity + - range + default: 40 examples: - range-selector + type: Integer + desc: Height, in pixels, of the range selector widget. This option can only be + specified at Dygraph creation time. - name: rangeSelectorPlotFillColor - type: String - default: '#A7B1C4' - desc: The range selector mini plot fill color. This can be of the form "#AABBCC" or "rgb(255,100,200)" - or "yellow". You can also specify null or "" to turn off fill. tags: - - interactive elements + - interactivity + - color + - range + default: '#A7B1C4' examples: - range-selector + type: String + desc: The range selector mini plot fill color. This can be of the form "#AABBCC" + or "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn + off fill. - name: rangeSelectorPlotStrokeColor - type: String - default: '#808FAB' - desc: The range selector mini plot stroke color. This can be of the form "#AABBCC" or "rgb(255,100,200)" - or "yellow". You can also specify null or "" to turn off stroke. tags: - - interactive elements + - interactivity + - color + - range + default: '#808FAB' examples: - range-selector + type: String + desc: The range selector mini plot stroke color. This can be of the form "#AABBCC" + or "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn + off stroke. - name: showRangeSelector - type: Boolean - default: false - desc: Show the range selector widget. This option can only be specified at Dygraph creation time. tags: - - interactive elements + - interactivity + - range + default: false examples: - range-selector + type: Boolean + desc: Show the range selector widget. This option can only be specified at Dygraph + creation time. - name: hideOverlayOnMouseOut - type: Boolean - default: true - desc: Whether to hide the legend when the mouse leaves the chart area. tags: + - interactivity + - labels - legend - - interactive elements + - display + default: true examples: - gviz-selection + type: Boolean + desc: Whether to hide the legend when the mouse leaves the chart area. - name: labels - type: Array - default: null - desc: A name for each data series, including the independent (X) series. For CSV files and DataTable - objections, this is determined by context. For raw data, this must be specified. If it is not, - default values are supplied and a warning is logged. By default, labels roughly follow - ["X", "Y1", "Y2", ...]* tags: + - labels - legend + - display + default: null examples: - linear-regression-addseries - connect-separated @@ -974,28 +831,34 @@ - multi-scale - two-axes-vr - value-axis-formatters + type: Array + desc: A name for each data series, including the independent (X) series. For CSV + files and DataTable objections, this is determined by context. For raw data, + this must be specified. If it is not, default values are supplied and a warning + is logged. By default, labels roughly follow ["X", "Y1", "Y2", ...]* - name: labelsDiv - type: DOM element or string - default: null - desc: Show data labels in an external div, rather than on the graph. This value can either be a div - element or a div id. tags: + - labels - legend + - display + default: null examples: - century-scale - demo - label-div - reverse-y-axis - unboxed-spark + type: DOM element or string + desc: Show data labels in an external div, rather than on the graph. This value + can either be a div element or a div id. - name: labelsDivStyles - type: Object - default: null - desc: 'Additional styles to apply to the currently-highlighted points div. For example, { ''font-weight'': - ''bold'' } will make the labels bold.' tags: + - labels - legend + - display + default: null examples: - border - customLabel @@ -1003,45 +866,55 @@ - styled-chart-labels - range-selector - temperature-sf-ny + type: Object + desc: 'Additional styles to apply to the currently-highlighted points div. For + example, { ''font-weight'': ''bold'' } will make the labels bold.' - name: labelsDivWidth - type: Integer - default: 250 - desc: Width (in pixels) of the div which shows information on the currently-highlighted points. tags: + - labels - legend + - display + default: 250 examples: - customLabel - noise + type: Integer + desc: Width (in pixels) of the div which shows information on the currently-highlighted + points. - name: labelsSeparateLines - type: Boolean - default: false - desc: Put
between lines in the label string. Often used in conjunction with labelsDiv. tags: + - labels - legend + - display + default: false examples: - century-scale - customLabel - demo - reverse-y-axis + type: Boolean + desc: Put
between lines in the label string. Often used in conjunction with + labelsDiv. - name: labelsShowZeroValues - type: Boolean - default: true - desc: Show zero value labels in the labelsDiv. tags: + - labels - legend + - display + default: true examples: - label-div + type: Boolean + desc: Show zero value labels in the labelsDiv. - name: legend - type: String - default: onmouseover - desc: When to display the legend. By default, it only appears when a user mouses over the chart. Set - it to "always" to always display a legend of some sort. tags: + - labels - legend + - display + default: onmouseover examples: - demo - noise @@ -1050,32 +923,35 @@ - multi-scale - range-selector - temperature-sf-ny + type: String + desc: When to display the legend. By default, it only appears when a user mouses + over the chart. Set it to "always" to always display a legend of some sort. - name: showLabelsOnHighlight - type: Boolean - default: true - desc: Whether to show the legend upon mouseover. tags: + - interactivity + - labels - legend - - interactive elements + - display + default: true examples: - callback + type: Boolean + desc: Whether to show the legend upon mouseover. - name: rightGap - type: Integer default: 5 - desc: Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight - the right-most data point. tags: - - overall display + - display + type: Integer + desc: Number of pixels to leave blank at the right edge of the Dygraph. This makes + it easier to highlight the right-most data point. - name: rollPeriod - type: Integer >= 1 - default: 1 - desc: Number of days over which to average data. Discussed extensively above. tags: - rolling averages - error bars + default: 1 examples: - annotation - callback @@ -1101,14 +977,14 @@ - visibility - range-selector - temperature-sf-ny + type: Integer >= 1 + desc: Number of days over which to average data. Discussed extensively above. - name: showRoller - type: Boolean - default: false - desc: If the rolling average period text box should be shown. tags: + - interactivity - rolling averages - - interactive elements + default: false examples: - annotation - callback @@ -1122,26 +998,84 @@ - underlay-callback - range-selector - temperature-sf-ny + type: Boolean + desc: If the rolling average period text box should be shown. + +- name: displayAnnotations + tags: + - annotations + - display + default: false + examples: + - annotation-gviz + type: Boolean + 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. + +- name: annotationClickHandler + tags: + - annotations + - callback + default: null + examples: + - annotation + type: function(annotation, point, dygraph, event) + desc: If provided, this function is called whenever the user clicks on an annotation. + +- name: annotationDblClickHandler + tags: + - annotations + - callback + default: null + examples: + - annotation + type: function(annotation, point, dygraph, event) + desc: If provided, this function is called whenever the user double-clicks on + an annotation. + +- name: annotationMouseOutHandler + tags: + - annotations + - callback + default: null + examples: + - annotation + type: function(annotation, point, dygraph, event) + desc: If provided, this function is called whenever the user mouses out of an + annotation. + +- name: annotationMouseOverHandler + tags: + - annotations + - callback + default: null + examples: + - annotation + type: function(annotation, point, dygraph, event) + desc: If provided, this function is called whenever the user mouses over an annotation. - name: digitsAfterDecimal - type: Integer - default: 2 - desc: Unless it's run in scientific mode (see the sigFigs option), dygraphs displays numbers with - digitsAfterDecimal digits after the decimal point. Trailing zeros are not displayed, so with a - value of 2 you'll get '0', '0.1', '0.12', '123.45' but not '123.456' (it will be rounded to '123.46'). - Numbers with absolute value less than 0.1^digitsAfterDecimal (i.e. those which would show up as - '0.00') will be displayed in scientific notation. tags: - - value display/formatting + - formatting + - display + default: 2 examples: - number-display + type: Integer + desc: Unless it's run in scientific mode (see the sigFigs option), dygraphs displays + numbers with digitsAfterDecimal digits after the decimal point. Trailing zeros + are not displayed, so with a value of 2 you'll get '0', '0.1', '0.12', '123.45' + but not '123.456' (it will be rounded to '123.46'). Numbers with absolute + value less than 0.1^digitsAfterDecimal (i.e. those which would show up as + '0.00') will be displayed in scientific notation. - name: labelsKMB - type: Boolean - default: false - desc: Show K/M/B for thousands/millions/billions on y-axis. tags: - - value display/formatting + - formatting + - labels + - display + default: false examples: - annotation-gviz - century-scale @@ -1151,65 +1085,278 @@ - two-axes - reverse-y-axis - two-axes-vr + type: Boolean + desc: Show K/M/B for thousands/millions/billions on y-axis. - name: labelsKMG2 - type: Boolean - default: false - desc: Show k/M/G for kilo/Mega/Giga on y-axis. This is different than labelsKMB in that it uses base - 2, not 10. tags: - - value display/formatting + - formatting + - labels + - display + default: false examples: - - labelsKMB + - labels + - formatting + type: Boolean + desc: Show k/M/G for kilo/Mega/Giga on y-axis. This is different than labelsKMB + in that it uses base 2, not 10. - name: maxNumberWidth - type: Integer - default: 6 - desc: When displaying numbers in normal (not scientific) mode, large numbers will be displayed with - many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis labels. - If there are more than maxNumberWidth digits to the left of the decimal in a number, dygraphs - will switch to scientific notation, even when not operating in scientific mode. If you'd like - to see all those digits, set this to something large, like 20 or 30. tags: - - value display/formatting + - formatting + - display + default: 6 examples: - number-display + type: Integer + desc: When displaying numbers in normal (not scientific) mode, large numbers will + be displayed with many trailing zeros (e.g. 100000000 instead of 1e9). This + can lead to unwieldy y-axis labels. If there are more than maxNumberWidth + digits to the left of the decimal in a number, dygraphs will switch to scientific + notation, even when not operating in scientific mode. If you'd like to see + all those digits, set this to something large, like 20 or 30. - name: sigFigs - type: Integer - default: null - desc: By default, dygraphs displays numbers with a fixed number of digits after the decimal point. - If you'd prefer to have a fixed number of significant figures, set this option to that number - of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0 and 1234 to be displayed - as 1.23e+3. tags: - - value display/formatting + - formatting + - display + default: null examples: - number-display + type: Integer + desc: By default, dygraphs displays numbers with a fixed number of digits after + the decimal point. If you'd prefer to have a fixed number of significant figures, + set this option to that number of sig figs. A value of 2, for instance, would + cause 1 to be display as 1.0 and 1234 to be displayed as 1.23e+3. - name: valueFormatter - type: function(num or millis, opts, dygraph) - default: null - desc: Function to provide a custom display format for the values displayed on mouseover. This does - not affect the values that appear on tick marks next to the axes. To format those, see axisLabelFormatter. - This is usually set on a per-axis basis. For date axes, you can call new Date(millis) to get a - Date object. opts is a function you can call to access various options (e.g. opts('labelsKMB')). Default - formatter will depend on the type of your data. tags: - - value display/formatting + - labels + - formatting + - display - legend + default: null examples: - y-axis-formatter - value-axis-formatters + type: function(num or millis, opts, dygraph) + desc: Function to provide a custom display format for the values displayed on + mouseover. This does not affect the values that appear on tick marks next + to the axes. To format those, see axisLabelFormatter. This is usually set + on a per-axis basis. For date axes, you can call new Date(millis) to get a + Date object. opts is a function you can call to access various options (e.g. + opts('labelsKMB')). Default formatter will depend on the type of your data. - name: isZoomedIgnoreProgrammaticZoom - type: Boolean + tags: + - interactivity + - zoom default: false - desc: When this option is passed to updateOptions() along with either the dateWindow or valueRange - options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for - when the display area of a chart is changed programmatically and also where manual zooming is - allowed and use is made of the isZoomed method to determine this. + examples: + - is-zoomed-ignore-programmatic-zoom + type: Boolean + desc: When this option is passed to updateOptions() along with either the dateWindow + or valueRange options, the zoom flags are not changed to reflect a zoomed + state. This is primarily useful for when the display area of a chart is changed + programmatically and also where manual zooming is allowed and use is made + of the isZoomed method to determine this. + +- name: clickCallback + tags: + - callback + default: null + examples: + - callback + type: function(e, x, points) + 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" + +- name: drawCallback tags: - - zooming + - callback + default: null examples: + - linear-regression-addseries + - annotation + - callback + - is-zoomed - is-zoomed-ignore-programmatic-zoom + - synchronize + - zoom + type: function(dygraph, is_initial) + 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: highlightCallback + tags: + - callback + default: null + examples: + - callback + - crosshair + type: function(event, x, points,row) + 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: underlayCallback + tags: + - callback + default: null + examples: + - highlighted-region + - interaction + - linear-regression-fractions + - linear-regression + - underlay-callback + type: function(canvas, area, dygraph) + desc: When set, this callback gets called before the chart is drawn. It details + on how to use this. + +- name: unhighlightCallback + tags: + - callback + default: null + examples: + - callback + - crosshair + type: function(event) + 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: zoomCallback + tags: + - interactivity + - zoom + - callback + default: null + examples: + - callback + - is-zoomed-ignore-programmatic-zoom + - zoom + type: function(minDate, maxDate, yRanges) + 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. + + +- name: timingName + tags: + - debugging + default: null + examples: + - dygraph-many-points-benchmark + type: String + desc: Set this option to log timing information. The value of the option will + be logged along with the timimg, so that you can distinguish multiple dygraphs + on the same page. + +- name: pixelsPerXLabel + tags: + - deprecated + - labels + default: null + hidden: true + type: Integer + desc: 'Prefer axes { x: { pixelsPerLabel } }' + +- name: pixelsPerYLabel + tags: + - deprecated + - labels + default: null + examples: + - spacing + hidden: true + type: Integer + desc: 'Prefer axes: { y: { pixelsPerLabel } }' + +- name: xAxisLabelFormatter + tags: + - deprecated + - labels + default: null + hidden: true + type: function + desc: 'Prefer axes { x: { axisLabelFormatter } }' + +- name: xValueFormatter + tags: + - deprecated + default: null + hidden: true + type: function + desc: 'Prefer axes: { x: { valueFormatter } }' + +- name: yAxisLabelFormatter + tags: + - deprecated + - labels + default: null + hidden: true + type: function + desc: 'Prefer axes: { y: { axisLabelFormatter } }' + +- name: yValueFormatter + tags: + - deprecated + default: null + examples: + - labelsKMB + - multi-scale + hidden: true + type: function + desc: 'Prefer axes: { y: { valueFormatter } }' + +- name: width + tags: + - display + default: 480 + hidden: true + type: Integer + desc: Width, in pixels, of the chart. If the container div has been explicitly + sized, this will be ignored. + +- name: height + tags: + - display + default: 320 + hidden: true + type: Integer + desc: Height, in pixels, of the chart. If the container div has been explicitly + sized, this will be ignored. + +- name: file + tags: + - source + default: null + hidden: true + type: String + 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. + +- name: visibility + tags: + - lines + - data + - display + default: true + examples: + - color-visibility + - no-visibility + - visibility + type: Array of booleans + desc: Which series should initially be visible? Once the Dygraph has been constructed, + you can access and modify the visibility of each series using the visibility + and setVisibility methods. + diff --git a/www/css/colors.styl b/www/css/colors.styl index 90f63c1..4c836b6 100644 --- a/www/css/colors.styl +++ b/www/css/colors.styl @@ -18,7 +18,7 @@ $hilite_dkblue = #182B53 $hilite_sky = #0080FF $hilite_ltblue = #4596FF $hilite_steelblue = #A6D9FF -$hilite_cyan = #00FFBC +$hilite_cyan = #51E3C5 $hilite_hurricane = #254A59 $hilite_tourquoise = #32938A $hilite_green = #83BB32 @@ -34,7 +34,7 @@ $hilite_purple = #553DC9 $hilite_periwinkle = #9DA5FF $hilite_lavender = #9323FF -$hilites = ($hilite_dkblue $hilite_sky $hilite_ltblue $hilite_steelblue $hilite_cyan $hilite_hurricane $hilite_tourquoise $hilite_green $hilite_lime $hilite_yellow $hilite_squash $hilite_orange $hilite_watermelon $hilite_red $hilite_pink $hilite_magenta $hilite_purple $hilite_periwinkle $hilite_lavender) +$hilites = ($hilite_dkblue $hilite_sky $hilite_steelblue $hilite_cyan $hilite_hurricane $hilite_tourquoise $hilite_green $hilite_lime $hilite_yellow $hilite_squash $hilite_orange $hilite_watermelon $hilite_red $hilite_pink $hilite_magenta $hilite_purple $hilite_periwinkle $hilite_lavender) $hilite_favs = ($hilite_dkblue $hilite_ltblue $hilite_cyan $hilite_lime $hilite_yellow $hilite_squash $hilite_red $hilite_magenta $hilite_purple) // colors: ["#FF0097", "#EF8158", "#83BB32", "#182B53", "#4596FF", "#553DC9", "#AD3238", "#00FFBC", "#F1D950"] -- 1.7.0.4