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