X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=docs%2Findex.html;h=a2a2b5f91b2bc84fad41ec0a0ecc6096975a524e;hb=81856f70cb6840dbe476a90f99beb66118908687;hp=be7e3ca22464419e50ba06ec2898abc8f97e9170;hpb=f2cfa23b0bb9d33bda9a39036508fe60284a6451;p=dygraphs.git diff --git a/docs/index.html b/docs/index.html index be7e3ca..a2a2b5f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,24 +19,37 @@
In order to keep this example self-contained, the second parameter is raw CSV data. The dygraphs library parses this data (including column headers), resizes the its container to a reasonable default, calculates appropriate axis ranges and tick marks and draws the graph.
+In order to keep this example self-contained, the second parameter is raw CSV data. The dygraphs library parses this data (including column headers), resizes its container to a reasonable default, calculates appropriate axis ranges and tick marks and draws the graph.
In most applications, it makes more sense to include a CSV file instead. If the second parameter to the constructor doesn't contain a newline, it will be interpreted as the path to a CSV file. The Dygraph will perform an XMLHttpRequest to retrieve this file and display the data when it becomes available. Make sure your CSV file is readable and serving from a place that understands XMLHttpRequest's! In particular, you cannot specify a CSV file using "file:///"
. Here's an example: (data from Weather Underground)
The Google Visualization API provides a standard interface for describing data. Once you've specified your data using this API, you can plug in any GViz-compatible visualization. dygraphs is such a visualization.
+The Google + Visualization API provides a standard interface for describing data. + Once you've specified your data using this API, you can plug in any + GViz-compatible visualization. dygraphs is such a visualization. In + particular, it can be used as a drop-in replacement for the + AnnotatedTimeline visualization used on Google Finance and other sites. To + see how this works, check out the gviz + annotation demo.
For a simple demonstration of how to use dygraphs a GViz visualization, see http://danvk.org/dygraphs/tests/gviz.html. dygraphs can also be used as a GViz gadget. This allows it to be embedded inside of a Google Spreadsheet. For a demonstration of this, see this spreadsheet. The URL for the gadget is http://danvk.org/dygraphs/gadget.xml
.
+ It is possible to detect whether a chart has been zoomed in either axis by the use of the isZoomed
function.
+ If called with no argument, it will report whether either axis has been zoomed.
+ Alternatively it can be called with an argument of either 'x'
or 'y'
and it will report the status of just that axis.
+
Here's a simple example using drawCallback
to display the various zoom states whenever the chart is zoomed:
Zoomed: False
+Zoomed X: False
+Zoomed Y: False
++
+ new Dygraph( + + // containing div + document.getElementById("zoomdiv"), + + // CSV or path to a CSV file. + "Date,Temperature\n" + + "2011-01-07,75\n" + + "2011-01-08,70\n" + + "2011-01-09,90\n" + + "2011-01-10,30\n" + + "2011-01-11,40\n" + + "2011-01-12,60\n" + + "2011-01-13,70\n" + + "2011-01-14,40\n", + { + drawCallback: function(me, initial) { + document.getElementById("zoomed").innerHTML = "" + me.isZoomed(); + document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x"); + document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y"); + } + } + ); ++ + +
The Tests for zoom operations show a full example of this in action.
+This chart shows monthly closes of the Dow Jones Industrial Average, both in nominal and real (i.e. adjusted for inflation) dollars. The shaded areas show its monthly high and low. CPI values with a base from 1982-84 are used to adjust for inflation.
+Display: + + + + + + +
+