Commit | Line | Data |
---|---|---|
9f3f36f8 | 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) |
215e9e97 DV |
2 | # dygraphs JavaScript charting library |
3 | ||
4 | The dygraphs JavaScript library produces interactive, zoomable charts of time series: | |
5 | ||
067641c1 | 6 | <img src="https://cloud.githubusercontent.com/assets/98301/5311286/eb760eea-7c10-11e4-9a59-1d144e51a15b.png" width="618" height="322"> |
215e9e97 DV |
7 | |
8 | Learn more about it at [dygraphs.com](http://www.dygraphs.com). | |
9 | ||
87ba46ff | 10 | Get help with dygraphs by browsing the on [Stack Overflow][] (preferred) and [Google Groups][]. |
215e9e97 DV |
11 | |
12 | ## Features | |
13 | * Plots time series without using an external server or Flash | |
87ba46ff DV |
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] | |
215e9e97 DV |
20 | |
21 | ## Minimal Example | |
22 | ```html | |
23 | <html> | |
24 | <head> | |
fd6b8dad DV |
25 | <script type="text/javascript" src="dygraph.js"></script> |
26 | <link rel="stylesheet" href="dygraph.css" /> | |
215e9e97 DV |
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 | ||
87ba46ff DV |
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. | |
215e9e97 | 65 | |
341a2d65 DV |
66 | ## Development |
67 | ||
68 | To get going, clone the repo and run: | |
69 | ||
70 | npm install | |
e4fd77b3 DV |
71 | npm run build |
72 | ||
73 | Then open `tests/demo.html` in your browser. | |
341a2d65 DV |
74 | |
75 | Read more about the dygraphs development process in the [developer guide](/DEVELOP.md). | |
215e9e97 DV |
76 | |
77 | ## License(s) | |
215e9e97 | 78 | dygraphs is available under the MIT license, included in LICENSE.txt. |
87ba46ff DV |
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 |