UNPKG

3.4 kBMarkdownView Raw
1# dygraphs JavaScript charting library
2
3The dygraphs JavaScript library produces interactive, zoomable charts of time series:
4
5![sample graph](Screenshot.png)
6
7Learn more about it at [dygraphs.com](http://www.dygraphs.com).
8
9Get help with dygraphs 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 Dygraph.onDOMready(function onDOMready() { // or jQuery $() etc.
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 });
40//--><!]]></script>
41</body>
42</html>
43```
44
45Learn more by reading [the tutorial][] and seeing demonstrations of what
46dygraphs can do in the [gallery][]. You can get `dygraph.js` and `dygraph.css`
47from [UNPKG][], [cdnjs][] or [from NPM][npm] (see below).
48
49## Usage with a module loader
50
51Get dygraphs from NPM:
52
53 npm install dygraphs
54
55**Do not install from the git repository!** Always use a tarball install,
56which contains the prebuilt files; `npm` fails to build the source code
57on install from github. (The tarball from the GitHub Registry is fine.)
58
59You'll find pre-built JS & CSS files in `node_modules/dygraphs/dist/`. If you're
60using a module bundler like browserify or webpack, you can import dygraphs:
61
62```js
63import Dygraph from 'dygraphs';
64// or: const Dygraph = require('dygraphs');
65
66const g = new Dygraph('graphdiv', data, { /* options */ });
67```
68
69Check out the [dygraphs-es6 repo][] for a fully-worked example.
70
71## Development
72
73To get going, install the following Debian packages…
74
75 - `jq`
76 - `mksh`
77 - `pax`
78 - `python3`
79
80… clone the repo and run:
81
82 npm install
83 npm run build-jsonly
84
85Then open `tests/demo.html` in your browser.
86
87Read more about the dygraphs development process in the [developer guide](/DEVELOP.md).
88
89## License(s)
90dygraphs is available under the MIT license, included in [LICENSE.txt](./LICENSE.txt).
91
92[UNPKG]: https://unpkg.com/dygraphs/
93[cdnjs]: https://cdnjs.com/libraries/dygraph
94[the tutorial]: http://www.dygraphs.com/tutorial.html
95[gallery]: http://www.dygraphs.com/gallery
96[error bands]: http://dygraphs.com/tests/legend-values.html
97[pan and zoom]: http://dygraphs.com/tests/link-interaction.html
98[on mouseover]: http://dygraphs.com/tests/legend-values.html
99[averaging period]: http://dygraphs.com/tests/temperature-sf-ny.html
100[options]: http://www.dygraphs.com/options.html
101[Stack Overflow]: https://stackoverflow.com/questions/tagged/dygraphs?sort=votes&pageSize=50
102[Google Groups]: http://groups.google.com/group/dygraphs-users
103[gviz]: http://dygraphs.com/data.html#datatable
104[npm]: https://www.npmjs.com/package/dygraphs
105[dygraphs-es6 repo]: https://github.com/danvk/dygraphs-es6