Rework the README a bit
[dygraphs.git] / README.md
... / ...
CommitLineData
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)
2# dygraphs JavaScript charting library
3
4The 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
8Learn more about it at [dygraphs.com](http://www.dygraphs.com).
9
10Get 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
44Learn more by reading [the tutorial][] and seeing demonstrations of what
45dygraphs can do in the [gallery][]. You can get `dygraph.js` and `dygraph.css`
46from [cdnjs][] or [from NPM][npm] (see below).
47
48## Usage with a module loader
49
50Get dygraphs from NPM:
51
52 npm install dygraphs
53
54You'll find pre-built JS & CSS files in `node_modules/dygraphs/dist`. If you're
55using a module bundler like browserify or webpack, you can import dygraphs:
56
57```js
58import Dygraph from 'dygraphs';
59// or: const Dygraph = require('dygraphs');
60
61const g = new Dygraph('graphdiv', data, { /* options */ });
62```
63
64Check out the [dygraphs-es6 repo][] for a fully-worked example.
65
66## Development
67
68To get going, clone the repo and run:
69
70 npm install
71 npm run build
72
73Then open `tests/demo.html` in your browser.
74
75Read more about the dygraphs development process in the [developer guide](/DEVELOP.md).
76
77## License(s)
78dygraphs 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