From: dsc Date: Wed, 29 Feb 2012 19:15:20 +0000 (-0800) Subject: Updates todo, merges died's tags. X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=1b54fa6a34a58ffe2ecf683f521c3ae21b6afb9f;p=kraken-ui.git Updates todo, merges died's tags. --- 1b54fa6a34a58ffe2ecf683f521c3ae21b6afb9f diff --cc docs/todo.md index 2683b03,4323034..01b4b17 --- a/docs/todo.md +++ b/docs/todo.md @@@ -1,19 -1,28 +1,23 @@@ # todo -- [graph options] - - special 'auto' value for width & height to fit to page-size - - non-lib option: redraw on page resize - - hide callbacks & handlers +- cascading presets +- base preset +- pass label element +- tags -> hidden detection: callbacks, deprecated, type=function +- title element to replace title option + ## bugs + + - (Safari) dygraph on safari has a bug parsing dates, bug http://code.google.com/p/dygraphs/issues/detail?id=287 + - (Chrome) stacked options does not visualize when selected, need other options first (fabian can expand on this) -## features -- Bookmarkable Graphs - - Load graph from URL - - Update URL when graph changes -- Ability to merge & filter datasets -- Discoverable & Self-Describing Data Sources - - ToC endpoint - - Metadata endpoint for each datasource/dataset - - (Both could be static files -- "endpoint" just means a convention to the URLs) -- Persist graph settings as a preset on the server -- Dashboard Configuration - - list of graphs w/ configuration identifiers +##### ohai ##### + +[Other Business] +- Need to write documentation about how to use this and gather feedback +- **dsc** to email Moeller and figure out schedule +- **otto** to email ezachte to figure out source for mobile graphs on stats.wikimedia.org ## ux diff --cc msc/dygraph-options/data.yaml index 398d381,6b2798d..28edfbd --- a/msc/dygraph-options/data.yaml +++ b/msc/dygraph-options/data.yaml @@@ -1,123 -1,115 +1,108 @@@ - - name: dateWindow - tags: - - interactivity - - axes - default: null - examples: - - 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: panEdgeFraction + - name: title tags: - - interactivity - - axes - - pan - - chart + - labels + - display default: null examples: - - 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. - - + - 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: visibility + - name: xlabel tags: - - lines - - data - - x-axis + - labels - display - default: true + default: null 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. + - 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: stackedGraph + - name: ylabel tags: - - lines - - data - - y-axis + - labels - display - default: false + default: null examples: - - stacked - type: Boolean - desc: If set, stack series on top of one another rather than drawing them independently. + - 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: fillGraph + - name: y2label tags: - - lines - - data - - y-axis + - labels - display - default: false + default: null examples: - - fillGraph - two-axes - - steps - type: Boolean - desc: Should the area underneath the graph be filled? This option is not compatible - with error bars. + - 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: strokeWidth + - name: titleHeight tags: - - lines - - data - - chart + - labels - display - default: 1 + default: 18 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. + 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: strokePattern + - name: xLabelHeight + default: 18 tags: - - lines - - data - - x-axis + - labels - display - default: null - examples: - - 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. + 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: stepPlot + - name: yLabelWidth + default: 18 tags: - - lines - - data - - y-axis + - labels - display - default: false - examples: - - avoidMinZero - - steps - - y-axis-formatter - type: Boolean - desc: When set, display the graph as a step plot instead of a line plot. + 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: @@@ -137,9 -130,9 +122,8 @@@ - name: drawPoints tags: - - line - lines - data - - points - display default: false examples: @@@ -156,11 -149,26 +140,24 @@@ point. This makes the individual data points easier to see, but can increase visual clutter in the chart. + - name: fillGraph + tags: - - graph + - lines + - data + - display + default: false + examples: + - fillGraph + - two-axes + - steps + type: Boolean + desc: Should the area underneath the graph be filled? This option is not compatible + with error bars. + - name: pointSize tags: - - line - lines - data - - points - display default: 1 examples: @@@ -170,36 -178,67 +167,63 @@@ 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: rightGap - default: 5 + - name: stackedGraph tags: - - graph - lines - data - - points - 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. - - + default: false + examples: + - stacked + type: Boolean + desc: If set, stack series on top of one another rather than drawing them independently. + - name: stepPlot + tags: - - graph + - lines + - data + - display + default: false + examples: + - avoidMinZero + - steps + - y-axis-formatter + type: Boolean + desc: When set, display the graph as a step plot instead of a line plot. - - name: colors + - name: strokePattern tags: - - color - - line + - lines - data - display default: null examples: - - century-scale - - color-visibility - - demo - - reverse-y-axis - - color-cycle + - per-series 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. + 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: - - line + - 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 @@@ -212,8 -252,9 +236,8 @@@ series colors. - name: colorValue - default: 0.5 + default: 1.0 tags: - - line - color - data - display @@@ -221,324 -262,119 +245,117 @@@ 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: animatedZooms - tags: - - 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 - tags: - - 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 - ignore: true + - name: colors tags: - - interactivity - - line + - color + - data + - display default: null examples: - - drawing - - interaction - type: Object - desc: 'TODO(konigsberg): document this' + - 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: isZoomedIgnoreProgrammaticZoom + - name: avoidMinZero tags: - - interactivity - - zoom - - y-axis + - axes default: false examples: - - is-zoomed-ignore-programmatic-zoom + - avoidMinZero 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. - - + 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: labels + - name: axis tags: - - labels - - legend - - display + - axes default: null examples: - - linear-regression-addseries - - connect-separated - - drawing - - dygraph - - dygraph-many-points-benchmark - - dynamic-update - - highlighted-region - - independent-series - - isolated-points - - label-div - - link-interaction - - linear-regression - - negative - - missing-data - - native-format - two-axes - - perf - - small-range-zero - steps - - y-axis-formatter - - annotation-native - - 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: xlabel - tags: - - labels - - axes - - 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. + 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: ylabel + - name: axisLabelColor + default: black tags: - - labels - axes - - 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 - 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: legend - tags: + - color - labels - - legend - - display - default: onmouseover - examples: - - demo - - noise - - per-series - - styled-chart-labels - - 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: labelsSeparateLines - 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 - tags: - - labels - - legend - - display - default: true - examples: - - label-div - type: Boolean - desc: Show zero value labels in the labelsDiv. - - - name: hideOverlayOnMouseOut - tags: - - labels - - interactivity - - legend - - display - default: true - examples: - - gviz-selection - type: Boolean - desc: Whether to hide the legend when the mouse leaves the chart area. - - - name: showLabelsOnHighlight - tags: - - labels - - legend - - interactivity - - display - default: true - examples: - - callback - type: Boolean - desc: Whether to show the legend upon mouseover. - - - + desc: Color for x- and y-axis labels. This is a CSS color string. - - name: labelsDiv - ignore: true + - name: axisLabelFontSize + default: 14 tags: + - axes - labels - - legend - - display - default: null - 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. - examples: - - century-scale - - demo - - label-div - - reverse-y-axis - - unboxed-spark + type: Integer + desc: Size of the font (in pixels) to use in the axis labels, both x- and y-axis. - - name: labelsDivStyles - ignore: true + - name: axisLabelFormatter tags: + - axes - labels - - legend - - display default: null examples: - - border - - customLabel - - noise - - 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.' + - 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: labelsDivWidth - ignore: true + - name: axisLabelWidth + default: 50 tags: + - axes - 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. - - + desc: Width (in pixels) of the containing divs for x- and y-axis labels. For the + y-axis, this also controls - - name: logscale + - name: axisLineColor tags: - axes - - display - default: false + - color + default: black examples: - - logscale - - stock - 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. + - 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: axis + - name: axisLineWidth + default: 0.3 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. + type: Float + desc: Thickness (in pixels) of the x- and y-axis lines. - - name: valueRange + - name: axisTickSize + default: '3.0' tags: - axes - - range - default: null - examples: - - drawing - - dynamic-update - - is-zoomed-ignore-programmatic-zoom - - no-visibility - - reverse-y-axis - - synchronize - - zoom - - 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. + type: Number + desc: The size of the line to display next to each tick mark on x- or y-axes. - name: drawXAxis tags: @@@ -563,20 -401,9 +380,8 @@@ 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: avoidMinZero - 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: includeZero tags: - - y-axis - axes - display default: false @@@ -590,104 -417,20 +395,19 @@@ zero, typically as the lowest value. This can be used to avoid exaggerating the variance in the data - - name: axisLineWidth - default: 0.3 - tags: - - axes - type: Float - desc: Thickness (in pixels) of the x- and y-axis lines. - - - name: axisLineColor - 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: axisTickSize - default: 3.0 - tags: - - axes - type: Number - desc: The size of the line to display next to each tick mark on x- or y-axes. - - - name: xAxisHeight - default: null + - name: logscale tags: - - y-axis - 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: axisLabelColor - default: black - tags: - - axes - - color - - labels - type: String - desc: Color for x- and y-axis labels. This is a CSS color string. - - - name: axisLabelFontSize - default: 14 - 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 - tags: - - axes - - labels - default: null + default: false 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 - default: 50 - 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: xLabelHeight - default: 18 - tags: - - axes - - 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: - - axes - - 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. + - logscale + - stock + 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 tags: @@@ -702,8 -445,19 +422,17 @@@ 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 + default: null + tags: - - x-axis + - 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 tags: - - x-axis - axes - labels default: 50 @@@ -743,198 -498,63 +472,60 @@@ uses Dygraph.dateTicker or Dygraph.numericTicks, but see dygraph-tickers.js for an extensive discussion. This is set on a per-axis basis. - - name: labelsKMB - tags: - - formatting - - labels - - display - default: false - examples: - - annotation-gviz - - century-scale - - demo - - labelsKMB - - no-range - - two-axes - - reverse-y-axis - - two-axes-vr - type: Boolean - desc: Show K/M/B for thousands/millions/billions on y-axis. - - - name: labelsKMG2 - tags: - - formatting - - labels - - display - default: false - examples: - - 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: digitsAfterDecimal - tags: - - 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: maxNumberWidth - tags: - - 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 - tags: - - 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 + - name: dateWindow tags: - - formatting - - labels - - display - - legend + - interactivity + - axes 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. - - - + - 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: title - ignore: true + - name: panEdgeFraction tags: - - title - - labels - - display - - graph + - interactivity + - axes + - pan 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: titleHeight - ignore: true - tags: - - title - - labels - - display - default: 18 - examples: - - 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. - - - + - 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: showRoller + - name: valueRange tags: - - summary data - - rolling averages - - y-axis - interactivity - default: false + - range + - axes + default: null examples: - - annotation - - callback - - crosshair + - drawing - dynamic-update - - fractions - - isolated-points - - missing-data - - numeric-gviz - - steps - - underlay-callback - - range-selector - - temperature-sf-ny - type: Boolean - desc: If the rolling average period text box should be shown. - - - name: rollPeriod - tags: - - summary data - - rolling averages - - error bars - default: 1 - examples: - - annotation - - callback - - century-scale - - crosshair - - customLabel - - draw-points - - dygraph-many-points-benchmark - - grid_dot - - link-interaction - - missing-data - - resize + - is-zoomed-ignore-programmatic-zoom - no-visibility - - noise - - perf - reverse-y-axis - - unboxed-spark - - spacing - - styled-chart-labels - synchronize - - two-series - - underlay-callback - - visibility - - range-selector - - temperature-sf-ny - type: Integer >= 1 - desc: Number of days over which to average data. Discussed extensively above. + - zoom + - 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: sigma default: 2.0 tags: - - summary data - - statistics - error bars type: Float desc: When errorBars is set, shade this many standard deviations above/below each @@@ -943,7 -563,7 +534,6 @@@ - name: wilsonInterval default: true tags: - - summary data - - statistics - error bars type: Boolean desc: Use in conjunction with the "fractions" option. Instead of plotting +/- @@@ -954,7 -574,7 +544,6 @@@ - name: fillAlpha default: 0.15 tags: - - summary data - - statistics - error bars - color - data @@@ -967,10 -587,9 +556,8 @@@ itself. This can be used to produce chart lines whose thickness varies at each point. - - name: customBars tags: - - summary data - - statistics - source - error bars - csv @@@ -989,7 -608,7 +576,6 @@@ - name: errorBars tags: - - summary data - - statistics - source - error bars - csv @@@ -1025,7 -644,7 +611,6 @@@ - name: fractions tags: - - summary data - - statistics - source - error bars - csv @@@ -1063,10 -681,9 +646,8 @@@ * Dygraphs is slightly more accepting in the dates which it will parse. See code for details.' - - - name: drawXGrid tags: - - x-axis - grid default: true examples: @@@ -1106,23 -726,65 +687,63 @@@ gridlines can be turned off entirely by using the drawXGrid and drawYGrid options. - - - - name: showRangeSelector + - name: animatedZooms tags: - - range - interactivity + - zoom default: false examples: - - range-selector + - highlighted-region + - link-interaction type: Boolean - desc: Show the range selector widget. This option can only be specified at Dygraph - creation time. + 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 + tags: - - graph + - 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 + tags: + - interactivity + default: null + examples: + - drawing + - interaction + hidden: true + type: Object + desc: 'TODO(konigsberg): document this' + + - name: pointClickCallback + tags: + - 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 tags: - - range - - graph - interactivity + - range default: 40 examples: - range-selector @@@ -1132,9 -794,10 +753,9 @@@ - name: rangeSelectorPlotFillColor tags: - - range - - graph - interactivity - color + - range default: '#A7B1C4' examples: - range-selector @@@ -1145,9 -808,10 +766,9 @@@ - name: rangeSelectorPlotStrokeColor tags: - - range - - graph - interactivity - color + - range default: '#808FAB' examples: - range-selector @@@ -1156,7 -820,233 +777,229 @@@ or "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn off stroke. + - name: showRangeSelector + tags: - - graph + - 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 + tags: + - interactivity + - labels + - legend + - display + default: true + examples: + - gviz-selection + type: Boolean + desc: Whether to hide the legend when the mouse leaves the chart area. + + - name: labels + tags: - - legend + - labels ++ - legend + - display + default: null + examples: + - linear-regression-addseries + - connect-separated + - drawing + - dygraph + - dygraph-many-points-benchmark + - dynamic-update + - highlighted-region + - independent-series + - isolated-points + - label-div + - link-interaction + - linear-regression + - negative + - missing-data + - native-format + - two-axes + - perf + - small-range-zero + - steps + - y-axis-formatter + - annotation-native + - 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 + tags: - - legend + - 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 + tags: - - legend + - labels ++ - legend + - display + default: null + examples: + - border + - customLabel + - noise + - 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 + tags: - - legend + - 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 + tags: - - legend + - 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 + tags: - - legend + - labels ++ - legend + - display + default: true + examples: + - label-div + type: Boolean + desc: Show zero value labels in the labelsDiv. + + - name: legend + tags: - - legend + - labels ++ - legend + - display + default: onmouseover + examples: + - demo + - noise + - per-series + - styled-chart-labels + - 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 + tags: - - legend + - interactivity + - labels ++ - legend + - display + default: true + examples: + - callback + type: Boolean + desc: Whether to show the legend upon mouseover. + + - name: rightGap + default: 5 + tags: - - graph + - 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 + tags: - - statistics + - rolling averages + - error bars + default: 1 + examples: + - annotation + - callback + - century-scale + - crosshair + - customLabel + - draw-points + - dygraph-many-points-benchmark + - grid_dot + - link-interaction + - missing-data + - resize + - no-visibility + - noise + - perf + - reverse-y-axis + - unboxed-spark + - spacing + - styled-chart-labels + - synchronize + - two-series + - underlay-callback + - visibility + - range-selector + - temperature-sf-ny + type: Integer >= 1 + desc: Number of days over which to average data. Discussed extensively above. + + - name: showRoller + tags: - - statistics + - interactivity + - rolling averages + default: false + examples: + - annotation + - callback + - crosshair + - dynamic-update + - fractions + - isolated-points + - missing-data + - numeric-gviz + - steps + - underlay-callback + - range-selector + - temperature-sf-ny + type: Boolean + desc: If the rolling average period text box should be shown. - name: displayAnnotations tags: @@@ -1212,22 -1103,117 +1055,111 @@@ type: function(annotation, point, dygraph, event) desc: If provided, this function is called whenever the user mouses over an annotation. + - name: digitsAfterDecimal + tags: - - y-axis + - 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 + tags: - - y-axis + - formatting + - labels + - display + default: false + examples: + - annotation-gviz + - century-scale + - demo + - labelsKMB + - no-range + - two-axes + - reverse-y-axis + - two-axes-vr + type: Boolean + desc: Show K/M/B for thousands/millions/billions on y-axis. + - name: labelsKMG2 + tags: - - y-axis + - formatting + - labels + - display + default: false + examples: + - 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 + tags: - - y-axis + - 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: timingName + - name: sigFigs tags: - - debugging - - y-axis + - formatting + - display 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 timing, so that you can distinguish multiple dygraphs - on the same page. + - 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 + tags: - - callback + - 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 + tags: + - interactivity + - zoom + default: false + 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: @@@ -1361,8 -1347,10 +1290,9 @@@ - name: xValueFormatter tags: - - x-axis - deprecated default: null + hidden: true type: function desc: 'Prefer axes: { x: { valueFormatter } }' @@@ -1384,34 -1376,51 +1316,47 @@@ type: function desc: 'Prefer axes: { y: { valueFormatter } }' - - - name: width - ignore: true tags: - - graph - 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 - ignore: true tags: - - graph - 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 - ignore: true tags: - - data - 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: - - graph + - 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. +