From f10f06f52ba823d70ed7d03d71d1f59388760844 Mon Sep 17 00:00:00 2001 From: Dan Vanderkam Date: Mon, 19 Apr 2010 17:12:35 -0700 Subject: [PATCH] continue docs --- docs/data.html | 98 ++++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 75 insertions(+), 23 deletions(-) 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 @@ dygraphs input types @@ -23,11 +24,11 @@

There are five types of input that dygraphs will accept:

    -
  1. CSV data -
  2. URL -
  3. array (native format) -
  4. function -
  5. DataTable +
  6. CSV data +
  7. URL +
  8. array (native format) +
  9. function +
  10. DataTable

These are all discussed below. If you're trying to debug why your input @@ -46,7 +47,7 @@

-

CSV

+

CSV

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
+    

 
   
 
-- 
2.7.4