[dygraphs.git] / README.md

[![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)
# dygraphs JavaScript charting library

The dygraphs JavaScript library produces interactive, zoomable charts of time series:

<img src="https://cloud.githubusercontent.com/assets/98301/5311286/eb760eea-7c10-11e4-9a59-1d144e51a15b.png" width="618" height="322">

Learn more about it at [dygraphs.com](http://www.dygraphs.com).

Get help with dygraphs by browsing the  on [Stack Overflow][] (preferred) and [Google Groups][].

## Features
* Plots time series without using an external server or Flash
* Supports [error bands][] around data series
* Interactive [pan and zoom][]
* Displays values [on mouseover][]
* Adjustable [averaging period][]
* Extensive set of [options][] for customization.
* Compatible with the [Google Visualization API][gviz]

## Minimal Example
```html
<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
<link rel="stylesheet" href="dygraph.css" />
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
  g = new Dygraph(
        document.getElementById("graphdiv"),  // containing div
        "Date,Temperature\n" +                // the data series
        "2008-05-07,75\n" +
        "2008-05-08,70\n" +
        "2008-05-09,80\n",
        { }                                   // the options
      );
</script>
</body>
</html>
```

Learn more by reading [the tutorial][] and seeing demonstrations of what
dygraphs can do in the [gallery][]. You can get `dygraph.js` and `dygraph.css`
from [cdnjs][] or [from NPM][npm] (see below).

## Usage with a module loader

Get dygraphs from NPM:

    npm install dygraphs

You'll find pre-built JS & CSS files in `node_modules/dygraphs/dist`. If you're
using a module bundler like browserify or webpack, you can import dygraphs:

```js
import Dygraph from 'dygraphs';
// or: const Dygraph = require('dygraphs');

const g = new Dygraph('graphdiv', data, { /* options */ });
```

Check out the [dygraphs-es6 repo][] for a fully-worked example.

## Development

To get going, clone the repo and run:

    npm install
    npm run build

Then open `tests/demo.html` in your browser.

Read more about the dygraphs development process in the [developer guide](/DEVELOP.md).

## License(s)
dygraphs is available under the MIT license, included in LICENSE.txt.

[cdnjs]: https://cdnjs.com/libraries/dygraph
[the tutorial]: http://www.dygraphs.com/tutorial.html
[gallery]: http://www.dygraphs.com/gallery
[error bands]: http://dygraphs.com/tests/legend-values.html
[pan and zoom]: http://dygraphs.com/tests/link-interaction.html
[on mouseover]: http://dygraphs.com/tests/legend-values.html
[averaging period]: http://dygraphs.com/tests/temperature-sf-ny.html
[options]: http://www.dygraphs.com/options.html
[Stack Overflow]: http://stackoverflow.com/questions/tagged/dygraphs?sort=votes&pageSize=50
[Google Groups]: http://groups.google.com/group/dygraphs-users
[gviz]: http://dygraphs.com/data.html#datatable
[npm]: https://www.npmjs.com/package/dygraphs
[dygraphs-es6 repo]: https://github.com/danvk/dygraphs-es6
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>
fd6b8dad DV	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
341a2d65 DV	75	Read more about the dygraphs development process in the [developer guide](/DEVELOP.md).
215e9e97 DV	76
215e9e97 DV	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