dygraphs 1.1.0

Earlier this week I released dygraphs 1.1.0, a major new release which contains the last ~15 months of work. The dygraphs site is running it. You can learn more about hosted versions and installing it with NPM or bower from the download page.

There have been far too many changes to cover them exhaustively, but here are a few highlights.

dygraphs is now "retina" compatible

As anyone with a "retina" screen will tell you, low resolution graphics really stand out. Resolution independence is a natural advantage for SVG charting tools like D3. To get crisp charts on high resolution screens, dygraphs creates a larger canvas which is scaled down to fit the logical pixels on your screen. A big thanks to Paul Holden for his work on this.

Using a non-existent option now throws

dygraphs has a lot of options. Previously, if you had a typo in one of your option names, dygraphs would silently drop it. With 1.1.0, if you source dygraph-combined-dev.js,  an invalid option or series name will throw. Say goodbye to mysterious misconfigurations!

More sensible date ticks

dygraphs has displayed ticks like "Jan 08" (for January 2008) and "29Jan" (for January 29th) since it was first released. As we entered the current decade, the former has become a source of confusion: does "Jan 12" mean January 12th or January 2012? With this release, dygraphs uses the more sensible formats "Jan 2008" and "29 Jan".

Dramatically improved performance for filled charts

If you're plotting a million points on a 1000px wide chart, there's no sense in drawing all of them (this is called "overplotting"). For many years, dygraphs has dropped segments on line charts which would have no visible impact. This was not true for filled charts, however. If you turned a line chart into a filled chart, you could easily see a 1000x slowdown. For this release, I reworked the drawing code for filled charts and added the dropped point optimization. Click that link to see a diagram.

x-axis log scales

Previously you could only have log scales on the y-axis. Now you can have them on the x-axis! This allows log-log plots. Thanks to kberg for making this happen.

The labelsUTC option forces UTC formatting for all labels

Time zones are a mess. Sometimes you just want to use UTC and pretend they didn't exist. And now you can! Set the new labelsUTC option and specify your dates using either ISO-8601 format or new Date(Date.UTC(...)). Thanks to joanpau for contributing this great new option!

The new DataHandler system allows for more flexibility in data loading

DataHandlers unify the way that dygraphs loads and processes data. This API is exposed via the dataHandler option, and it should allow dygraphs users to create their own custom data formats. You can read more about this feature in its design doc. Stay tuned for a blog post exploring this! Thanks to David Eberlein for this.

"this" is set to the dygraph in all callbacks

dygraphs has more than a few callback options. Some of them take the relevant dygraph object as a parameter while others don't. In retrospect this was poor API design, but it's a design that we're stuck with. Most JavaScript libraries pass a relevant object to functions via this and now dygraphs does the same.

You can now get a reference to the relevant dygraph from any callback via this.

dygraphs has also shrunk, because we moved some stuff into "extras" (133kb→122kb). Hopefully this won't affect you, but if it does, you can find the missing functionality in that directory.

This will be the last release of dygraphs which supports older versions of Internet Explorer. We've already begun ripping out the shims for older browsers. Expect a leaner, meaner dygraphs soon!

Finally, a big thanks to everyone who contributed to this release. GitHub lists an amazing 54 contributors to dygraphs over the years!

dygraphs issues on GitHub

I've moved the dygraphs issue tracker from Google Code over to GitHub issues. The new issues link back to the old, though not vice versa.

My hope is that moving to GitHub will increase community involvement, since it's a more familiar, modern system.

The migration process was fairly painless. I used a tweaked version of the google-code-issues-migrator and took inspiration from beet's moving from Google Code to GitHub: a horrible, ultimately rewarding odyssey.

PyDyGraphs, a dygraphs plotting module for IPython Notebooks

(Guest post by Zach Dischner)

PyDyGraphs on Github (mostly written by Kevin Dinkel)

The IPython Notebook is an excellent tool for interacting with Python and displaying data in real time. While tools like matplotlib can generate static plots in an IPython Notebook, we often find their plots to be slow to render and the minimal interactivity limits their usefulness in practice. Being a long time fan of dygraphs, we wrote a module to render the JavaScript plots in the Notebook. This module can be readily included in an IPython Notebook and then used to generate beautiful, fast, and interactive time series plots with dygraphs, all stored locally with no need for remote hosting.

PyDyGraphs is far from mature, but what proved to be a simple effort of integrating the DyGraphs library into the Notebook environment has already been enormously useful and fun to use. The whole thing only took a day or two to write, and has become my new go-to plotting tool for time-series data.

Purpose

Originally, PyDyGraphs was meant as a Pandas Dataframe plotter. The Dataframe is a powerful data structure, and the lack of an adequate visualization tool lead to the creation of the PyDyGraphs plotting module. The Dataframe is already a relational data structure, and is easily provided to Dygraphs for visualization. Support for typical time series arrays has been added, but those simply get translated to DataFrames along the way.

I am one of the lead software developers and main instrument operator on the BRRISON/BOPPS high altitude balloon mission. With flight times on balloon missions potentially being limited to hours, immediate and intuitive interpretation of flight telemetry is absolutely essential in order to make the fast decisions needed to maximize achievement of science goals. We found that matplotlib figures were simply too slow and too static for our needs. Hence PyDyGraphs! We created the module to follow the same basic behavior as matplotlib, but give you much of the awesome functionality of dygraphs.

Enough words, here are some examples.

2x2 subplot

Similarly 3x3 Plot

How it Works

At its core, this module creates a JavaScript string for use within an IPython Notebook. It takes advantage of the Notebook’s built in “Kernel” and “Callback” JavaScript interactivity tools to get data between Python and JavaScript. We based it off of this SO question (thanks danvk!)

Conclusion

PyDyGraphs is a simple, easy to use wrapper of the epic dygraphs plotting library. We are using it for personal and professional projects, and are just plain stoked about being able to mix Python/dygraphs.

For more examples, check out our github: https://github.com/DayStarEngineering/PyDyGraphs

There are plenty of todos and ideas, so feel free to fork and contribute.

dygraphs as an NPM package

dygraphs is now available as an NPM package.
NPM is the NodeJS package manager. It works well enough that it's used for all sorts of packaging, even when NodeJS isn't involved.

To install dygraphs via NPM, simply run:

npm install dygraphs

This will install dygraphs under a node_modules directory, for example:

ls -lh node_modules/dygraphs/dygraph-combined.js 

Once you've got it installed, you can source it from that location in your web page, web server, Python program, whatever.

If you create a package.json file, you can specify a specific version of dygraphs that you'd like to depend on. That way, you can keep getting a compatible version in the 1.x series, even after we move on to 2.x.

Announcing dygraphs 1.0.0!

Today is a big day for dygraphs. With a controlled set of scripts and procedures, we are moving dygraphs to controlled releases, and with that, we’re proud to announce dygraphs version 1.0.0!

While this means that you’ll still have access to the very latest source, there will always be permanent, stable resources available for 1.0.0:

• Minified code: http://dygraphs.com/1.0.0/dygraph-combined.js
• Documentation: http://dygraphs.com/1.0.0/
• Source: https://github.com/danvk/dygraphs/tree/release-1.0.0

That means the next bug fix release will be version 1.0.1, the next feature release will be 1.1.0, and who knows what 2.0.0 will look like?

The master branch will continue to have the latest development code.

Brief History of dygraphs

For its first official "release", let's take a quick trip down dygraphs memory lane.

Dan originally created dygraphs in 2006 to serve his team's internal dashboard at Google. It was based on PlotKit, by Alastair Tse. (Curiously, Dan and Alastair would share an office in 2012 before discovering this connection.) Even now, dygraphs is often used for internal dashboards, a reflection of this original use case. Back in 2006, Firefox 1.5 and Safari were the only browsers which supported <canvas>. Given their market shares, Dan didn't see much value in releasing dygraphs publicly.

In 2009, Dan found that dygraphs was useful to his new group at Google for something other than an internal dashboard. So he decided to open source it! The initial commit was to Google Code, but the project moved to github shortly thereafter. dygraphs gained some initial attention at this time via a Hacker News post.

In 2010, Robert started working on dygraphs, contributing several major features and greatly improving the community. You can thank him for the dygraphs tests suite, the dygraphs gallery and this blog!

In 2012, Klaus began contributing to dygraphs and encouraged us to move towards a plugin model. As we did this, it became increasingly clear that we needed a way to deprecate certain parts of the API. And that's how we've arrived at version 1.0.0!

Why Do Release Branches

Here are the benefits of creating release branches:

• It will allow us to add powerful new features: We have lots of features we want to add, but some of them are hard to do with some of our archaic features, or will break existing APIs, which leads to the next benefit.
• It will allow us to break backward-compatibility: there are some old options, API and behaviors that we would like to remove for the sake of cleanliness. We would also like to change how charts appear in some ways that might frustrate users who rely on the existing rendering. We also want to drop support for excanvas and Internet Explorer earlier than IE9 (which added native support for <canvas>). 
• It will allow you to have reliable, consistently tested, releases: Someone who relies on a specific version doesn’t want to have to know a specific git commit SHA, nor should a user always have to suffer when new patches are released that may break backward compatibility.
• It will help turn plug-ins to a first-class feature. Plug-ins can be a powerful feature, again, if we break backward compatibility.

Here’s what won’t change: 

• Easy configuration: The Hello, World! of dygraphs is pretty darn simple, and that’s how we want it to stay.
• Rendering large data sets quickly: This has been an extremely powerful part of dygraphs, and it has to stay that way. In fact, we have a change pending that will improve performance by 100%. There’s plenty of things to work out: deployment strategy, testing strategy, git branching strategy, refactoring for the plug-ins architecture, and so on.
• Quick support on the mailing list: We enjoy making sure dygraphs works for you, and really enjoy the people in the community growing around it.

Waaaait a minute. Wasn't dygraphs at version 1.2 for, like, forever?

Yeah, we feel sheepishly guilty about that. But we're moving to an active versioning numbering scheme with three number identifiers, so while it may seem like we'll release another 1.2 one day, in fact it will be 1.2.0, and before too long we'll have 1.2.1, 1.3.0, and on into the future, and this whole "1.2" thing will be a distant memory.

Want to help craft the future of dygraphs?

Here’s what we need from you: are you interested in helping us refactor dygraphs? Do you like writing tests? Is there a feature you're dying to implement? Do you have opinions about the plug-in architecture? Then we want to speak with you. Drop us a note at dygraphs-users@googlegroups.com

Thank you

We wouldn’t have even considered building a new release if we felt it wouldn’t be a great benefit to all of you. Your support and feedback has been valuable and encouraging, so please keep it up.

Here’s Dan, hard at work releasing 1.0.0 for you!

Changes to the Experimental Palette

Hey Dygraphers,

I've been working on some bugs and features, and while at it, been pushing some nice new features into the experimental palette that makes it eminently more useful. Let's take a tour. You can play along at http://www.dygraphs.com/experimental/palette

1. Option Set drop-down

Using the Option Set dropdown on the palette, you can configure any axis or series that you like.

Go ahead and select line (series). You'll see a subset of the options that apply to individual series.

2. Move the line series to the second y-axis.

In the axis text box, type "y2" and press "enter" (or click Redraw, if you prefer.) The second axis will appear.

3. Configure the second y-axis.

The line is on the second y-axis, but it's not obvious. Let's make all series on the second y-axis stand out. Select y2 axis from the Option Set drop-down, and set drawPoints to true, and and pointSize to 5. Click Redraw. Presto!


4. View the options as a hash.
On the top-right of the palette is a link "to hash". Click it, and the options text box appears.

5. Change the options as a text object.

Sometimes tweaking via the object hash is the way to go. In the text box, change axisLineColor from white to green. Then click OK.

OK I didn't pick the best example because it's hard to see, but this axis is green.

Let's zoom in:

There you go! (hmm... why is there a little red in the axis?) Probably to help celebrate the christmas spirit. Happy New Year!

Dygraphs 2012 Year in Review

2012 was a busy year for Dygraphs.

We had almost 400 commits over the year (with a month to go, no less.)  And something you'll notice is that this year we had a _huge_ number of external contributors. So first and foremost, thank you to everybody who contributed to Dygraphs.

Robert Konigsberg: 175
Dan Vanderkam: 137
Klaus Weidner: 30
Adam Vartanian: 5
Uemit Seren: 5
Josep Llodrà: 4
David Moena: 3
Joshua: 3
Paul Felix: 3
Beda Kosata: 2
Jason Hollingsworth: 2
Wim Bruynooghe: 2
wimme: 2
David M Sibley: 1
David Watrous: 1
Helder: 1
James H Thompson: 1
Matt Miller: 1
Richard Klemm: 1
Russell Valentine: 1
bluthen: 1
mbghsource: 1
shole: 1
timeu: 1

Here's an overview of the major new features:

• Added custom plotters. This is brand new, but as the examples demonstrate, new chart types are easy to draw.
• Added a plug-in architecture which will be used to separate and expand behavior.
• Introduced tablet support.
• Rewrote the options processing mechanism, and added a saner way to specify axes.
• Added drawing custom points and custom lines.
• Introduced many changes that significantly increased Dygraphs performance. Dygraphs focus on performance compared to other popular graphing libraries has been independently verified by a third-party. How nice!
• Strengthened our automated test suite in a variety of ways, including simpler command-line testing with phantomjs and a local page to facilitate debugging
• Introduced some experimental toys like the gallery and palette.
• Fixed 83 reported bugs

What a great year! See you in 2013.