Merge pull request #541 from mjanda/master
[dygraphs.git] / docs / index.html
CommitLineData
14403441
DV
1<!--#include virtual="header.html" -->
2
3<style>
4pre.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>
15c966e0 23 </div>
14403441
DV
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)',
875e7b08 41 legend: 'always'
14403441
DV
42 }
43 );
44 </script>
fe57a69b 45
14403441 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>
68f9bed3 47
14403441
DV
48 <div class="row smalltop">
49 <div class="col-lg-8">
15c966e0 50 <h3>Features</h3>
15c966e0 51 <ul>
14403441
DV
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>
15c966e0 58 </ul>
68f9bed3 59
14403441
DV
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>
68f9bed3 62
14403441
DV
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>
15c966e0 65
14403441
DV
66 <div class="col-lg-4">
67 <h3>Quick Links</h3>
15c966e0 68 <ul>
14403441
DV
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>
15c966e0 78 </ul>
14403441 79 </div>
68f9bed3 80
15c966e0 81 </div>
14403441
DV
82
83<!--#include virtual="footer.html" -->