| | 1 | [](https://travis-ci.org/danvk/dygraphs) [](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 |
projects / dygraphs.git / blame_incremental