There are five types of input that dygraphs will accept:
These are all discussed below. If you're trying to debug why your input @@ -46,7 +49,7 @@
-Here's an example of what CSV data should look like:
Date,Series1,Series2
@@ -226,7 +229,7 @@
a rolling period, the three values will all be averaged independently.
- URL
+ URL
If you pass in a URL, dygraphs will issue an XMLHttpRequest for it and
attempt to parse the returned data as CSV.
@@ -237,7 +240,7 @@
the URL yourself.
- Array (native format)
+ Array (native format)
If you'll be constructing your data set from a server-side program (or
from JavaScript) then you're better off producing an array than CSV data.
This saves the cost of parsing the CSV data and also avoids common parser
@@ -247,22 +250,72 @@
a JS debugger) and that the data format is a bit less clear for values with
uncertainties.
+ Here's an example of "native format":
- Array
- - disclaimers
- - Dates on the x-axis
- - how to specify fractions
- - how to specify missing data
- - how to specify value + std. dev.
- - how to specify [low, middle, high]
+
+ new Dygraph(document.getElementById("graphdiv2"),
+ [
+ [1,10,100],
+ [2,20,80],
+ [3,50,60],
+ [4,70,80]
+ ],
+ {
+ labels: [ "x", "A", "B" ]
+ });
+
- Functions
- - make sure they work as expected:
- function() { return x; }
- is identical as a source to "x".
+ Headers
+ Headers for native format must be specified via the labels
+ option. There's no other way to set them.
+
+ x-values
+ If you want your x-values to be dates, you'll need to use specify a Date
+ object in the first column. Otherwise, specify a number. Here's a sample
+ array with dates on the x-axis:
- DataTable
- - Links to relevant gviz docs
+
+ [
+ [ new Date("2009/07/12"), 100, 200 ],
+ [ new Date("2009/07/19"), 150, 220 ]
+ ]
+
+
+ y-values
+ You can specify errorBars, fractions or customBars
+ with the array format. If you specify any of these, the values become arrays
+ (rather than numbers). Here's what the format looks like for each one:
+
+
+ errorBars: [x, [value1, std1], [value2, std2], ...]
+ fractions: [x, [num1, den1], [num2, den2], ...]
+ customBars: [x, [low1, val1, high1], [low2, val2, high2], ...]
+
+
+ To specify missing data, set the value to null. You may not set a value
+ inside an array to null. Use null instead of the entire array.
+
+ Functions
+
+ You can specify a function that returns any of the other types. If
+ x is a valid piece of dygraphs input, then so is
+
+
+ function() { return x; }
+
+
+ DataTable
+ You can also specify a Google Visualization Library DataTable
+ object as your input data. This lets you easily switch between dygraphs and
+ other gviz visualizations such as the Annotated Timeline. It also lets you
+ embed a Dygraph in a Google Spreadsheet.
+
+ You'll need to set your first column's type to one of "number", "date"
+ or "datetime".
+
+
+ DataTable TODO:
- When to use Dygraph.GvizWrapper
- how to specify fractions
- how to specify missing data
@@ -270,6 +323,7 @@
- how to specify [low, middle, high]
- walkthrough of embedding a gadget in google docs/on a web page
- walkthrough of using std. dev. in a spreadsheet chart
+