top: 0px;
border-left: 2px solid rgb(229, 236, 249);
padding-left: 10px;
+ margin-left: 0px;
}
#nav ul {
list-style: none;
padding-left: 20px;
+ margin-left: 0px;
}
#nav ul ul {
- padding-left: 1em;
+ padding-left: 0.5em;
padding-bottom: 1em;
}
#nav ul ul li {
<li><a href="tests/gviz.html">GViz Demo</a>
<li><a href="tests/plotter.html">Equation Plotter</a>
<li><a href="tests/perf.html">Performance Test</a>
+ <li><a href="tests/perf.html">Fractions</a>
<li><a href="tests/label-div.html">Labels in a DIV</a>
<li><a href="tests/numeric-axis.html">Numeric Axis</a>
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
- "2008-05-09,80\n",
+ "2008-05-09,80\n"
);
</script>
</body>
</pre>
</td><td valign=top>
<div id="graphdiv"></div>
- <script type="text/javascript">
- g = new Dygraph(
- document.getElementById("graphdiv"), // containing div
- "Date,Temperature\n" + // CSV or path to a CSV file.
- "2008-05-07,75\n" +
- "2008-05-08,70\n" +
- "2008-05-09,80\n"
- );
- </script>
</td></tr></table>
+<script type="text/javascript">
+ g1 = new Dygraph(
+ document.getElementById("graphdiv"), // containing div
+ "Date,Temperature\n" + // CSV or path to a CSV file.
+ "2008-05-07,75\n" +
+ "2008-05-08,70\n" +
+ "2008-05-09,80\n"
+ );
+</script>
+
<p>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.</p>
<p>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 <code>"file:///"</code>. Here's an example: (data from <a href="http://www.wunderground.com/history/airport/KNUQ/2007/1/1/CustomHistory.html?dayend=31&monthend=12&yearend=2007&req_city=NA&req_state=NA&req_statename=NA">Weather Underground</a>)</p>
</pre>
</td><td valign=top>
<div id="graphdiv2" style="width:500px; height:300px;"></div>
- <script type="text/javascript">
- g2 = new Dygraph(
- document.getElementById("graphdiv2"),
- "temperatures.csv", {}
- );
- </script>
</td></tr></table>
+<script type="text/javascript">
+ g2 = new Dygraph(
+ document.getElementById("graphdiv2"),
+ "temperatures.csv", {}
+ );
+</script>
+
<p>Click <a href="temperatures.csv">here</a> to view the <code>temperatures.csv</code> file. There are a few things to note here:</p>
<ul>
</pre>
</td><td valign=top>
<div id="graphdiv3" style="width:500px; height:300px;"></div>
- <script type="text/javascript">
- g3 = new Dygraph(
- document.getElementById("graphdiv3"),
- "temperatures.csv",
- { rollPeriod: 7,
- showRoller: true,
- }
- );
- </script>
</td></tr></table>
+<script type="text/javascript">
+ g3 = new Dygraph(
+ document.getElementById("graphdiv3"),
+ "temperatures.csv",
+ { rollPeriod: 7,
+ showRoller: true });
+</script>
+
<p>A rolling average can be set using the text box in the lower left-hand corner of the graph (the showRoller attribute is what makes this appear). Also note that we've explicitly set the size of the chart div.</p>
<h2>Error Bars</h2>
</pre>
</td><td valign=top>
<div id="graphdiv4" style="width:600px; height:300px;"></div>
- <script type="text/javascript">
+</td></tr></table>
+
+<script type="text/javascript">
$ = document.getElementById;
new Dygraph(
document.getElementById("graphdiv4"),
valueRange: [50, 125]
}
);
- </script>
-</td></tr></table>
+</script>
<p>Things to note here:</p>
<ul>
{
showRoller: true,
customBars: true,
- labelsKMB: true,
- padding: {left:30, right:30, top:5, bottom:5}
- });
+ labelsKMB: true });
</script>
<!--
</tr>
</table>
-<p>Any options you specify also get passed on to PlotKit's <a href="http://media.liquidx.net/js/plotkit-doc/PlotKit.Renderer.html">Renderer</a> class. dygraphs will override some of these (e.g. strokeColor), but others may be useful. The <code>padding</code> property is an example of this.</p>
-
<h2>Common Gotchas</h2>
<p>Here are a few problems that I've frequently run into while using the
dygraphs library.</p>
<li>Don't set the <code>dateWindow</code> property to a date. It expects
milliseconds since epoch, which can be obtained from a JavaScript Date
object's valueOf method.</li>
+
+ <li>Make sure you don't have any trailing commas in your call to the Dygraph
+ constructor or in the options parameter. Firefox, Chrome and Safari ignore
+ these but they can cause a graph to not display in Internet Explorer.</li>
</ul>
<a name="policy">
projects / dygraphs.git / blobdiff