dygraphs lets you add annotations (markers) to individual points on your - chart. These markers have a short bit of text or an icon that's displayed - over the chart, plus a longer description that appears when you hover over - them.

Demo: Dow Jones Industrial Average

Adding Annotations

Calling dygraph.setAnnotations(dygraph.annotations()) is a - no-op: it simply causes the chart to refresh.

Annotations are JavaScript dictionaries. The series and x fields are required: they indicate which point the annotation should be attached to. If specified, shortText will appear on the annotation "flag". If you don't specify shortText, you can specify icon instead to display a small picture. The text parameter specifies hovertext. If you highlight the annotation and leave the mouse still, it will appear.

If you are using native format, you need to pass in a numeric value for the x field. For a numeric x-axis, simply pass in the x-value of the data point on which you wish to attach the annotation. For a date axis, pass in Date.parse('YYYY/MM/DD'). This returns milliseconds since epoch for the date.

Modifying Annotations

To remove or modify existing annotations, call the +annotations method to get an array of annotations. Modify that +array, then pass it back in to setAnnotations. For example, this +code deletes the second annotation and changes the series to which the first +is attached:

Again, check out the annotations demo - for concrete examples of usage of all these handlers.

Annotations property reference

These properties can all be set in the dictionary for an annotation. The use of each one is demonstrated on the annotations demo page.

Annotation event handlers

dygraphs lets you attach event handlers to your annotations. These can be +specified globally (for all annotations) or on a per-annotation basis:

Again, check out the annotations demo +for concrete examples of usage of all these handlers.

Guide to making dygraphs changes

So you've made a change to dygraphs and would like to contribute it back - to the open source project. Wonderful!

dygraphs style

First of all, please try to follow the style of the existing dygraphs - code. This will make the review process go much more smoothly.

Sending a Pull Request

dygraphs is hosted on github, which uses a "pull request" model. They - have a good writeup here. These - instructions discuss dygraphs more specifically.

The list of steps may look a bit daunting, but it's not too bad, - especially if you have any familiarity with git or github. If you run into - any problems while following the instructions, feel free to contact - dygraphs-users.

Why not just take patches? This process means less work for me (the - maintainer) and it also results in your name appearing in the list of - dygraphs commits. This lets you take credit for your work.

CSS Reference

dygraphs charts are a combination of DOM elements and pixels on a +<canvas>. The parts that are DOM elements can be styled +using CSS.

As a general rule of thumb, all the text on a chart (the legend, the axis +labels, the chart labels) can be styled. The data series and gridlines are +drawn on the canvas and must by styled using dygraphs options.

The axis labels ("2000", "4000", "6000", … for the y-axis and "1920", +"1930", "1940", … for the x-axis) also get CSS classes:

The legend has the .dygraph-legend class. When using highlightSeriesOpts, the selected +series' <span> gets a .highlight class. This can be used to +show only a single series in the legend.

dygraphs Data Format

These are all discussed below. If you're trying to debug why your input - won't parse, check the JS error console. dygraphs tries to log - informative errors explaining what's wrong with your data, and these can - often point you in the right direction.

There are several options which affect how your input data is - interpreted. These are: -

Standard Deviations

Often you have a measurement and also a measure of its uncertainty: a - standard deviation. If you specify the errorBars option, dygraphs - will look for alternating value and standard deviation columns in your CSV - data. Here's what it should look like:

The "5" values are standard deviations. When each point is plotted, a - 2-standard deviation region around it is shaded, resulting in a 95% - confidence interval. If you want more or less confidence, you can set the - sigma option to something other than 2.0.

When you roll data with standard deviations, dygraphs will plot the - average of your values in each rolling period and the RMS value of your - standard deviations: sqrt(std1 + std2 + std3 + ... + stdN)/N.

Custom error bars

Sometimes your data has asymetric uncertainty or you want to specify - something else with the error bars around a point. One example of this is - the "temperatures" demo on the dygraphs - home page., where the point is the daily average and the bars denote - the low and high temperatures for the day.

To specify this format, set the customBars option. Your CSV values - should each be three numbers separated by semicolons ("low;mid;high"). - Here's an example:

The middle value need not lie between the low and high values. If you set - a rolling period, the three values will all be averaged independently.

You can also specify a Google Visualization Library DataTable - object as your input data. This lets you easily switch between dygraphs and - other gviz visualizations such as the Annotated Timeline. It also lets you - embed a Dygraph in a Google Spreadsheet.

You'll need to set your first column's type to one of "number", "date" - or "datetime".

dygraphs Data Format

These are all discussed below. If you're trying to debug why your input +won't parse, check the JS error console. dygraphs tries to log +informative errors explaining what's wrong with your data, and these can +often point you in the right direction.

There are several options which affect how your input data is +interpreted. These are:

CSV

"CSV" is actually a bit of a misnomer: the data can be tab-delimited, +too. The delimiter is set by the delimiter option. It default to ",". +If no delimiter is found in the first row, it switches over to tab.

Headers

If you don't specify the labels option, dygraphs will look at the +first line of your CSV data to get the labels. If you see numbers for series +labels when you hover over the dygraph, it's likely because your first line +contains data but is being parsed as a label. The solution is to either add +a header line or specify the labels like this:

x-values

Once the headers are parsed, dygraphs needs to determine what the type of +the x values is. They're either dates or numbers. To make this +determination, it looks at the first column of the first row ("2009/07/12" +in the example above). Here's the heuristic: if it contains a '-' or a '/', +or otherwise doesn't parse as a float, the it's a date. Otherwise, it's a +number.

Once the type is determined, that doesn't mean all the values will parse +correctly. The general rule is:

You can manually verify this using a JavaScript console. If a value +doesn't parse, dygraphs will put a warning about it on your console. But +beware: different browsers support different date formats!

If you specify the xValueParser option, then all this detection is +bypassed and your function is called instead. Your parser function takes in +a string and needs to return a number. For dates/times, you should return +milliseconds since epoch. You may also want to specify a few other options +to make sure that everything gets displayed properly.

y-values

Dependent (y-axis) values are simpler than x-values because they're +always numbers. The complexity here comes from the various ways that you can +specify the uncertainty in your measurements.

If your y-values are just numbers, then they need to be parseable by +JavaScript's parseFloat function. Acceptable formats include:

If you have missing data, just leave the column blank (your CSV file will +probably contain a ",," in it).

If your numbers have uncertainty associated with them, then there are +three basic ways to express this: using fractions, standard deviations or +explicit ranges.

Fractions

If you specify the fractions option, then your data will all be +interpreted as ratios between zero and one. This is often the case if you're +plotting a percentage.

Why not just divide the fractions out yourself? There are two attractive +reasons not to:

Standard Deviations

Often you have a measurement and also a measure of its uncertainty: a +standard deviation. If you specify the errorBars option, dygraphs +will look for alternating value and standard deviation columns in your CSV +data. Here's what it should look like:

The "5" values are standard deviations. When each point is plotted, a +2-standard deviation region around it is shaded, resulting in a 95% +confidence interval. If you want more or less confidence, you can set the +sigma option to something other than 2.0.

When you roll data with standard deviations, dygraphs will plot the +average of your values in each rolling period and the RMS value of your +standard deviations: sqrt(std1 + std2 + std3 + ... + stdN)/N.

Custom error bars

Sometimes your data has asymetric uncertainty or you want to specify +something else with the error bars around a point. One example of this is +the "temperatures" demo on the dygraphs + home page., where the point is the daily average and the bars denote +the low and high temperatures for the day.

To specify this format, set the customBars option. Your CSV values +should each be three numbers separated by semicolons ("low;mid;high"). +Here's an example:

The middle value need not lie between the low and high values. If you set +a rolling period, the three values will all be averaged independently.

URL

If you pass in a URL, dygraphs will issue an XMLHttpRequest for it and +attempt to parse the returned data as CSV. +

Common problems. Make sure the URL is accessible and returns data +in text format (as opposed to a CSV file with an HTML header). You can see +what the response looks like by checking your JS console or by requesting +the URL yourself.

Array (native format)

If you'll be constructing your data set from a server-side program (or +from JavaScript) then you're better off producing an array than CSV data. +This saves the cost of parsing the CSV data and also avoids common parser +errors.

The downside is that it's harder to look at your data (you'll need to use +a JS debugger) and that the data format is a bit less clear for values with +uncertainties.

Headers

Headers for native format must be specified via the labels +option. There's no other way to set them.

x-values

If you want your x-values to be dates, you'll need to use specify a Date +object in the first column. Otherwise, specify a number. Here's a sample +array with dates on the x-axis:

y-values

You can specify errorBars, fractions or customBars +with the array format. If you specify any of these, the values become arrays +(rather than numbers). Here's what the format looks like for each one:

To specify missing data, set the value to null or NaN. You may not set a value +inside an array to null or NaN. Use null or NaN instead of the entire array. +The only difference between the two is when the option +connectSeparatedPoints +true. In that case, the gaps created by nulls are filled in, and gaps +created by NaNs are preserved. +

Functions

You can specify a function that returns any of the other types. If +x is a valid piece of dygraphs input, then so is

DataTable

You can also specify a Google Visualization Library DataTable +object as your input data. This lets you easily switch between dygraphs and +other gviz visualizations such as the Annotated Timeline. It also lets you +embed a Dygraph in a Google Spreadsheet.

You'll need to set your first column's type to one of "number", "date" +or "datetime".

Most users will want the minified JavaScript:

dygraph-combined.js

+
+

For dev (non-minified) JS, see dygraph-dev.js on github. +

Notes on GWT

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-gwt.jar file in your classpath and add the following line to your GWT module:

Call org.danvk.Dygraphs.install() when your application starts to install the JavaScript code into the browser. You can use JSNI to call Dygraphs from your GWT code, as in the example below. The example uses the Visualization API for GWT and the Dygraphs GViz API.

diff --git a/docs/ie.html b/docs/ie.html new file mode 100644 index 0000000..9b0579f --- /dev/null +++ b/docs/ie.html @@ -0,0 +1,44 @@ + + +

Internet Explorer Compatibility

+ +

The dygraphs library relies heavily on the HTML5 <canvas> tag, which Microsoft Internet Explorer did not traditionally support. To use Microsoft's native canvas implementation in IE9, you need to set an HTML5 doctype on your page:

+ +

+<!DOCTYPE html>
+

+ +

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

+ +

If you want to support previous versions of Internet Explorer (IE6–IE8), you'll need to include the excanvas library, which emulates the <canvas> tag using VML. You can add excanvas by including the following snippet:

+ +

+<!DOCTYPE html> 
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> 
+    <!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
+  </head>
+

+ +

(This is surprisingly tricky because the HTML5 doctype breaks excanvas in IE8. See this discussion for details. Note that the <meta http-equiv…> line must appear first in the <head> section for this to work properly.)

+ +

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 don't have any trailing commas in parameter lists, e.g.

+ +

+new Dygraph(el, data, {
+  showRoller: true,  // note trailing comma
+})

+ +

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

+ +

You may also need to delay instantiating any dygraphs until after the DOM +content is ready, as there have been some reports +that excanvas won't work until this happens. If you're using jQuery, this +means drawing your charts inside of a $(function() { ... }) +block.

+ + diff --git a/docs/index.html b/docs/index.html index cc3d1be..b6b5aa1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,716 +1,83 @@ - - - - - - - dygraphs JavaScript Visualization Library - - - - - - - - -

- -

Documentation

Demo
Usage
IE Compatibility
GViz Data
Baseball chart
Stock chart
GWT Compatibility
Data Policy
Options Reference
JSDoc Reference
Data Formats
Annotations

- -

Project

- -

Demos/Usage

Known Users

+ + + + +

dygraphs is a fast, flexible open source JavaScript charting library.

It allows users to explore and interpret dense data sets. Here's how it works:

+ +

+ This JavaScript… +

new Dygraph(div, "ny-vs-sf.txt", {
+  legend: 'always',
+  title: 'NYC vs. SF',
+  showRoller: true,
+  rollPeriod: 14,
+  customBars: true,
+  ylabel: 'Temperature (F)',
+});

+ …makes this chart! +

+ + + -

dygraphs JavaScript Visualization Library

- -

http://github.com/danvk/dygraphs

For help, ask - a question on StackOverflow. You may also be interested in the blog, mailing list, 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 the averaging period.)

- -

- - -

Some things to notice:

There's less seasonal temperature variation in SF than in NY.
The difference is about 15° F for SF vs. 50° F for NY.
The daily data (set rolling period to 1) is quite noisy and hides this conclusion.
Using a 14-day moving average makes it clearer. A 100-day rolling period averages out nearly all the specifics from the data.
There's 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 lows.
There is a lot of data in this chart: low, average and high for each city on each day of a three year period ≈ 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.

The chart is interactive: you can mouse over to highlight individual values. You can click and drag to zoom. Double-clicking will zoom you back out. Shift-drag will pan. You can change the number and hit enter to adjust the averaging period.

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 series
Interactive zoom
Displays Annotations on the chart
Adjustable averaging period
Can intelligently chart fractions
Customizable click-through actions
Compatible with the Google Visualization API
Intelligent defaults make it easy to use

- -

Usage

- -

To use dygraphs, include the dygraph-combined.js JavaScript file and instantiate a Dygraph object.

- -

Here's a basic example to get things started:

- -

-          HTML
-          
-  -<html>
-<head>
-<script type="text/javascript"
-  src="dygraph-combined.js"></script>
-</head>
-<body>
-<div id="graphdiv"></div>
-<script type="text/javascript">
-  g = new Dygraph(
-
-    // containing div
-    document.getElementById("graphdiv"),
-
-    // CSV or path to a CSV file.
-    "Date,Temperature\n" +
-    "2008-05-07,75\n" +
-    "2008-05-08,70\n" +
-    "2008-05-09,80\n"
-
-  );
-</script>
-</body>
-</html>
-
-          
-        

OUTPUT

- -

In order to keep this example self-contained, the second parameter is raw CSV data. The dygraphs library parses this data (including column 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 doesn't contain a newline, it will be interpreted as the path to a CSV file. The Dygraph will perform an XMLHttpRequest to retrieve this file and display the data when it becomes available. Make sure your CSV file is readable and serving from a place that understands XMLHttpRequest's! In particular, you cannot specify a CSV file using "file:///". Here's an example: (data from Weather Underground)

- -

-          HTML
-          
--<html>
-<head>
-<script type="text/javascript"
-  src="dygraph-combined.js"></script>
-</head>
-<body>
-<div id="graphdiv2"
-  style="width:500px; height:300px;"></div>
-<script type="text/javascript">
-  g2 = new Dygraph(
-    document.getElementById("graphdiv2"),
-    "temperatures.csv", // path to CSV file
-    {}          // options
-  );
-</script>
-</body>
-</html>
-
-          
-        

OUTPUT

- -

The file used is temperatures.csv.

- -

There are a few things to note here:

The Dygraph sent off an XHR to get the temperatures.csv file.
The labels were taken from the first line of temperatures.csv, which is Date,High,Low.
The Dygraph automatically chose two different, easily-distinguishable colors for the two data series.
The labels on the x-axis have switched from days to months. If you zoom in, they'll switch to weeks and then days.
Some 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 (i.e. 200 instead of 193.4). Generally this works well.
The data is very spiky. A moving average would be easier to interpret.
Handles huge data sets: dygraphs plots millions of points without getting bogged down. +
Interactive out of the box: zoom, pan and mouseover are on by default. +
Strong support for error bars / confidence intervals. +
Highly customizable: using options and custom callbacks, you can make dygraphs do almost anything. +
dygraphs is highly compatible: it works in all major browsers (including IE8). You can even pinch to zoom on mobile/tablet devices! +
There's an active community developing and supporting dygraphs.

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. Here's how it's done:

- -

-          HTML
-          
--<html>
-<head>
-<script type="text/javascript"
-  src="dygraph-combined.js"></script>
-</head>
-<body>
-<div id="graphdiv3"
-  style="width:500px; height:300px;"></div>
-<script type="text/javascript">
-  g3 = new Dygraph(
-    document.getElementById("graphdiv3"),
-    "temperatures.csv",
-    {
-      rollPeriod: 7,
-      showRoller: true
-    }
-  );
-</script>
-</body>
-</html>
-
-          
-        

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 we've 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 must be specified for each data point. A ±n sigma band will be drawn around the data series at that point. If a moving average is being displayed, dygraphs will compute the standard deviation of the average at each point. I.E. σ = sqrt( (σ_1² + σ_2² + ... + σ_n²) / n )

- -

Here's a demonstration. There are two data series. One is N(100,10) with a standard deviation of 10 specified at each point. The other is N(80,20) with a standard deviation of 20 specified at each point. The CSV file was generated using Octave and can be viewed at twonormals.csv.

- -

-          HTML
-          
--<html>
-<head>
-<script type="text/javascript"
-  src="combined.js"></script>
-</head>
-<body>
-<div id="graphdiv4"
-  style="width:480px; height:320px;"></div>
-<script type="text/javascript">
-  g4 = new Dygraph(
-    document.getElementById("graphdiv4"),
-    "twonormals.csv",
-    {
-      rollPeriod: 7,
-      showRoller: true,
-      errorBars: true,
-      valueRange: [50,125]
-    }
-  );
-</script>
-</body>
-</html>
-
-          
-        

OUTPUT

- -

Getting Started

Start by downloading dygraphs. Then read the Tutorial to learn how to use it, or just play with dygraphs on jsFiddle.

Things to note here:

Once you've got your feet wet, look for inspiration in the demo gallery or check out our list of users.

Quick Links

The errorBars option affects both the interpretation of the CSV file and the display of the graph. When errorBars is set to true, each line is interpreted as YYYYMMDD, A, sigma_A, B, sigma_B, …
The first line of the CSV file doesn't mention the error columns. In this case, it's just "Date,Series1,Series2".
The averaging visibly affects the error bars. This is most clear if you crank up the rolling period to something like 100 days. For the earliest dates, there won't 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 there's a full 100 points to average.
The error bars are partially transparent. This can be seen when they overlap one another.
Tutorial +
Options Reference +
API Reference +
CSS Reference +
Data format documentation +
Ask a Question on Stack Overflow. +
Mailing List +
dygraphs blog +
Policy & Licensing

Internet Explorer Compatibility

- -

-<!DOCTYPE html>
-

- -

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

- -

-<!DOCTYPE html> 
-<html>
-  <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> 
-    <!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
-  </head>
-

- -

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 don't have any trailing commas in parameter lists, e.g.

- -

-new Dygraph(el, data, {
-  showRoller: true,  // note trailing comma
-})

- -

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

- -

You may also need to delay instantiating any dygraphs until after the DOM - content is ready, as there have been some reports - that excanvas won't work until this happens. If you're using jQuery, this - means drawing your charts inside of a $(function() { ... }) - block.

- -

GViz Data

- -

The Google - Visualization API provides a standard interface for describing data. - Once you've specified your data using this API, you can plug in any - GViz-compatible visualization. dygraphs is such a visualization. In - particular, it can be used as a drop-in replacement for 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 http://danvk.org/dygraphs/tests/gviz.html. dygraphs can also be used as a GViz gadget. This allows it to be embedded inside of a Google Spreadsheet. For a demonstration of this, see this spreadsheet. The URL for the gadget is http://danvk.org/dygraphs/gadget.xml.

- -

Here's an example of a published gviz gadget using dygraphs:

- - - -

Charting Fractions

- -

Situations often arise where you want to plot fractions, e.g. the fraction of respondents in a poll who said they'd vote for candidate X or the number of hits divided by at bats (baseball's batting average). Fractions require special treatment for two main reasons:

- -

The average of a1/b1 and a2/b2 is (a1+a2)/(b1+b2), not (a1/b1 + a2/b2)/2.
The normal approximation is not always applicable and more sophisticated confidence intervals (e.g. the Wilson confidence interval) must be employed to avoid ratios that exceed 100% or go below 0%.

- -

Fortunately, dygraphs handles both of these for you! Here's a chart and the command that generated it:

- -

Batting Average for Ichiro Suzuki vs. Mariners (2004)

- - -

Command:

-  new Dygraph(
-    document.getElementById("baseballdiv"),
-    "suzuki-mariners.txt",
-    {
-      fractions: true,
-      errorBars: true,
-      showRoller: true,
-      rollPeriod: 15
-    }
-  );
-

- -

The fractions option indicates that the values in each column should be parsed as fractions (e.g. "1/2" instead of "0.5"). The errorBars option indicates that we'd like to see a confidence interval around each data point. By default, when fractions is set, you 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 Ichiro's 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 it clear where the "hot" and "cold" part of Suzuki's season were.
If you set the averaging period to something large, like 200, you'll see the team's and player's batting average through that game. The final number is the overall batting average for the season.
Where 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 (i.e. adjusted for inflation) dollars. The 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

- -

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 I've frequently run into while using the dygraphs library.

- -

If your chart doesn't display, be sure to check your browser's JavaScript error console. dygraphs makes every attempt to log errors and warnings, and these can often guide you in the right direction.
Make sure your CSV files are readable! If your graph isn't showing up, the XMLHttpRequest for the CSV file may be failing. You 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, … . And if you set the errorBars property, make sure you alternate data series and standard deviations.
dygraphs are not happy when placed inside a <center> 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 set.
Don't set the dateWindow property to a date. It expects milliseconds since epoch, which can be obtained from a JavaScript Date object's valueOf method.
Make sure you don't 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

- -

-<inherits name="org.danvk.dygraphs"/>    
-

- -

-public static native JavaScriptObject drawDygraph(
-    Element element, DataTable dataTable, double minY, double maxY) /*-{
-  var chart = new $wnd.Dygraph.GVizChart(element);
-  chart.draw(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 you're using dygraphs, please send Dan a link and he'll 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 few uses 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 Drawing
- This 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)
- “We 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 store.”
Eutelsat
- “Eutelsat 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 so we really appreciate the - excellent performance of dygraphs.”
10gen MongoDB - Monitoring Service
- A free monitoring service for MongoDB from 10gen (the - creators of MongoDB). Used by thousands of servers and users. 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 average features.
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 artÃculos periodÃsticos 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]). -
NOAA Great Lakes Water Level Dashboard
- The Great Lakes Water Level dashboard was designed to help users view, understand, and compare Great Lakes surface water elevation data and forecasts from a variety of different sources, and across a variety of time scales ranging from monthly average values, to annual and multi-decadal values. First developed in Adobe Flash, a HTML 5 compatible version has been in the works and a functional draft is available here.

- -

Are you using dygraphs? Please let Dan know and he'll add your link here!

- - -

Data Policy

dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client's browser.

- -

Created May 9, 2008 by Dan Vanderkam

- - - + + diff --git a/docs/legal.html b/docs/legal.html new file mode 100644 index 0000000..ad0f4b7 --- /dev/null +++ b/docs/legal.html @@ -0,0 +1,38 @@ + + +

Legal Information

+ +

dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client's browser.

+ +

dygraphs is available under the MIT license, included in LICENSE.txt.

+ +

dygraphs uses:
+ - rgbcolor.js (Public Domain)
+ - strftime.js (BSD License)
+ - excanvas.js (Apache License)
+ - YUI compressor (BSD License)
+ - JsDoc Toolkit (MIT license)
+ - stacktrace.js is public domain
+
+automated tests use:
+ - auto_tests/lib/jquery-1.4.2.js (MIT & GPL2)
+ - auto_tests/lib/Asserts.js (Apache 2.0 License)
+ - auto-tests/lib/JsTestDriver-1.3.3cjar (Apache 2.0 License
+
+Linter uses:
+ - JSHint (modified MIT license; prevents evil)
+
+rgbcolor: http://www.phpied.com/rgb-color-parser-in-javascript/
+strftime: http://tech.bluesmoon.info/2008/04/strftime-in-javascript.html
+excanvas: http://code.google.com/p/explorercanvas/
+yui compressor: http://developer.yahoo.com/yui/compressor/
+jsdoc toolkit: http://code.google.com/p/jsdoc-toolkit/
+
+jquery: http://code.jquery.com/jquery-1.4.2.js
+Asserts.js: http://www.google.com/codesearch/p?#3tsINRJRCro/trunk/JsTestDriver/src/com/google/jstestdriver/javascript/Asserts.js
+JSTestDriver: http://code.google.com/p/js-test-driver/
+
+JSHint: jshint.com
+

+ + diff --git a/docs/modernizr.custom.18445.js b/docs/modernizr.custom.18445.js new file mode 100644 index 0000000..5e81259 --- /dev/null +++ b/docs/modernizr.custom.18445.js @@ -0,0 +1,4 @@ +/* Modernizr 2.6.2 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-a_download + */ +;window.Modernizr=function(a,b,c){function t(a){i.cssText=a}function u(a,b){return t(prefixes.join(a+";")+(b||""))}function v(a,b){return typeof a===b}function w(a,b){return!!~(""+a).indexOf(b)}function x(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:v(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l={},m={},n={},o=[],p=o.slice,q,r={}.hasOwnProperty,s;!v(r,"undefined")&&!v(r.call,"undefined")?s=function(a,b){return r.call(a,b)}:s=function(a,b){return b in a&&v(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=p.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(p.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(p.call(arguments)))};return e});for(var y in l)s(l,y)&&(q=y.toLowerCase(),e[q]=l[y](),o.push((e[q]?"":"no-")+q));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)s(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},t(""),h=j=null,e._version=d,e}(this,this.document),Modernizr.addTest("adownload","download"in document.createElement("a")); \ No newline at end of file diff --git a/docs/options.css b/docs/options.css new file mode 100644 index 0000000..9fff8a9 --- /dev/null +++ b/docs/options.css @@ -0,0 +1,35 @@ +/* + * CSS for the options reference page. + * Putting it in its own file allows for iteration w/o re-running + * generate-documentation.py + */ + +p.option { + padding-left: 25px; +} +div.parameters { + padding-left: 15px; +} +#main { margin-top: 0; } +.row { margin-top: 0; } +.dygraphs-side-nav .nav>li>a { + padding-top: 2px; + padding-bottom: 2px; +} + +.dygraphs-side-nav { + background: #f9f9f9; + border-radius: 5px; + display: table; + overflow-y: scroll; + min-width: 200px; +} + +/* This prevents the sidenav from floating on top of the content on small + * screens, tablet and mobile. + * Where does 992px come from? */ +@media screen and (max-width: 992px) { + .dygraphs-side-nav.affix { + position: relative; + } +} diff --git a/docs/per-axis.html b/docs/per-axis.html index 25f632b..df59a3d 100644 --- a/docs/per-axis.html +++ b/docs/per-axis.html @@ -1,110 +1,87 @@ - - - - - dygraphs per-series and per-axis options - - - -

dygraphs per-series and per-axis options

- -

When you create a Dygraph object, your code looks something like - this:

- -


-      g = new Dygraph(document.getElementById("div"),
-                      data,
-                      { options });
-

- -

This document is about some of the values you can put in the - options parameter.

- -

per-series options

- -

Typically, an option applies to the whole chart: if you set the - strokeWidth option, it will apply to all data-series equally:

- -


-      g = new Dygraph(document.getElementById("div"),
-                      "X,Y1,Y2,Y3\n" +
-                      "1,2,3,4\n" +
-                      ...,
-                      {
-                        strokeWidth: 5
-                      });
-

- -

Some options, however, can be applied on a per-series or a per-axis - basis. For instance, to set three different strokeWidths, you could - write:

- -


-      g = new Dygraph(document.getElementById("div"),
-                      "X,Y1,Y2,Y3\n" +
-                      "1,2,3,4\n" +
-                      ...,
-                      {
-                        strokeWidth: 5,  // default stroke width
-                        'Y1': {
-                          strokeWidth: 3  // Y1 gets a special value.
-                        },
-                        'Y3': {
-                          strokeWidth: 1  // so does Y3.
+
+dygraphs per-series and per-axis options
+
+When you create a Dygraph object, your code looks something like
+this:
+
++  g = new Dygraph(document.getElementById("div"),
+                  data,
+                  { options });
+
+
+This document is about some of the values you can put in the
+options parameter.
+
+per-series options
+
+Typically, an option applies to the whole chart: if you set the
+strokeWidth option, it will apply to all data-series equally:
+
++  g = new Dygraph(document.getElementById("div"),
+                  "X,Y1,Y2,Y3\n" +
+                  "1,2,3,4\n" +
+                  ...,
+                  {
+                    strokeWidth: 5
+                  });
+
+
+Some options, however, can be applied on a per-series or a per-axis
+basis. For instance, to set three different strokeWidths, you could
+write:
+
++  g = new Dygraph(document.getElementById("div"),
+                  "X,Y1,Y2,Y3\n" +
+                  "1,2,3,4\n" +
+                  ...,
+                  {
+                    strokeWidth: 5,  // default stroke width
+                    'Y1': {
+                      strokeWidth: 3  // Y1 gets a special value.
+                    },
+                    'Y3': {
+                      strokeWidth: 1  // so does Y3.
+                    }
+                  });
+
+
+The result of these options is that Y1 will have a strokeWidth of 1, Y2 will have a strokeWidth of 5 and Y3 will have a strokeWidth of 1. You can see a demonstration of this here.
+
+per-axis options
+
+Some options make more sense when applied to an entire axis, rather than to individual series. For instance, the axisLabelFormatter option lets you specify a function for format the labels on axis tick marks for display. You might want one function for the x-axis and another one for the y-axis.
+
+Here's how you can do that:
+
+

+  g = new Dygraph(document.getElementById("div"),
+                  "X,Y1,Y2,Y3\n" +
+                  "1,2,3,4\n" +
+                  ...,
+                  {
+                    axes: {
+                      x: {
+                        axisLabelFormatter: function(x) {
+                          return 'x' + x;
                         }
-                      });
-    
-
-    The result of these options is that Y1 will have a strokeWidth of 1, Y2 will have a strokeWidth of 5 and Y3 will have a strokeWidth of 1. You can see a demonstration of this here.
-
-    per-axis options
-
-    Some options make more sense when applied to an entire axis, rather than to individual series. For instance, the axisLabelFormatter option lets you specify a function for format the labels on axis tick marks for display. You might want one function for the x-axis and another one for the y-axis.
-
-    Here's how you can do that:
-
-    
-      g = new Dygraph(document.getElementById("div"),
-                      "X,Y1,Y2,Y3\n" +
-                      "1,2,3,4\n" +
-                      ...,
-                      {
-                        axes: {
-                          x: {
-                            axisLabelFormatter: function(x) {
-                              return 'x' + x;
-                            }
-                          },
-                          y: {
-                            axisLabelFormatter: function(y) {
-                              return 'y' + y;
-                            }
-                          }
+                      },
+                      y: {
+                        axisLabelFormatter: function(y) {
+                          return 'y' + y;
                         }
-                      });
-    
-
-    The keys in the 'axes' option are always 'x', 'y' and, if you have a
-    secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the
-    top level, it will apply to all axes.
-
-    To see this in practice, check out the two-axes test.
-
-  
-
-  
-
+                      }
+                    }
+                  });
+

+ +

The keys in the 'axes' option are always 'x', 'y' and, if you have a +secondary y-axis, 'y2'. If you set the "axisLabelFormatter" option at the +top level, it will apply to all axes.

+ +

To see this in practice, check out the two-axes test.

+ + diff --git a/docs/site.css b/docs/site.css new file mode 100644 index 0000000..c9ac643 --- /dev/null +++ b/docs/site.css @@ -0,0 +1,117 @@ +body { + padding-top: 100px; /* required for fixed header */ +} +#header { + background: #f9f9f9; + margin-bottom: 10px; + border-bottom: 1px solid lightgray; +} +.navbar-brand { + padding-top: 0; + padding-bottom: 0; +} +.navbar-brand a, navbar-brand a:visited { + color: black; + font-size: 38px; +} +.navbar-brand a:hover { + text-decoration: none; +} +#header ul.nav { + display: inline-block; +} +#header ul.nav { + float: right; + margin-top: 20px; + margin-right: 20px; +} +@media screen and (min-width: 992px) { + /* without this, the right-most menu goes off the page */ + #header ul.nav { + margin-right: 75px; + } +} +@media screen and (min-width: 768px) and (max-width: 992px) { + /* The topnav drops down to the next line between these sizes. We must accomodate. */ + body { + padding-top: 130px; + } + /* center the menu and logo */ + .navbar-brand { + float: none; + text-align: center; + max-width: none; + } + #header ul.nav { + float: none; + display: table; /* shrink to fit */ + margin-left: auto; /* center */ + margin-right: auto; + } +} +@media screen and (max-width: 768px) { + #header .nav-collapse.in li, #header .nav-collapse.collapsing li { + float: none; + } + #header .nav-collapse.in .nav, #header .nav-collapse.collapsing .nav { + float: none; + } +} +code { + white-space: pre-wrap; + color: black; + background: transparent; +} +#demodiv { + width: 100%; + height: 320px; + margin-bottom: 10px; +} +@media screen and (max-width: 768px) { + /* aspect ratio is weird on phones */ + #demodiv { + height: 200px; + } +} +.dygraph-axis-label { + font-size: 12px; +} +.dygraph-title { + font-size: 16px; +} +h1{ + margin-top: 20px; + margin-bottom: 20px; +} +pre{ + background: #f9f9f9; +} +/* +#main { + margin-top: 30px; +} +.row { + margin-top: 30px; +} +*/ +.row.smalltop { + margin-top: 10px; +} + +/* maybe just used on annotations.html ? */ +.thinborder { + border-width: 1px; + border-spacing: 0px; + border-style: solid; + border-color: black; + border-collapse: collapse; +} + +.thinborder td, +.thinborder th { + border-width: 1px; + padding: 5px; + border-style: solid; + border-color: black; +} + diff --git a/docs/ssi.py b/docs/ssi.py new file mode 100644 index 0000000..d750a0d --- /dev/null +++ b/docs/ssi.py @@ -0,0 +1,14 @@ +''' +Shared code for ssi_server.py and ssi_expander.py. +''' + +import re + +def InlineIncludes(path): + """Read a file, expanding statements.""" + content = file(path).read() + content = re.sub(r'', + lambda x: file(x.group(1)).read(), + content) + return content + diff --git a/docs/ssi_expander.py b/docs/ssi_expander.py new file mode 100755 index 0000000..184262c --- /dev/null +++ b/docs/ssi_expander.py @@ -0,0 +1,47 @@ +#!/usr/bin/python +''' +This script copies the files in one directory to another, expanding any SSI + statements it encounters along the way. + +Usage: + + ./ssi_expander.py [source_directory] destination_directory + +If source_directory is not specified, then the current directory is used. +''' + +import os +import ssi +import sys + +def process(source, dest): + for dirpath, dirnames, filenames in os.walk(source): + dest_dir = os.path.realpath(os.path.join(dest, os.path.relpath(dirpath, source))) + if not os.path.exists(dest_dir): + os.mkdir(dest_dir) + assert os.path.isdir(dest_dir) + for filename in filenames: + src_path = os.path.abspath(os.path.join(source, dirpath, filename)) + dest_path = os.path.join(dest_dir, filename) + if not filename.endswith('.html'): + os.symlink(src_path, dest_path) + else: + file(dest_path, 'w').write(ssi.InlineIncludes(src_path)) + + # ignore hidden directories + for dirname in dirnames[:]: + if dirname.startswith('.'): + dirnames.remove(dirname) + + +if __name__ == '__main__': + if len(sys.argv) == 2: + source = '.' + dest = sys.argv[1] + elif len(sys.argv) == 3: + source, dest = sys.argv[1:] + else: + sys.stderr.write('Usage: %s [source_directory] destination_directory\n' % sys.argv[0]) + sys.exit(1) + + process(source, dest) diff --git a/docs/ssi_server.py b/docs/ssi_server.py new file mode 100755 index 0000000..bf20b38 --- /dev/null +++ b/docs/ssi_server.py @@ -0,0 +1,70 @@ +#!/usr/bin/python +''' +Use this in the same way as Python's SimpleHTTPServer: + + ./ssi_server.py [port] + +The only difference is that, for files ending in '.html', ssi_server will +inline SSI (Server Side Includes) of the form: + + + +Run ./ssi_server.py in this directory and visit localhost:8000 for an exmaple. +''' + +import os +import ssi +from SimpleHTTPServer import SimpleHTTPRequestHandler +import SimpleHTTPServer +import tempfile + + +class SSIRequestHandler(SimpleHTTPRequestHandler): + """Adds minimal support for directives. + + The key bit is translate_path, which intercepts requests and serves them + using a temporary file which inlines the #includes. + """ + + def __init__(self, request, client_address, server): + self.temp_files = [] + SimpleHTTPRequestHandler.__init__(self, request, client_address, server) + + def do_GET(self): + SimpleHTTPRequestHandler.do_GET(self) + self.delete_temp_files() + + def do_HEAD(self): + SimpleHTTPRequestHandler.do_HEAD(self) + self.delete_temp_files() + + def translate_path(self, path): + fs_path = SimpleHTTPRequestHandler.translate_path(self, path) + if self.path.endswith('/'): + for index in "index.html", "index.htm": + index = os.path.join(fs_path, index) + if os.path.exists(index): + fs_path = index + break + + if fs_path.endswith('.html'): + content = ssi.InlineIncludes(fs_path) + fs_path = self.create_temp_file(fs_path, content) + return fs_path + + def delete_temp_files(self): + for temp_file in self.temp_files: + os.remove(temp_file) + + def create_temp_file(self, original_path, content): + _, ext = os.path.splitext(original_path) + fd, path = tempfile.mkstemp(suffix=ext) + os.write(fd, content) + os.close(fd) + + self.temp_files.append(path) + return path + + +if __name__ == '__main__': + SimpleHTTPServer.test(HandlerClass=SSIRequestHandler) diff --git a/docs/tutorial.html b/docs/tutorial.html new file mode 100644 index 0000000..c4e4dc5 --- /dev/null +++ b/docs/tutorial.html @@ -0,0 +1,402 @@ + + + + +

To use dygraphs, include the dygraph-combined.js JavaScript file and instantiate a Dygraph object.

+ +

Here's a basic example to get things started:

+ +

HTML

+<html>
+<head>
+<script type="text/javascript"
+  src="dygraph-combined.js"></script>
+</head>
+<body>
+<div id="graphdiv"></div>
+<script type="text/javascript">
+  g = new Dygraph(
+
+    // containing div
+    document.getElementById("graphdiv"),
+
+    // CSV or path to a CSV file.
+    "Date,Temperature\n" +
+    "2008-05-07,75\n" +
+    "2008-05-08,70\n" +
+    "2008-05-09,80\n"
+
+  );
+</script>
+</body>
+</html>
+

OUTPUT

+ +

HTML

+<html>
+<head>
+<script type="text/javascript"
+  src="dygraph-combined.js"></script>
+</head>
+<body>
+<div id="graphdiv2"
+  style="width:500px; height:300px;"></div>
+<script type="text/javascript">
+  g2 = new Dygraph(
+    document.getElementById("graphdiv2"),
+    "temperatures.csv", // path to CSV file
+    {}          // options
+  );
+</script>
+</body>
+</html>
+

OUTPUT

+ +

The file used is temperatures.csv.

+ +

There are a few things to note here:

+ +

The Dygraph sent off an XHR to get the temperatures.csv file.
The labels were taken from the first line of temperatures.csv, which is Date,High,Low.
The Dygraph automatically chose two different, easily-distinguishable colors for the two data series.
The labels on the x-axis have switched from days to months. If you zoom in, they'll switch to weeks and then days.
Some 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 (i.e. 200 instead of 193.4). Generally this works well.
The data is very spiky. A moving average would be easier to interpret.

+ +

HTML

+<html>
+<head>
+<script type="text/javascript"
+  src="dygraph-combined.js"></script>
+</head>
+<body>
+<div id="graphdiv3"
+  style="width:500px; height:300px;"></div>
+<script type="text/javascript">
+  g3 = new Dygraph(
+    document.getElementById("graphdiv3"),
+    "temperatures.csv",
+    {
+      rollPeriod: 7,
+      showRoller: true
+    }
+  );
+</script>
+</body>
+</html>
+

OUTPUT

+ +

Error Bars

+ +

HTML

+<html>
+<head>
+<script type="text/javascript"
+  src="combined.js"></script>
+</head>
+<body>
+<div id="graphdiv4"
+  style="width:480px; height:320px;"></div>
+<script type="text/javascript">
+  g4 = new Dygraph(
+    document.getElementById("graphdiv4"),
+    "twonormals.csv",
+    {
+      rollPeriod: 7,
+      showRoller: true,
+      errorBars: true,
+      valueRange: [50,125]
+    }
+  );
+</script>
+</body>
+</html>
+

OUTPUT

+ +

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 to true, each line is interpreted as YYYYMMDD, A, sigma_A, B, sigma_B, …
The first line of the CSV file doesn't mention the error columns. In this case, it's just "Date,Series1,Series2".
The averaging visibly affects the error bars. This is most clear if you crank up the rolling period to something like 100 days. For the earliest dates, there won't 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 there's a full 100 points to average.
The error bars are partially transparent. This can be seen when they overlap one another.

+ + +

GViz Data

+ +

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

+ +

Here's an example of a published gviz gadget using dygraphs:

+ + + +

Charting Fractions

+ +

The average of a1/b1 and a2/b2 is (a1+a2)/(b1+b2), not (a1/b1 + a2/b2)/2.
The normal approximation is not always applicable and more sophisticated confidence intervals (e.g. the Wilson confidence interval) must be employed to avoid ratios that exceed 100% or go below 0%.

+ +

Fortunately, dygraphs handles both of these for you! Here's a chart and the command that generated it:

+ +

Batting Average for Ichiro Suzuki vs. Mariners (2004)

+ + +Code: +

+new Dygraph(
+  document.getElementById("baseballdiv"),
+  "suzuki-mariners.txt",
+  {
+    fractions: true,
+    errorBars: true,
+    showRoller: true,
+    rollPeriod: 15
+  }
+);
+

+ +

A couple things to notice about this chart:

+ +

The error bars for Ichiro's 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 it clear where the "hot" and "cold" part of Suzuki's season were.
If you set the averaging period to something large, like 200, you'll see the team's and player's batting average through that game. The final number is the overall batting average for the season.
Where 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

+ +

Display: + + Nominal + + Real + + Annotations +

+ + + + +

Common Gotchas

+ +

Here are a few problems that I've frequently run into while using the dygraphs library.

+ +

If your chart doesn't display, be sure to check your browser's JavaScript error console. dygraphs makes every attempt to log errors and warnings, and these can often guide you in the right direction.
Make sure your CSV files are readable! If your graph isn't showing up, the XMLHttpRequest for the CSV file may be failing. You 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, … . And if you set the errorBars property, make sure you alternate data series and standard deviations.
dygraphs are not happy when placed inside a <center> 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 set.
Don't set the dateWindow property to a date. It expects milliseconds since epoch, which can be obtained from a JavaScript Date object's valueOf method.
Make sure you don't 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.

+ +

What next?

+ +

If you need to support Internet Explorer, check out our notes on IE.

+ +

To get some inspiration, look at how the charts in our gallery are built.

+ + + diff --git a/docs/users.html b/docs/users.html new file mode 100644 index 0000000..ca55417 --- /dev/null +++ b/docs/users.html @@ -0,0 +1,90 @@ + + +

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 you're using dygraphs, please send Dan a link and he'll 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 few uses 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 Drawing
+ This 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)
+“We 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 store.”
Eutelsat
+“Eutelsat 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 so we really appreciate the + excellent performance of dygraphs.”
10gen MongoDB + Monitoring Service
+A free monitoring service for MongoDB from 10gen (the + creators of MongoDB). Used by thousands of servers and users. 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 average features.
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 artÃculos periodÃsticos 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]). +
NOAA Great Lakes Water Level Dashboard
+ The Great Lakes Water Level dashboard was designed to help users view, understand, and compare Great Lakes surface water elevation data and forecasts from a variety of different sources, and across a variety of time scales ranging from monthly average values, to annual and multi-decadal values. First developed in Adobe Flash, a HTML 5 compatible version has been in the works and a functional draft is available here.

+ +

Are you using dygraphs? Please let Dan know and he'll add your link here!

+ + diff --git a/generate-documentation.py b/generate-documentation.py index 1a66689..f6d7d79 100755 --- a/generate-documentation.py +++ b/generate-documentation.py @@ -80,52 +80,36 @@ if debug_tests: sys.exit(0) # Extract a labels list. labels = [] -for nu, opt in docs.iteritems(): +for _, opt in docs.iteritems(): for label in opt['labels']: if label not in labels: labels.append(label) -print """ - - - Dygraphs Options Reference - - - - +print """ + + + + + + """ print """ -

Dygraphs

Options Reference

Usage """ for label in sorted(labels): print '
%s\n' % (label, label) -print '

\n\n' +print '

\n\n' print """ -

Options Reference

Dygraphs tries to do a good job of displaying your data without any further configuration. But inevitably, you're going to want to tinker. Dygraphs provides a rich set of options for configuring its display and behavior.

@@ -146,6 +130,9 @@ print """ new_option2: value2 }); + +

Some options can be set on a per-axis and per-series basis. See the docs on per-axis and per-series options to learn how to do this. The options which may be set in this way are marked as such on this page.

And, without further ado, here's the complete list of options:

""" @@ -218,9 +205,9 @@ Some callbacks take a point argument. Its properties are:

canvasx/canvasy: The canvas coordinates at which the point is drawn.

name: The name of the data series to which the point belongs

- - +

+ + """ # This page was super-helpful: diff --git a/push-to-web.sh b/push-to-web.sh index 00448c3..9234c57 100755 --- a/push-to-web.sh +++ b/push-to-web.sh @@ -19,6 +19,11 @@ chmod a+r docs/options.html if [ -s docs/options.html ] ; then ./generate-jsdoc.sh + temp_dir=$(mktemp -d /tmp/dygraphs-docs.XXXX) + cd docs + ./ssi_expander.py $temp_dir + cd .. + # Make sure everything will be readable on the web. # This is like "chmod -R a+rX", but excludes the .git directory. find . -path ./.git -prune -o -print | xargs chmod a+rX @@ -26,7 +31,7 @@ if [ -s docs/options.html ] ; then # Copy everything to the site. rsync -avzr gallery strftime rgbcolor common tests jsdoc experimental plugins $site \ && \ - rsync -avzr dashed-canvas.js stacktrace.js dygraph*.js gadget.xml excanvas.js thumbnail.png screenshot.png docs/* $site/ + rsync -avzr --copy-links dashed-canvas.js stacktrace.js dygraph*.js gadget.xml excanvas.js thumbnail.png screenshot.png $temp_dir/* $site/ else echo "generate-documentation.py failed" fi @@ -34,3 +39,4 @@ fi # Revert changes to dygraph-combined.js and docs/options.html git checkout dygraph-combined.js rm docs/options.html +rm -rf $temp_dir

`setAnnotations(array)`	Set the list of annotations currently displayed. This overwrites - existing annotations and redraws the dygraph.
`annotations`	Returns an array of the currently-displayed annotations.

`setAnnotations(array)`	Set the list of annotations currently displayed. This overwrites + existing annotations and redraws the dygraph.
`annotations`	Returns an array of the currently-displayed annotations.

Property	Description
`series`	Required The name of the series to which the annotated point belongs.
`x`	Required The x value of the point. This should be the same as the value you specified in your CSV file, e.g. "2010-09-13".
`shortText`	Text that will appear on the annotation's flag.
`text`	A longer description of the annotation which will appear when the user hovers over it.
`icon`	Specify in place of `shortText` to mark the annotation with an image rather than text. If you specify this, you must specify `width` and `height`.
`width`	Width (in pixels) of the annotation flag or icon.
`height`	Height (in pixels) of the annotation flag or icon.
`cssClass`	CSS class to use for styling the annotation.
`tickHeight`	Height of the tick mark (in pixels) connecting the point to its flag or icon.
`attachAtBottom`	If true, attach annotations to the x-axis, rather than to actual points.
`clickHandler`	See Handlers, below
`mouseOverHandler`	See Handlers, below
`mouseOutHandler`	See Handlers, below
`dblClickHandler`	See Handlers, below

Per-point field	Global option
`clickHandler`	`annotationClickHandler`
`mouseOverHandler`	`annotationMouseOverHandler`
`mouseOutHandler`	`annotationMouseOutHandler`
`dblClickHandler`	`annotationDblClickHandler`

Property	Description
`series`	Required The name of the series to which the annotated point belongs.
`x`	Required The x value of the point. This should be the same as the value you specified in your CSV file, e.g. "2010-09-13".
`shortText`	Text that will appear on the annotation's flag.
`text`	A longer description of the annotation which will appear when the user hovers over it.
`icon`	Specify in place of `shortText` to mark the annotation with an image rather than text. If you specify this, you must specify `width` and `height`.
`width`	Width (in pixels) of the annotation flag or icon.
`height`	Height (in pixels) of the annotation flag or icon.
`cssClass`	CSS class to use for styling the annotation.
`tickHeight`	Height of the tick mark (in pixels) connecting the point to its flag or icon.
`attachAtBottom`	If true, attach annotations to the x-axis, rather than to actual points.
`clickHandler`	See Handlers, below
`mouseOverHandler`	See Handlers, below
`mouseOutHandler`	See Handlers, below
`dblClickHandler`	See Handlers, below

dygraphs Annotations

Demo: Dow Jones Industrial Average

Adding Annotations

HTML

Adding Annotations

HTML

OUTPUT

Modifying Annotations

Annotations property reference

Annotation event handlers

OUTPUT

Modifying Annotations

Annotations property reference

Annotation event handlers

Guide to making dygraphs changes

dygraphs style

Sending a Pull Request

Guide to making dygraphs changes

dygraphs style

Sending a Pull Request

CSS Reference

dygraphs Data Format

CSV

Headers

x-values

y-values

Fractions

Standard Deviations

Custom error bars

URL

Array (native format)

Headers

x-values

y-values

Functions

DataTable

dygraphs Data Format

CSV

Headers

x-values

y-values

Fractions

Standard Deviations

Custom error bars

URL

Array (native format)

Headers

x-values

y-values

Functions

DataTable

dygraph-combined.js

Notes on GWT

dygraphs

Internet Explorer Compatibility

Documentation

Project

Demos/Usage

dygraphs is a fast, flexible open source JavaScript charting library.

dygraphs JavaScript Visualization Library

A demo is worth a thousand words:

Some things to notice:

Features

Usage

HTML

OUTPUT

HTML

OUTPUT

HTML

OUTPUT

Error Bars

HTML

OUTPUT

Getting Started

Quick Links

Internet Explorer Compatibility

GViz Data

Charting Fractions

One last demo

Other Options