11813 dygraphs JavaScript Visualization Library

dygraphscom 18

Documentation

Demo

Usage

IE Compatibility

GViz Data

Baseball chart

Stock chart

GWT Compatibility

Data Policy

Options Reference

JSDoc Reference

Data Formats

Annotations

Project

Blog

Source

Issues

Report Bug

Contribute a change

Contact

DemosUsage

Known Users

New (browse gallery)

(browse demos)

Basic Demo

GViz Demo

Equation Plotter

Performance Test

Annotations

Annotations (GViz)

Filled Chart

Fractions

Visibility

Labels in a DIV

Numeric Axis

Dotted Points

Native Format

Crazy Styles

Tick spacing

Callbacks

HourlyMinutely data

Isolated Points

Missing Data

Bordered chart

Custom Bars

Custom Label Styles

Minimal Example

Negative Numbers

Custom Underlay

background

Tests for zoom operations

Log scale tests

dygraphs JavaScript Visualization Library

httpgithubcomdanvkdygraphs

See blog mailing list downloads demos and open issues

dygraphs is an open source JavaScript library that produces produces interactive zoomable charts of time series It is designed to

display dense data sets and enable users to explore and interpret them

A demo is worth a thousand words

(Mouse over to highlight individual values Click and drag to zoom Double-click to zoom back out Change the number and hit enter to adjust theaveraging period)

Some things to notice

Theres less seasonal temperature variation in SF than in NYThe difference is about 15deg F for SF vs 50deg F for NY

The daily data (set rolling period to 1) is quite noisy and hides this conclusionUsing a 14-day moving average makes it clearer A 100-day rolling period averages out nearly all the specifics from the dataTheres a gap in the data for SF when the weather station was down (zoom into October 2007 to see it)

The bands around each point indicate average highs and lowsThere is a lot of data in this chart low average and high for each city on each day of a three year period asymp 6000 data points in

all

dygraphs allows the user to explore the data and discover these facts

For more demos browse the dygraph tests directory To see other people who are using dygraphs check out the known users

Features

Some of the features of dygraphs

Plots time series without using an external server or Flash

Works in Internet Explorer (using excanvas)Lightweight (69kb) and responsive

Displays values on mouseover making interaction easily discoverable

Supports error bands around data seriesInteractive zoom

Displays Annotations on the chart

Adjustable averaging period

Can intelligently chart fractionsCustomizable click-through actions

Compatible with the Google Visualization API

Intelligent defaults make it easy to use

Usage

Tem

pera

ture

(F

)

Daily Temperatures in New York vs San Francisco

14

NY SF

20

30

40

50

60

70

80

90

Jan 07 Apr 07 Jul 07 Oct 07 Jan 08 Apr 08 Jul 08 Oct 08 Jan 09 Apr 09 Jul 09 Oct 09

11813 dygraphs JavaScript Visualization Library

dygraphscom 28

HTML

lthtmlgtltheadgtltscript type=textjavascript src=dygraph-combinedjsgtltscriptgtltheadgtltbodygtltdiv id=graphdivgtltdivgtltscript type=textjavascriptgt g = new Dygraph(

containing div documentgetElementById(graphdiv)

CSV or path to a CSV file DateTemperaturen + 2008-05-0775n + 2008-05-0870n + 2008-05-0980n

)ltscriptgtltbodygtlthtmlgt

OUTPUT

HTML

lthtmlgtltheadgtltscript type=textjavascript src=dygraph-combinedjsgtltscriptgtltheadgtltbodygtltdiv id=graphdiv2 style=width500px height300pxgtltdivgtltscript type=textjavascriptgt g2 = new Dygraph(

To use dygraphs include the dygraph-combinedjs JavaScript file and instantiate a Dygraph object

Heres a basic example to get things started

In order to keep this example self-contained the second parameter is raw CSV data The dygraphs library parses this data (includingcolumn headers) resizes its container to a reasonable default calculates appropriate axis ranges and tick marks and draws the graph

In most applications it makes more sense to include a CSV file instead If the second parameter to the constructor doesnt contain anewline it will be interpreted as the path to a CSV file The Dygraph will perform an XMLHttpRequest to retrieve this file anddisplay the data when it becomes available Make sure your CSV file is readable and serving from a place that understands

XMLHttpRequests In particular you cannot specify a CSV file using file Heres an example (data from WeatherUnderground)

70

72

74

76

78

80

07May 0600 1200 1800 08May 0600 1200 1800 09May

11813 dygraphs JavaScript Visualization Library

dygraphscom 38

documentgetElementById(graphdiv2) temperaturescsv path to CSV file options )ltscriptgtltbodygtlthtmlgt

OUTPUT

HTML

lthtmlgtltheadgtltscript type=textjavascript src=dygraph-combinedjsgtltscriptgtltheadgtltbodygtltdiv id=graphdiv3 style=width500px height300pxgtltdivgtltscript type=textjavascriptgt g3 = new Dygraph( documentgetElementById(graphdiv3) temperaturescsv rollPeriod 7 showRoller true )ltscriptgtltbodygtlthtmlgt

OUTPUT

The file used is temperaturescsv

There are a few things to note here

The Dygraph sent off an XHR to get the temperaturescsv fileThe labels were taken from the first line of temperaturescsv which is DateHighLow

The Dygraph automatically chose two different easily-distinguishable colors for the two data seriesThe labels on the x-axis have switched from days to months If you zoom in theyll switch to weeks and then daysSome heuristics are used to determine a good vertical range for the data The idea is to make all the data visible and have

human-friendly values on the axis (ie 200 instead of 1934) Generally this works wellThe data is very spiky A moving average would be easier to interpret

This problem can be fixed by specifying the appropriate options in the additional options parameter to the Dygraph constructor To

set the number of days for a moving average use the rollPeriod option Heres how its done

30

40

50

60

70

80

90

Jan 07 Apr 07 Jul 07 Oct 07

80

90

11813 dygraphs JavaScript Visualization Library

dygraphscom 48

HTML

lthtmlgtltheadgtltscript type=textjavascript src=combinedjsgtltscriptgtltheadgtltbodygtltdiv id=graphdiv4 style=width480px height320pxgtltdivgtltscript type=textjavascriptgt g4 = new Dygraph( documentgetElementById(graphdiv4) twonormalscsv rollPeriod 7 showRoller true errorBars true valueRange [50125] )ltscriptgtltbodygtlthtmlgt

OUTPUT

A rolling average can be set using the text box in the lower left-hand corner of the graph (the showRoller attribute is what makes this

appear) Also note that weve explicitly set the size of the chart div

Error Bars

Another significant feature of the dygraphs library is the ability to display error bars around data series One standard deviation mustbe specified for each data point A plusmnn sigma band will be drawn around the data series at that point If a moving average is beingdisplayed dygraphs will compute the standard deviation of the average at each point IE σ = sqrt( (σ12 + σ22 + + σn2) n )

Heres a demonstration There are two data series One is N(10010) with a standard deviation of 10 specified at each point The

other is N(8020) with a standard deviation of 20 specified at each point The CSV file was generated using Octave and can beviewed at twonormalscsv

730

40

50

60

70

Jan 07 Apr 07 Jul 07 Oct 07

750

60

70

80

90

100

110

120

Jan 07 Apr 07 Jul 07 Oct 07

11813 dygraphs JavaScript Visualization Library

dygraphscom 58

Things to note here

The errorBars option affects both the interpretation of the CSV file and the display of the graph When errorBars is set totrue each line is interpreted as YYYYMMDD A sigma_A B sigma_B hellip

The first line of the CSV file doesnt mention the error columns In this case its just DateSeries1Series2The averaging visibly affects the error bars This is most clear if you crank up the rolling period to something like 100 days Forthe earliest dates there wont be 100 data points to average so the signal will be noisier The error bars get smaller like sqrt(N)going forward in time until theres a full 100 points to averageThe error bars are partially transparent This can be seen when they overlap one another

Internet Explorer Compatibility

The dygraphs library relies heavily on the HTML5 ltcanvasgt tag which Microsoft Internet Explorer did not traditionally support To

use Microsofts native canvas implementation in IE9 you need to set an HTML5 doctype on your page

ltDOCTYPE htmlgt

When IE9 is in HTML5 mode dygraphs works just like in other modern browsers

If you want to support previous versions of Internet Explorer (IE6ndashIE8) youll need to include the excanvas library which emulatesthe ltcanvasgt tag using VML You can add excanvas by including the following snippet

ltDOCTYPE htmlgt lthtmlgt ltheadgt ltmeta http-equiv=X-UA-Compatible content=IE=EmulateIE7 IE=EmulateIE9gt lt--[if IE]gtltscript src=pathtoexcanvasjsgtltscriptgtlt[endif]--gt ltheadgt

(This is surprisingly tricky because the HTML5 doctype breaks excanvas in IE8 See this discussion for details)

While VML emulation sounds like it would be slow it works well in practice for most charts

One common gotcha to look out for make sure you dont have any trailing commas in parameter lists eg

new Dygraph(el data showRoller true note trailing comma)

Most browsers will ignore the trailing comma but it will break under IE

GViz Data

The Google Visualization API provides a standard interface for describing data Once youve specified your data using this API youcan plug in any GViz-compatible visualization dygraphs is such a visualization In particular it can be used as a drop-in replacementfor the AnnotatedTimeline visualization used on Google Finance and other sites To see how this works check out the gviz annotation

demo

For a simple demonstration of how to use dygraphs a GViz visualization see httpdanvkorgdygraphstestsgvizhtml dygraphs canalso be used as a GViz gadget This allows it to be embedded inside of a Google Spreadsheet For a demonstration of this see thisspreadsheet The URL for the gadget is httpdanvkorgdygraphsgadgetxml

Heres an example of a published gviz gadget using dygraphs

Charting Fractions

Situations often arise where you want to plot fractions eg the fraction of respondents in a poll who said theyd vote for candidate Xor the number of hits divided by at bats (baseballs batting average) Fractions require special treatment for two main reasons

The average of a1b1 and a2b2 is (a1+a2)(b1+b2) not (a1b1 + a2b2)2The normal approximation is not always applicable and more sophisticated confidence intervals (eg the Wilson confidenceinterval) must be employed to avoid ratios that exceed 100 or go below 0

Fortunately dygraphs handles both of these for you Heres a chart and the command that generated it

Batting Average for Ichiro Suzuki vs Mariners (2004)

70

11813 dygraphs JavaScript Visualization Library

dygraphscom 68

Command

new Dygraph( documentgetElementById(baseballdiv) suzuki-marinerstxt fractions true errorBars true showRoller true rollPeriod 15 )

The fractions option indicates that the values in each column should be parsed as fractions (eg 12 instead of 05) TheerrorBars option indicates that wed like to see a confidence interval around each data point By default when fractions is setyou get a Wilson confidence interval If you look carefully at the chart you can see that the error bars are asymmetric

A couple things to notice about this chart

The error bars for Ichiros batting average are larger than for the Mariners since he has far fewer at bats than his team

dygraphs makes it easy to see batting average over the last 30 games This is ordinarily quite difficult to compute It makes itclear where the hot and cold part of Suzukis season wereIf you set the averaging period to something large like 200 youll see the teams and players batting average through thatgame The final number is the overall batting average for the seasonWhere the error bars do not overlap we can say with 95 confidence that the series differ There is a better than 95 chance

that Ichiro was a better hitter than his team as a whole in 2004 the year he won the batting title

One last demo

This chart shows monthly closes of the Dow Jones Industrial Average both in nominal and real (ie adjusted for inflation) dollarsThe shaded areas show its monthly high and low CPI values with a base from 1982-84 are used to adjust for inflation

Display Nominal Real Annotations

Other Options

150

10

20

30

40

50

60

20 40 60 80 100 120 140 160

10

2K

4K

6K

8K

10K

12K

14K

1920 1930 1940 1950 1960 1970 1980 1990 2000

B

C

D

A

11813 dygraphs JavaScript Visualization Library

dygraphscom 78

In addition to the options mentioned above (showRoller rollPeriod errorBars valueRange) there are many others

For a full list see the Dygraphs Options Reference page

Common Gotchas

Here are a few problems that Ive frequently run into while using the dygraphs library

If your chart doesnt display be sure to check your browsers JavaScript error console dygraphs makes every attempt to logerrors and warnings and these can often guide you in the right direction

Make sure your CSV files are readable If your graph isnt showing up the XMLHttpRequest for the CSV file may be failingYou can determine whether this is the case using tools like Firebug

Make sure your CSV files are in the correct format They must be of the form YYYYMMDD series1 series2 hellip And if

you set the errorBars property make sure you alternate data series and standard deviationsdygraphs are not happy when placed inside a ltcentergt tag This applies to the CSS text-align property as well If you

want to center a Dygraph put it inside a table with align = center setDont set the dateWindow property to a date It expects milliseconds since epoch which can be obtained from a JavaScript

Date objects valueOf methodMake sure you dont have any trailing commas in your call to the Dygraph constructor or in the options parameter Firefox

Chrome and Safari ignore these but they can cause a graph to not display in Internet Explorer

GWT Compatibility

There is currently no GWT wrapper around Dygraphs however there is a class that can be used to easily load Dygraphs into the

browser To use it include the generated dygraph-gwtjar file in your classpath and add the following line to your GWT module

ltinherits name=orgdanvkdygraphsgt

Call orgdanvkDygraphsinstall() when your application starts to install the JavaScript code into the browser You can use JSNI tocall Dygraphs from your GWT code as in the example below The example uses the Visualization API for GWT and the Dygraphs

GViz API

public static native JavaScriptObject drawDygraph( Element element DataTable dataTable double minY double maxY) - var chart = new $wndDygraphGVizChart(element) chartdraw(dataTable valueRange [minY maxY] ) return chart-

Known Users

Since its public release in late 2009 dygraphs has found many users across the web This is a small collection of the uses that we

know about If youre using dygraphs please send Dan a link and hell add it to this list

dygraphs was originally developed at Google and has found wide use on internal dashboards and servers there There are also a fewuses of dygraphs on public Google products

Google Correlate

Uses dygraphs for time series visualization Mostly a standard configuration with just a few tweaks to match Google

style

Google Correlate - Search by DrawingThis is a highly customized configuration which lets the user draw a time series Based on this demo

Google Latitude History Dashboard

Uses mouse interaction callbacks to synchronize time series points with markers on a Google Map

dygraphs has also found use in other organizations

Integrated Space Weather Analysis System (NASA)ldquoWe use [dygraphs] in the Integrated Space Weather Analysis System available from the Space Weather Laboratory

at NASA Goddard Space Flight Center It works quite well for time series data from various missions and simulations

that we storerdquo

Eutelsat

ldquoEutelsat uses dygraphs for charting spacecraft telemetry for a fleet of 25 geostationary satellites The spacecraft

engineers are very happy with it All satellite combined are producing about 200 millions unique data points per day

11813 dygraphs JavaScript Visualization Library

dygraphscom 78

In addition to the options mentioned above (showRoller rollPeriod errorBars valueRange) there are many others

For a full list see the Dygraphs Options Reference page

Common Gotchas

Here are a few problems that Ive frequently run into while using the dygraphs library

If your chart doesnt display be sure to check your browsers JavaScript error console dygraphs makes every attempt to logerrors and warnings and these can often guide you in the right direction

Make sure your CSV files are readable If your graph isnt showing up the XMLHttpRequest for the CSV file may be failingYou can determine whether this is the case using tools like Firebug

Make sure your CSV files are in the correct format They must be of the form YYYYMMDD series1 series2 hellip And if

you set the errorBars property make sure you alternate data series and standard deviationsdygraphs are not happy when placed inside a ltcentergt tag This applies to the CSS text-align property as well If you

want to center a Dygraph put it inside a table with align = center setDont set the dateWindow property to a date It expects milliseconds since epoch which can be obtained from a JavaScript

Date objects valueOf methodMake sure you dont have any trailing commas in your call to the Dygraph constructor or in the options parameter Firefox

Chrome and Safari ignore these but they can cause a graph to not display in Internet Explorer

GWT Compatibility

There is currently no GWT wrapper around Dygraphs however there is a class that can be used to easily load Dygraphs into the

browser To use it include the generated dygraph-gwtjar file in your classpath and add the following line to your GWT module

ltinherits name=orgdanvkdygraphsgt

Call orgdanvkDygraphsinstall() when your application starts to install the JavaScript code into the browser You can use JSNI tocall Dygraphs from your GWT code as in the example below The example uses the Visualization API for GWT and the Dygraphs

GViz API

public static native JavaScriptObject drawDygraph( Element element DataTable dataTable double minY double maxY) - var chart = new $wndDygraphGVizChart(element) chartdraw(dataTable valueRange [minY maxY] ) return chart-

Known Users

Since its public release in late 2009 dygraphs has found many users across the web This is a small collection of the uses that we

know about If youre using dygraphs please send Dan a link and hell add it to this list

dygraphs was originally developed at Google and has found wide use on internal dashboards and servers there There are also a fewuses of dygraphs on public Google products

Google Correlate

Uses dygraphs for time series visualization Mostly a standard configuration with just a few tweaks to match Google

style

Google Correlate - Search by DrawingThis is a highly customized configuration which lets the user draw a time series Based on this demo

Google Latitude History Dashboard

Uses mouse interaction callbacks to synchronize time series points with markers on a Google Map

dygraphs has also found use in other organizations

Integrated Space Weather Analysis System (NASA)ldquoWe use [dygraphs] in the Integrated Space Weather Analysis System available from the Space Weather Laboratory

at NASA Goddard Space Flight Center It works quite well for time series data from various missions and simulations

that we storerdquo

Eutelsat

ldquoEutelsat uses dygraphs for charting spacecraft telemetry for a fleet of 25 geostationary satellites The spacecraft

engineers are very happy with it All satellite combined are producing about 200 millions unique data points per day

11813 dygraphs JavaScript Visualization Library

dygraphscom 88

engineers are very happy with it All satellite combined are producing about 200 millions unique data points per day

so we really appreciate the excellent performance of dygraphsrdquo

10gen MongoDB Monitoring Service

A free monitoring service for MongoDB from 10gen (the creators of MongoDB) Used by thousands of servers andusers Makes use of synchronized charts to display many quantities simultaneously

Duck Duck Go Traffic Dashboard

DDG uses dygraphs to display a public chart of their daily traffic They use annotations and the moving averagefeatures

Wikimedia Foundation - Moodbar data dashboard

dygraphs is used internally at Wikimedia as a handy solution to monitor the results of a bunch of small experiments

quadrant-framework (MySQL Load Testing Framework)A user friendly framework for creating and visualizing MySQL database load test jobs For more information on its

use of dygraphs see this post

Spinwave Systems (Home energy monitoring)

dygraphs is used to chart energy usage over time

Jwebchart

jWebChart is a stand-alone and Thredds embedded plotting system for netCDF files NetCDF is a common standard

for the storage and distribution of scientific data

n-gramas - Explore las tendencias en los artiacuteculos periodiacutesticos de Colombia

(English Explore trends in newspaper articles of Colombia) dygraphs is used for displaying the results of this n-

grams viewer Uses an extension for exporting the plots as PNG images ([1] [2])

Are you using dygraphs Please let Dan know and hell add your link here

Data Policy

dygraphs is purely client-side JavaScript It does not send your data to any servers ndash the data is processed entirely in the clientsbrowser

Created May 9 2008 by Dan Vanderkam