Interactive visualizations of time series using JavaScript and the HTML can...


Build Status Coverage Status

dygraphs JavaScript charting library

The dygraphs JavaScript library produces interactive, zoomable charts of time series:

Learn more about it at dygraphs.com.

Get help with dygraphs by browsing the  on [Stack Overflow][] (preferred) and [Google Groups][].


Plots time series without using an external server or Flash
Supports [error bands][] around data series
Interactive [pan and zoom][]
Displays values [on mouseover][]
Adjustable [averaging period][]
Extensive set of [options][] for customization.
Compatible with the [Google Visualization API][gviz]

Minimal Example

  1. ```html
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="dygraph.js"></script>
  5. <link rel="stylesheet" href="dygraph.css" />
  6. </head>
  7. <body>
  8. <div id="graphdiv"></div>
  9. <script type="text/javascript">
  10.   g = new Dygraph(
  11.         document.getElementById("graphdiv"),  // containing div
  12.         "Date,Temperature\n" +                // the data series
  13.         "2008-05-07,75\n" +
  14.         "2008-05-08,70\n" +
  15.         "2008-05-09,80\n",
  16.         { }                                   // the options
  17.       );
  18. </script>
  19. </body>
  20. </html>
  21. ```

Learn more by reading [the tutorial][] and seeing demonstrations of what
dygraphs can do in the [gallery][]. You can get dygraph.js and dygraph.css
from [cdnjs][] or [from NPM][npm] (see below).

Usage with a module loader

Get dygraphs from NPM:

    npm install dygraphs

You'll find pre-built JS & CSS files in node_modules/dygraphs/dist. If you're
using a module bundler like browserify or webpack, you can import dygraphs:

  1. ```js
  2. import Dygraph from 'dygraphs';
  3. // or: const Dygraph = require('dygraphs');

  4. const g = new Dygraph('graphdiv', data, { /* options */ });
  5. ```

Check out the [dygraphs-es6 repo][] for a fully-worked example.


To get going, clone the repo and run:

    npm install
    npm run build

Then open tests/demo.html in your browser.

Read more about the dygraphs development process in the developer guide.


dygraphs is available under the MIT license, included in LICENSE.txt.

[cdnjs]: https://cdnjs.com/libraries/dygraph
[the tutorial]: http://www.dygraphs.com/tutorial.html
[gallery]: http://www.dygraphs.com/gallery
[error bands]: http://dygraphs.com/tests/legend-values.html
[pan and zoom]: http://dygraphs.com/tests/link-interaction.html
[on mouseover]: http://dygraphs.com/tests/legend-values.html
[averaging period]: http://dygraphs.com/tests/temperature-sf-ny.html
[options]: http://www.dygraphs.com/options.html
[Stack Overflow]: http://stackoverflow.com/questions/tagged/dygraphs?sort=votes&pageSize=50
[Google Groups]: http://groups.google.com/group/dygraphs-users
[gviz]: http://dygraphs.com/data.html#datatable
[npm]: https://www.npmjs.com/package/dygraphs
[dygraphs-es6 repo]: https://github.com/danvk/dygraphs-es6