README.md

   1 [![Build Status](https://travis-ci.org/danvk/dygraphs.svg?branch=markdown-readme)](https://travis-ci.org/danvk/dygraphs) [![Coverage Status](https://img.shields.io/coveralls/danvk/dygraphs.svg)](https://coveralls.io/r/danvk/dygraphs)
   2 # dygraphs JavaScript charting library
   3
   4 The dygraphs JavaScript library produces interactive, zoomable charts of time series:
   5
   6 <img src="https://cloud.githubusercontent.com/assets/98301/5311286/eb760eea-7c10-11e4-9a59-1d144e51a15b.png" width="618" height="322">
   7
   8 Learn more about it at [dygraphs.com](http://www.dygraphs.com).
   9
  10 Get help with dygraphs by browsing the  on [Stack Overflow][] (preferred) and [Google Groups][].
  11
  12 ## Features
  13 * Plots time series without using an external server or Flash
  14 * Supports [error bands][] around data series
  15 * Interactive [pan and zoom][]
  16 * Displays values [on mouseover][]
  17 * Adjustable [averaging period][]
  18 * Extensive set of [options][] for customization.
  19 * Compatible with the [Google Visualization API][gviz]
  20
  21 ## Minimal Example
  22 ```html
  23 <html>
  24 <head>
  25 <script type="text/javascript" src="dygraph.js"></script>
  26 <link rel="stylesheet" href="dygraph.css" />
  27 </head>
  28 <body>
  29 <div id="graphdiv"></div>
  30 <script type="text/javascript">
  31   g = new Dygraph(
  32         document.getElementById("graphdiv"),  // containing div
  33         "Date,Temperature\n" +                // the data series
  34         "2008-05-07,75\n" +
  35         "2008-05-08,70\n" +
  36         "2008-05-09,80\n",
  37         { }                                   // the options
  38       );
  39 </script>
  40 </body>
  41 </html>
  42 ```
  43
  44 Learn more by reading [the tutorial][] and seeing demonstrations of what
  45 dygraphs can do in the [gallery][]. You can get `dygraph.js` and `dygraph.css`
  46 from [cdnjs][] or [from NPM][npm] (see below).
  47
  48 ## Usage with a module loader
  49
  50 Get dygraphs from NPM:
  51
  52     npm install dygraphs
  53
  54 You'll find pre-built JS & CSS files in `node_modules/dygraphs/dist`. If you're
  55 using a module bundler like browserify or webpack, you can import dygraphs:
  56
  57 ```js
  58 import Dygraph from 'dygraphs';
  59 // or: const Dygraph = require('dygraphs');
  60
  61 const g = new Dygraph('graphdiv', data, { /* options */ });
  62 ```
  63
  64 Check out the [dygraphs-es6 repo][] for a fully-worked example.
  65
  66 ## Development
  67
  68 To get going, clone the repo and run:
  69
  70     npm install
  71     npm run build
  72
  73 Then open `tests/demo.html` in your browser.
  74
  75 Read more about the dygraphs development process in the [developer guide](/DEVELOP.md).
  76
  77 ## License(s)
  78 dygraphs is available under the MIT license, included in LICENSE.txt.
  79
  80 [cdnjs]: https://cdnjs.com/libraries/dygraph
  81 [the tutorial]: http://www.dygraphs.com/tutorial.html
  82 [gallery]: http://www.dygraphs.com/gallery
  83 [error bands]: http://dygraphs.com/tests/legend-values.html
  84 [pan and zoom]: http://dygraphs.com/tests/link-interaction.html
  85 [on mouseover]: http://dygraphs.com/tests/legend-values.html
  86 [averaging period]: http://dygraphs.com/tests/temperature-sf-ny.html
  87 [options]: http://www.dygraphs.com/options.html
  88 [Stack Overflow]: http://stackoverflow.com/questions/tagged/dygraphs?sort=votes&pageSize=50
  89 [Google Groups]: http://groups.google.com/group/dygraphs-users
  90 [gviz]: http://dygraphs.com/data.html#datatable
  91 [npm]: https://www.npmjs.com/package/dygraphs
  92 [dygraphs-es6 repo]: https://github.com/danvk/dygraphs-es6