X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=inline;f=docs%2Fdata.html;h=dad79edd6d8881bfd8c727a5141956ebeb93c73e;hb=b5f3dd4ea60fc30192b8cc2f80e51dfea2029c18;hp=2a96e947bfa7d79a33625ace36a6d61f48261fb6;hpb=14c9d5bb3d2a2d2fd3a329003e43ae58ba4c784a;p=dygraphs.git diff --git a/docs/data.html b/docs/data.html index 2a96e94..dad79ed 100644 --- a/docs/data.html +++ b/docs/data.html @@ -2,8 +2,9 @@
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 +47,7 @@
-Here's an example of what CSV data should look like:
Date,Series1,Series2 @@ -226,7 +227,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 +238,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 +248,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 +321,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 +