Document the value of `this`.
[dygraphs.git] / docs / index.html
1 <!--#include virtual="header.html" -->
2
3 <style>
4 pre.prettyprint {
5 margin-top: 28px;
6 }
7 </style>
8
9 <h4>dygraphs is a fast, flexible open source JavaScript charting library.</h4>
10 <p>It allows users to explore and interpret dense data sets. Here's how it works:</p>
11
12 <div class="row">
13 <div class="col-lg-4">
14 <b>This JavaScript&hellip;</b>
15 <pre class="prettyprint">new Dygraph(div, "ny-vs-sf.txt", {
16 legend: 'always',
17 title: 'NYC vs. SF',
18 showRoller: true,
19 rollPeriod: 14,
20 customBars: true,
21 ylabel: 'Temperature (F)',
22 });</pre>
23 </div>
24 <div class="col-lg-8">
25 <b>&hellip;makes this chart!</b>
26 <div id="demodiv"></div>
27 </div>
28 </div>
29
30
31 <script type="text/javascript">
32 g = new Dygraph(
33 document.getElementById("demodiv"),
34 "ny-vs-sf.txt",
35 {
36 rollPeriod: 14,
37 showRoller: true,
38 customBars: true,
39 title: 'NYC vs. SF',
40 ylabel: 'Temperature (F)',
41 legend: 'always'
42 }
43 );
44 </script>
45
46 <p>The chart is <i>interactive</i>: you can mouse over to highlight individual values. You can click and drag to zoom. Double-clicking will zoom you back out. Shift-drag will pan. You can change the number and hit enter to adjust the averaging period.</p>
47
48 <div class="row smalltop">
49 <div class="col-lg-8">
50 <h3>Features</h3>
51 <ul>
52 <li>Handles <strong>huge data sets</strong>: dygraphs plots millions of points without getting bogged down.
53 <li><strong>Interactive out of the box</strong>: zoom, pan and mouseover are on by default.
54 <li>Strong support for <strong>error bars</strong> / confidence intervals.
55 <li><strong>Highly customizable</strong>: using options and custom callbacks, you can make dygraphs do almost anything.
56 <li>dygraphs is <strong>highly compatible</strong>: it works in all major browsers (including IE8). You can even <strong>pinch to zoom</strong> on mobile/tablet devices!
57 <li>There's an <strong>active community</strong> developing and supporting dygraphs.</li>
58 </ul>
59
60 <h3>Getting Started</h3>
61 <p>Start by <a href="download.html">downloading dygraphs</a>. Then read the <a href="tutorial.html">Tutorial</a> to learn how to use it, or just <a href="http://dygraphs.com/fiddle">play with dygraphs</a> on jsFiddle.</p>
62
63 <p>Once you've got your feet wet, look for inspiration in the <a href="gallery/">demo gallery</a> or check out our <a href="users.html">list of users</a>.</p>
64 </div>
65
66 <div class="col-lg-4">
67 <h3>Quick Links</h3>
68 <ul>
69 <li><a href="tutorial.html">Tutorial</a>
70 <li><a href="options.html">Options Reference</a>
71 <li><a href="jsdoc/symbols/Dygraph.html">API Reference</a>
72 <li><a href="css.html">CSS Reference</a>
73 <li><a href="data.html">Data format</a> documentation
74 <li><a href="http://stackoverflow.com/questions/ask?tags=dygraphs+javascript">Ask a Question</a> on Stack Overflow.</a>
75 <li><a href="https://groups.google.com/forum/#!forum/dygraphs-users">Mailing List</a>
76 <li><a href="http://blog.dygraphs.com/">dygraphs blog</a>
77 <li><a href="legal.html">Policy &amp; Licensing</a>
78 </ul>
79 </div>
80
81 </div>
82
83 <!--#include virtual="footer.html" -->