--- /dev/null
+_ = require 'kraken/underscore'
+op = require 'kraken/util/op'
+
+
+
+Field = exports.Field = Backbone.Model.extend do # {{{
+ idAttribute : 'name'
+
+ initialize: ->
+ @set 'value', @get('default'), {+silent} if not @has 'value'
+
+ defaults: ->
+ {
+ name : ''
+ type : 'String'
+ default : null
+ desc : ''
+ category : 'General'
+ tags : []
+ examples : []
+ }
+
+ getParser: (type) ->
+ type or= @get 'type'
+ t = _ type.toLowerCase()
+
+ parser = op.toStr
+ if t.startsWith 'integer'
+ parser = op.toInt
+ if t.startsWith 'float'
+ parser = op.toFloat
+ if t.startsWith 'boolean'
+ parser = op.toBool
+ if t.startsWith 'object' or t.startsWith 'array'
+ parser = op.toObject
+ if t.startsWith 'function'
+ parser = (fn) -> eval "(#fn)"
+
+ # TODO: handle 'or' by returning an array of parsers
+ parser
+
+
+ getValue: ->
+ @getParser() @get 'value'
+
+ setValue: (v, options) ->
+ def = @get 'default'
+ if not v and def == null
+ val = null
+ else
+ val = @getParser()(v)
+ @set 'value', val, options
+
+ clearValue: ->
+ @set 'value', @get('default')
+
+ isDefault: ->
+ @get('value') is @get('default')
+
+# }}}
+
+
+FieldList = exports.FieldList = Backbone.Collection.extend do # {{{
+ model : Field
+
+ /**
+ *
+ */
+ values: ->
+ _.synthesize do
+ @models.filter -> not it.isDefault()
+ -> [ it.get('name'), it.getValue() ]
+
+ # @reduce do
+ # (acc, field) ->
+ # k = field.get 'name'
+ # v = field.getValue()
+ # if k and not field.isDefault() and v?
+ # acc[k] = v
+ # acc
+ # {}
+
+# }}}
+
+
+### Views
+
+FieldView = exports.FieldView = Backbone.View.extend do # {{{
+ tagName : 'div'
+ className : 'field'
+
+ events :
+ 'blur .value' : 'update'
+ 'submit .value' : 'update'
+
+
+
+ initialize: ->
+ @$el.data { model:@model, view:this }
+ @model.on 'change', @render, this
+ @model.on 'destroy', @remove, this
+
+ update: ->
+ val = @$el.find('.value').val()
+ current = @model.get 'value'
+ return if val is current
+
+ console.log "#this.update( #current -> #val )"
+ @model.setValue val, {+silent}
+
+ render: ->
+ return @remove() if @model.get 'hidden'
+
+ name = @model.get 'name'
+ id = _.camelize name
+ label = _.humanize name
+ @$el.html """
+ <label class="name" for="#id">#label</label>
+ <input class="value" type="text" id="#id" name="#id">
+ """
+ # @$el.find '.value' .attr 'value', @model.get 'value'
+ @$el.find '.value' .val @model.get 'value'
+ this
+
+ remove: ->
+ @$el.remove()
+ this
+
+ clear: ->
+ @model.destroy()
+ this
+
+ toString: ->
+ "FieldView(#{@model.id})"
+
+# }}}
+
+
+# There are several special options that, if passed, will be attached directly to the view:
+# model, collection, el, id, className, tagName, attributes
+
+Scaffold = exports.Scaffold = Backbone.View.extend do # {{{
+ tagName : 'form'
+ className : 'scaffold'
+
+ collectionType : FieldList
+ subviewType : FieldView
+
+
+ initialize: ->
+ _.bindAll this, 'addOne', 'addAll'
+ # @subviews = []
+
+ CollectionType = @collectionType
+ @collection or= new CollectionType
+ @collection.on 'add', @addOne
+ @collection.on 'reset', @addAll
+ # @collection.on 'all', @render
+
+ @$el.addClass @className
+ .data { model:@collection, view:this }
+ .attr { action:'/save', method:'get' }
+
+
+ addOne: (field) ->
+ SubviewType = @subviewType
+ view = new SubviewType model:field
+ # @subviews.push view
+ @$el.append view.render().el
+ view
+
+ addAll: ->
+ # _.invoke @subviews, 'remove'
+ # @subviews = []
+ @collection.each @addOne
+ this
+
+# }}}
+
+
- name: width
type: Integer
default: 480
- color-cycle
- multi-scale
- value-axis-formatters
+
- name: height
type: Integer
default: 320
- color-cycle
- multi-scale
- value-axis-formatters
+
- name: annotationClickHandler
type: function(annotation, point, dygraph, event)
default: null
- handler
examples:
- annotation
+
- name: annotationDblClickHandler
type: function(annotation, point, dygraph, event)
default: null
- handler
examples:
- annotation
+
- name: annotationMouseOutHandler
type: function(annotation, point, dygraph, event)
default: null
- handler
examples:
- annotation
+
- name: annotationMouseOverHandler
type: function(annotation, point, dygraph, event)
default: null
- handler
examples:
- annotation
+
- name: displayAnnotations
type: Boolean
default: false
- annotations
examples:
- annotation-gviz
+
- name: avoidMinZero
type: Boolean
default: false
- axes
examples:
- avoidMinZero
+
- name: axis
type: String or Object
default: null
- steps
- two-axes-vr
- value-axis-formatters
+
- name: axisLabelColor
type: String
default: black
category: Axes
tags:
- axes
+
- name: axisLabelFontSize
type: Integer
default: 14
category: Axes
tags:
- axes
+
- name: axisLabelFormatter
type: function(number or Date, granularity, opts, dygraph)
- default: Depends on the data type
+ 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,
- x-axis-formatter
- y-axis-formatter
- value-axis-formatters
+
- name: axisLabelWidth
type: Integer
default: 50
tags:
- axes
- labels
+
- name: axisLineColor
type: String
default: black
- axes
examples:
- demo
+
- name: axisLineWidth
type: Float
default: 0.3
category: Axes
tags:
- axes
+
- name: axisTickSize
type: Number
default: '3.0'
category: Axes
tags:
- axes
+
- name: dateWindow
type: Array of two Dates or numbers
- default: Full range of the input is shown
+ 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.
+ must also be numbers. By default, the full range of the input is shown.
category: Axes
tags:
- axes
- link-interaction
- synchronize
- zoom
+
- name: drawXAxis
type: Boolean
default: true
- axes
examples:
- unboxed-spark
+
- name: drawYAxis
type: Boolean
default: true
examples:
- drawing
- unboxed-spark
+
- name: includeZero
type: Boolean
default: false
- no-range
- numeric-gviz
- small-range-zero
+
- name: logscale
type: Boolean
default: false
examples:
- logscale
- stock
+
- name: panEdgeFraction
type: Float
default: null
- interactive elements
examples:
- zoom
+
- name: pixelsPerLabel
type: Integer
- default: 60 (x-axis) or 30 (y-axes)
+ 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.
+ axis with fewer ticks. This is set on a per-axis basis. By default, values are 60 (x-axis) or 30 (y-axes).
category: Axes
tags:
- axes
- grid
examples:
- value-axis-formatters
+
- name: ticker
type: "function(min, max, pixels, opts, dygraph, vals) -> [{v: ..., label: ...}, ...]"
- default: Dygraph.dateTicker or Dygraph.numericTicks
+ 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. See dygraph-tickers.js for an extensive discussion. This is set on a per-axis basis.
+ 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.
category: Axes
tags:
- axes
+
- name: valueRange
type: Array of two numbers
- default: Full range of the input is shown
+ 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.
+ basis to define each y-axis separately. By default, the full range of the input is shown.
category: Axes
tags:
- axes
- synchronize
- zoom
- two-axes-vr
+
- name: xAxisHeight
type: Integer
default: null
category: Axes
tags:
- axes
+
- name: xAxisLabelWidth
type: Integer
default: 50
examples:
- x-axis-formatter
- value-axis-formatters
+
- name: yAxisLabelWidth
type: Integer
default: 50
- multi-scale
- two-axes-vr
- value-axis-formatters
+
- name: delimiter
type: String
default: ','
category: CSV parsing
tags:
- csv parsing
+
- name: xValueParser
type: function(str) -> number
- default: parseFloat() or Date.parse()*
+ 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
category: CSV parsing
tags:
- csv parsing
+
- name: clickCallback
type: function(e, x, points)
default: null
- callbacks
examples:
- callback
+
- name: drawCallback
type: function(dygraph, is_initial)
default: null
- is-zoomed-ignore-programmatic-zoom
- synchronize
- zoom
+
- name: highlightCallback
type: function(event, x, points,row)
default: null
examples:
- callback
- crosshair
+
- name: underlayCallback
type: function(canvas, area, dygraph)
default: null
- linear-regression-fractions
- linear-regression
- underlay-callback
+
- name: unhighlightCallback
type: function(event)
default: null
examples:
- callback
- crosshair
+
- name: zoomCallback
type: function(minDate, maxDate, yRanges)
default: null
- callback
- is-zoomed-ignore-programmatic-zoom
- zoom
+
- name: title
type: String
default: null
- multi-scale
- range-selector
- temperature-sf-ny
+
- name: titleHeight
type: Integer
default: 18
- chart labels
examples:
- styled-chart-labels
+
- name: xLabelHeight
type: Integer
default: 18
category: Chart labels
tags:
- chart labels
+
- name: xlabel
type: String
default: null
- demo
- styled-chart-labels
- multi-scale
+
- name: y2label
type: String
default: null
examples:
- two-axes
- two-axes-vr
+
- name: yLabelWidth
type: Integer
default: 18
category: Chart labels
tags:
- chart labels
+
- name: ylabel
type: String
default: null
- range-selector
- temperature-sf-ny
- two-axes-vr
+
- name: file
type: String (URL of CSV or CSV), GViz DataTable or 2D Array
- default: (set when constructed)
+ 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.
examples:
- drawing
- dygraph-many-points-benchmark
+
- name: connectSeparatedPoints
type: Boolean
default: false
examples:
- connect-separated
- independent-series
+
- name: drawPoints
type: Boolean
default: false
- linear-regression-fractions
- linear-regression
- per-series
+
- name: fillGraph
type: Boolean
default: false
- fillGraph
- two-axes
- steps
+
- name: pointSize
type: Integer
default: 1
- data line display
examples:
- per-series
+
- name: stackedGraph
type: Boolean
default: false
- data line display
examples:
- stacked
+
- name: stepPlot
type: Boolean
default: false
- avoidMinZero
- steps
- y-axis-formatter
+
- name: strokePattern
type: Array
default: null
- data line display
examples:
- per-series
+
- name: strokeWidth
type: Integer
default: 1
- per-series
- unboxed-spark
- styled-chart-labels
+
- name: visibility
type: Array of booleans
default: true
- color-visibility
- no-visibility
- visibility
+
- name: colorSaturation
type: Float (0.0 - 1.0)
default: 1.0
category: Data Series Colors
tags:
- data series colors
+
- name: colorValue
type: Float (0.0 - 1.0)
default: 1.0
category: Data Series Colors
tags:
- data series colors
+
- name: colors
type: Array
- default: (see description)
+ 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.
category: Data Series Colors
- demo
- reverse-y-axis
- color-cycle
+
- name: fillAlpha
type: Float (0.0 - 1.0)
default: 0.15
tags:
- data series colors
- error bars
+
- name: timingName
type: String
default: null
- debugging
examples:
- dygraph-many-points-benchmark
+
- name: pixelsPerXLabel
type: Integer
- default: (missing)
+ default: null
desc: 'Prefer axes { x: { pixelsPerLabel } }'
category: Deprecated
tags:
- deprecated
+
- name: pixelsPerYLabel
type: Integer
- default: (missing)
+ default: null
desc: 'Prefer axes: { y: { pixelsPerLabel } }'
category: Deprecated
tags:
- deprecated
examples:
- spacing
+
- name: xAxisLabelFormatter
- type: (missing)
- default: (missing)
+ type: function
+ default: null
desc: 'Prefer axes { x: { axisLabelFormatter } }'
category: Deprecated
tags:
- deprecated
+
- name: xValueFormatter
- type: (missing)
- default: (missing)
+ type: function
+ default: null
desc: 'Prefer axes: { x: { valueFormatter } }'
category: Deprecated
tags:
- deprecated
+
- name: yAxisLabelFormatter
- type: (missing)
- default: (missing)
+ type: function
+ default: null
desc: 'Prefer axes: { y: { axisLabelFormatter } }'
category: Deprecated
tags:
- deprecated
+
- name: yValueFormatter
- type: (missing)
- default: (missing)
+ type: function
+ default: null
desc: 'Prefer axes: { y: { valueFormatter } }'
category: Deprecated
tags:
examples:
- labelsKMB
- multi-scale
+
- name: customBars
type: Boolean
default: false
- stock
- range-selector
- temperature-sf-ny
+
- name: errorBars
type: Boolean
default: false
- underlay-callback
- visibility
- zoom
+
- name: fractions
type: Boolean
default: false
examples:
- fractions
- linear-regression-fractions
+
- name: sigma
type: Float
default: 2.0
category: Error Bars
tags:
- error bars
+
- name: wilsonInterval
type: Boolean
default: true
category: Error Bars
tags:
- error bars
+
- name: drawXGrid
type: Boolean
default: true
examples:
- demo
- unboxed-spark
+
- name: drawYGrid
type: Boolean
default: true
examples:
- drawing
- unboxed-spark
+
- name: gridLineColor
- type: red, blue
+ type: String
default: rgb(128,128,128)
- desc: The color of the gridlines.
+ desc: The color of the gridlines. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow".
category: Grid
tags:
- grid
examples:
- drawing
- grid_dot
+
- name: gridLineWidth
type: Float
default: 0.3
category: Grid
tags:
- grid
+
- name: animatedZooms
type: Boolean
default: false
examples:
- highlighted-region
- link-interaction
+
- name: highlightCircleSize
type: Integer
default: 3
- grid_dot
- per-series
- unboxed-spark
+
- name: interactionModel
+ hidden: true
type: Object
- default: '...'
+ default: null
desc: 'TODO(konigsberg): document this'
category: Interactive Elements
tags:
examples:
- drawing
- interaction
+
- name: pointClickCallback
type: function(e, point)
default: null
examples:
- annotation
- callback
+
- name: rangeSelectorHeight
type: Integer
default: 40
- interactive elements
examples:
- range-selector
+
- name: rangeSelectorPlotFillColor
type: String
default: '#A7B1C4'
- interactive elements
examples:
- range-selector
+
- name: rangeSelectorPlotStrokeColor
type: String
default: '#808FAB'
- interactive elements
examples:
- range-selector
+
- name: showRangeSelector
type: Boolean
default: false
- interactive elements
examples:
- range-selector
+
- name: hideOverlayOnMouseOut
type: Boolean
default: true
- interactive elements
examples:
- gviz-selection
+
- name: labels
type: Array
- default: '["X", "Y1", "Y2", ...]*'
+ 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.
+ default values are supplied and a warning is logged. By default, labels roughly follow
+ ["X", "Y1", "Y2", ...]*
category: Legend
tags:
- legend
- multi-scale
- two-axes-vr
- value-axis-formatters
+
- name: labelsDiv
type: DOM element or string
default: null
- label-div
- reverse-y-axis
- unboxed-spark
+
- name: labelsDivStyles
- type: '{}'
+ 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.'
- styled-chart-labels
- range-selector
- temperature-sf-ny
+
- name: labelsDivWidth
type: Integer
default: 250
examples:
- customLabel
- noise
+
- name: labelsSeparateLines
type: Boolean
default: false
- customLabel
- demo
- reverse-y-axis
+
- name: labelsShowZeroValues
type: Boolean
default: true
- legend
examples:
- label-div
+
- name: legend
type: String
default: onmouseover
- multi-scale
- range-selector
- temperature-sf-ny
+
- name: showLabelsOnHighlight
type: Boolean
default: true
- interactive elements
examples:
- callback
+
- name: rightGap
type: Integer
default: 5
category: Overall display
tags:
- overall display
+
- name: rollPeriod
type: Integer >= 1
default: 1
- visibility
- range-selector
- temperature-sf-ny
+
- name: showRoller
type: Boolean
default: false
- underlay-callback
- range-selector
- temperature-sf-ny
+
- name: digitsAfterDecimal
type: Integer
default: 2
- value display/formatting
examples:
- number-display
+
- name: labelsKMB
type: Boolean
default: false
- two-axes
- reverse-y-axis
- two-axes-vr
+
- name: labelsKMG2
type: Boolean
default: false
- value display/formatting
examples:
- labelsKMB
+
- name: maxNumberWidth
type: Integer
default: 6
- value display/formatting
examples:
- number-display
+
- name: sigFigs
type: Integer
default: null
- value display/formatting
examples:
- number-display
+
- name: valueFormatter
type: function(num or millis, opts, dygraph)
- default: Depends on the type of your data.
+ 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')).
+ 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.
category: Value display/formatting
tags:
- value display/formatting
examples:
- y-axis-formatter
- value-axis-formatters
+
- name: isZoomedIgnoreProgrammaticZoom
type: Boolean
default: false
-[{"category": "Overall display", "name": "width", "tags": ["overall display"], "default": 480, "examples": ["linear-regression-addseries", "annotation", "century-scale", "color-visibility", "daylight-savings", "demo", "drawing", "independent-series", "link-interaction", "linear-regression-fractions", "linear-regression", "no-range", "small-range-zero", "reverse-y-axis", "color-cycle", "multi-scale", "value-axis-formatters"], "type": "Integer", "desc": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."}, {"category": "Overall display", "name": "height", "tags": ["overall display"], "default": 320, "examples": ["annotation", "century-scale", "color-visibility", "demo", "drawing", "link-interaction", "no-range", "small-range-zero", "reverse-y-axis", "color-cycle", "multi-scale", "value-axis-formatters"], "type": "Integer", "desc": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."}, {"category": "Annotations", "name": "annotationClickHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user clicks on an annotation."}, {"category": "Annotations", "name": "annotationDblClickHandler", "tags": ["annotations", "handler"], "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."}, {"category": "Annotations", "name": "annotationMouseOutHandler", "tags": ["annotations", "handler"], "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."}, {"category": "Annotations", "name": "annotationMouseOverHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user mouses over an annotation."}, {"category": "Annotations", "name": "displayAnnotations", "tags": ["annotations"], "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."}, {"category": "Axes", "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."}, {"category": "Axes", "name": "axis", "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."}, {"category": "Axes", "name": "axisLabelColor", "tags": ["axes"], "default": "black", "type": "String", "desc": "Color for x- and y-axis labels. This is a CSS color string."}, {"category": "Axes", "name": "axisLabelFontSize", "tags": ["axes"], "default": 14, "type": "Integer", "desc": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."}, {"category": "Axes", "name": "axisLabelFormatter", "tags": ["axes"], "default": "Depends on the data type", "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')."}, {"category": "Axes", "name": "axisLabelWidth", "tags": ["axes", "labels"], "default": 50, "type": "Integer", "desc": "Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls"}, {"category": "Axes", "name": "axisLineColor", "tags": ["axes"], "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)'."}, {"category": "Axes", "name": "axisLineWidth", "tags": ["axes"], "default": 0.3, "type": "Float", "desc": "Thickness (in pixels) of the x- and y-axis lines."}, {"category": "Axes", "name": "axisTickSize", "tags": ["axes"], "default": "3.0", "type": "Number", "desc": "The size of the line to display next to each tick mark on x- or y-axes."}, {"category": "Axes", "name": "dateWindow", "tags": ["axes"], "default": "Full range of the input is shown", "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."}, {"category": "Axes", "name": "drawXAxis", "tags": ["axes"], "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."}, {"category": "Axes", "name": "drawYAxis", "tags": ["axes"], "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."}, {"category": "Axes", "name": "includeZero", "tags": ["axes"], "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"}, {"category": "Axes", "name": "logscale", "tags": ["axes"], "default": false, "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."}, {"category": "Axes", "name": "panEdgeFraction", "tags": ["axes", "interactive elements"], "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."}, {"category": "Axes", "name": "pixelsPerLabel", "tags": ["axes", "grid"], "default": "60 (x-axis) or 30 (y-axes)", "examples": ["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."}, {"category": "Axes", "name": "ticker", "tags": ["axes"], "default": "Dygraph.dateTicker or Dygraph.numericTicks", "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. See dygraph-tickers.js for an extensive discussion. This is set on a per-axis basis."}, {"category": "Axes", "name": "valueRange", "tags": ["axes"], "default": "Full range of the input is shown", "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."}, {"category": "Axes", "name": "xAxisHeight", "tags": ["axes"], "default": null, "type": "Integer", "desc": "Height, in pixels, of the x-axis. If not set explicitly, this is computed based on axisLabelFontSize and axisTickSize."}, {"category": "Axes", "name": "xAxisLabelWidth", "tags": ["axes"], "default": 50, "examples": ["x-axis-formatter", "value-axis-formatters"], "type": "Integer", "desc": "Width, in pixels, of the x-axis labels."}, {"category": "Axes", "name": "yAxisLabelWidth", "tags": ["axes"], "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."}, {"category": "CSV parsing", "name": "delimiter", "tags": ["csv parsing"], "default": ",", "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."}, {"category": "CSV parsing", "name": "xValueParser", "tags": ["csv parsing"], "default": "parseFloat() or Date.parse()*", "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."}, {"category": "Callbacks", "name": "clickCallback", "tags": ["callbacks"], "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"}, {"category": "Callbacks", "name": "drawCallback", "tags": ["callbacks"], "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."}, {"category": "Callbacks", "name": "highlightCallback", "tags": ["callbacks"], "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}, ... ]"}, {"category": "Callbacks", "name": "underlayCallback", "tags": ["callbacks"], "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."}, {"category": "Callbacks", "name": "unhighlightCallback", "tags": ["callbacks"], "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."}, {"category": "Callbacks", "name": "zoomCallback", "tags": ["callbacks"], "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."}, {"category": "Chart labels", "name": "title", "tags": ["chart labels"], "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."}, {"category": "Chart labels", "name": "titleHeight", "tags": ["chart labels"], "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."}, {"category": "Chart labels", "name": "xLabelHeight", "tags": ["chart labels"], "default": 18, "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."}, {"category": "Chart labels", "name": "xlabel", "tags": ["chart labels"], "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."}, {"category": "Chart labels", "name": "y2label", "tags": ["chart labels"], "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."}, {"category": "Chart labels", "name": "yLabelWidth", "tags": ["chart labels"], "default": 18, "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."}, {"category": "Chart labels", "name": "ylabel", "tags": ["chart labels"], "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."}, {"category": "Data", "name": "file", "tags": ["data"], "default": "(set when constructed)", "examples": ["drawing", "dygraph-many-points-benchmark"], "type": "String (URL of CSV or CSV), GViz DataTable or 2D Array", "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."}, {"category": "Data Line display", "name": "connectSeparatedPoints", "tags": ["data line display"], "default": false, "examples": ["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."}, {"category": "Data Line display", "name": "drawPoints", "tags": ["data line display"], "default": false, "examples": ["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."}, {"category": "Data Line display", "name": "fillGraph", "tags": ["data line 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."}, {"category": "Data Line display", "name": "pointSize", "tags": ["data line display"], "default": 1, "examples": ["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."}, {"category": "Data Line display", "name": "stackedGraph", "tags": ["data line display"], "default": false, "examples": ["stacked"], "type": "Boolean", "desc": "If set, stack series on top of one another rather than drawing them independently."}, {"category": "Data Line display", "name": "stepPlot", "tags": ["data line 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."}, {"category": "Data Line display", "name": "strokePattern", "tags": ["data line 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."}, {"category": "Data Line display", "name": "strokeWidth", "tags": ["data line 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."}, {"category": "Data Line display", "name": "visibility", "tags": ["data line 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."}, {"category": "Data Series Colors", "name": "colorSaturation", "tags": ["data series colors"], "default": 1.0, "type": "Float (0.0 - 1.0)", "desc": "If colors is not specified, saturation of the automatically-generated data series colors."}, {"category": "Data Series Colors", "name": "colorValue", "tags": ["data series colors"], "default": 1.0, "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)"}, {"category": "Data Series Colors", "name": "colors", "tags": ["data series colors"], "default": "(see description)", "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."}, {"category": "Data Series Colors", "name": "fillAlpha", "tags": ["data series colors", "error bars"], "default": 0.15, "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."}, {"category": "Debugging", "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."}, {"category": "Deprecated", "name": "pixelsPerXLabel", "tags": ["deprecated"], "default": "(missing)", "type": "Integer", "desc": "Prefer axes { x: { pixelsPerLabel } }"}, {"category": "Deprecated", "name": "pixelsPerYLabel", "tags": ["deprecated"], "default": "(missing)", "examples": ["spacing"], "type": "Integer", "desc": "Prefer axes: { y: { pixelsPerLabel } }"}, {"category": "Deprecated", "name": "xAxisLabelFormatter", "tags": ["deprecated"], "default": "(missing)", "type": "(missing)", "desc": "Prefer axes { x: { axisLabelFormatter } }"}, {"category": "Deprecated", "name": "xValueFormatter", "tags": ["deprecated"], "default": "(missing)", "type": "(missing)", "desc": "Prefer axes: { x: { valueFormatter } }"}, {"category": "Deprecated", "name": "yAxisLabelFormatter", "tags": ["deprecated"], "default": "(missing)", "type": "(missing)", "desc": "Prefer axes: { y: { axisLabelFormatter } }"}, {"category": "Deprecated", "name": "yValueFormatter", "tags": ["deprecated"], "default": "(missing)", "examples": ["labelsKMB", "multi-scale"], "type": "(missing)", "desc": "Prefer axes: { y: { valueFormatter } }"}, {"category": "Error Bars", "name": "customBars", "tags": ["error bar", "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."}, {"category": "Error Bars", "name": "errorBars", "tags": ["error bars", "bars", "csv parsing", "csv", "parsing"], "default": false, "examples": ["callback", "crosshair", "custom-bars", "customLabel", "draw-points", "fillGraph", "fractions", "grid_dot", "interaction", "is-zoomed-ignore-programmatic-zoom", "link-interaction", "linear-regression-fractions", "missing-data", "resize", "no-visibility", "noise", "numeric-gviz", "perf", "steps", "synchronize", "underlay-callback", "visibility", "zoom"], "type": "Boolean", "desc": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."}, {"category": "Error Bars", "name": "fractions", "tags": ["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)."}, {"category": "Error Bars", "name": "sigma", "tags": ["error bars"], "default": 2.0, "type": "Float", "desc": "When errorBars is set, shade this many standard deviations above/below each point."}, {"category": "Error Bars", "name": "wilsonInterval", "tags": ["error bars"], "default": true, "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."}, {"category": "Grid", "name": "drawXGrid", "tags": ["grid"], "default": true, "examples": ["demo", "unboxed-spark"], "type": "Boolean", "desc": "Whether to display vertical gridlines under the chart."}, {"category": "Grid", "name": "drawYGrid", "tags": ["grid"], "default": true, "examples": ["drawing", "unboxed-spark"], "type": "Boolean", "desc": "Whether to display horizontal gridlines under the chart."}, {"category": "Grid", "name": "gridLineColor", "tags": ["grid"], "default": "rgb(128,128,128)", "examples": ["drawing", "grid_dot"], "type": "red, blue", "desc": "The color of the gridlines."}, {"category": "Grid", "name": "gridLineWidth", "tags": ["grid"], "default": 0.3, "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."}, {"category": "Interactive Elements", "name": "animatedZooms", "tags": ["interactive elements"], "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."}, {"category": "Interactive Elements", "name": "highlightCircleSize", "tags": ["interactive elements"], "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."}, {"category": "Interactive Elements", "name": "interactionModel", "tags": ["interactive elements"], "default": "...", "examples": ["drawing", "interaction"], "type": "Object", "desc": "TODO(konigsberg): document this"}, {"category": "Interactive Elements", "name": "pointClickCallback", "tags": ["interactive elements", "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"}, {"category": "Interactive Elements", "name": "rangeSelectorHeight", "tags": ["interactive elements"], "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."}, {"category": "Interactive Elements", "name": "rangeSelectorPlotFillColor", "tags": ["interactive elements"], "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."}, {"category": "Interactive Elements", "name": "rangeSelectorPlotStrokeColor", "tags": ["interactive elements"], "default": "#808FAB", "examples": ["range-selector"], "type": "String", "desc": "The range selec
projects / kraken-ui.git / commitdiff