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" -->