Morris.js: Pretty time-series line graphs

http://oesmith.github.com/morris.js/

by oesmith • 14 years ago

169 25 14 years ago

oesmith.github.com

oesmith5• 14 years ago

This is my first (proper) open-source release. I'd be very grateful for feedback from HN!

jzawodn• 14 years ago

Having use flot for stuff like this, what do you see as the main benefits for your library? Looking over the docs, I'd guess "simplicity" since it seems pretty easy to get going.

Similarly, are there many plans for enhancements, or is that really a question of which patches start rolling in?

Thanks!

oesmith5• 14 years ago

Simplicity was definitely the prime motivator when I chose to write the graphing code from scratch for howmanyleft.co.uk (instead of using flot or similar). I also wanted something that worked reasonably well on mobile and desktop. Morris.js scales relatively well to small screens, and it also supports touch events.

Immediate improvements are likely to be better date handling and x-axis labelling (really they're both fixes rather than enhancements). Development so far's been driven by my rather specific requirements for howmanyleft.

I'd not initially intended to release it, but several requests from other interested developers prompted me to stick it up on github with a quickly hacked-together project page. I'm keen to see what other devs would like to do with it!

dmvaldman2• 14 years ago

Looks great for what it was designed to do! One question I'm trying to answer is how the overlays are generated. You mention they refer to an element tag, but that still leaves me confused. Is there a template that is filled in with values? Is it a DOM element that I can add event handlers to?

Have you thought about making more powerful features, say, realtime adjustment of the axes, zooming, etc?

Personally I'm interested in having things like this for analytics. One thing I'd like to see is some kind of interaction with D3.js in case i wanted to visualize the data in other ways. Any ideas on integrating this with that library?

oesmith5• 14 years ago

It uses Raphaël.js to insert an SVG (or VML on old IE) element into the container. There's definite potential for hooking into DOM events, although there's no code to support that at the moment.

Zooming/panning isn't something I've had a need for yet, the same for data bindings. There's no reason why they couldn't be integrated (although D3 could be a pretty serious job..)

justincormack• 14 years ago

If you want those things you should just use d3.js. It is simply not possible to do that with VML so the Raphael compatibility layer just gets in the way.

pan69• 14 years ago

This is absolutely great! You've done an awesome job.

The only feedback I have is that, when you're not hovering, or exiting a chart with your mouse, the balloon displaying the information at a certain point should disappear.

gotrythis2• 14 years ago

Your graph looks great!

We use jqplot, but are looking for an alternative that is also in JS, but more similar to the google analytics graphs. Your's comes close in looks. Any plans for:

a) Inline labels like google analytics, instead of under and to the left of the graph. Makes it so much more pretty, as the graph can have its edges match the rest of the interface.

b) Support for updating data for a live data stream, scrolling the graph?

c) Stacked area graphs (as in just filling in the backgrounds)

Anyone else know of a javacript graph that might suit our needs?

Thanks!

yesbabyyes• 14 years ago

It's a little more involved than a simple graph tool, but I can heartily recommend d3. Especially when it comes to live data, granular control over rendering etc.

http://mbostock.github.com/d3/

danvk• 14 years ago

dygraphs can do (b) & (c): http://dygraphs.com/tests/stacked.html http://dygraphs.com/tests/dynamic-update.html

You could hack in (a), though it might be a bit of a challenge. If you have a lot of data, the other valuable thing that dygraphs gives you is the ability to pan/zoom your charts.

joeshaw• 14 years ago

Take a look at Rickshaw:

http://shutterstock.github.com/rickshaw/

It is built on top of D3.

gotrythis2• 14 years ago

Thanks for the suggestions!

sudonim• 14 years ago

I spent a good chunk of my sunday yesterday with my cofounder playing with g.raphael.js. After some frustration with raphael and concerns of a giant rabbit hole, we ended up planning to go with Highcharts. The $360 per developer license felt a little steep. We're still experimenting and Morris looks awesome.

Thanks for sharing. We may be forking and pull-requesting soon.

quest88• 14 years ago

I think you'll be glad you went with a library instead of drawing by hand. You'll have a lot less code to maintain so you can focus on your product.

muyuu• 14 years ago

Check out jqplot as well. It's quite comprehensive.

PS: Bitbucket's version is more recent than the one in Github.

kilian• 14 years ago

Check out Grafico, it uses raphael.js too: http://grafico.kilianvalkhof.com

DanielRibeiro• 14 years ago

Many alternatives: http://sixrevisions.com/javascript/20-fresh-javascript-data-...

jashkenas• 14 years ago

Ticking countdown for all the pedants from the other thread to come and yell at you for not naming it "Morris.coffee" ;)

Neat stuff -- I dig your defaults: https://github.com/oesmith/morris.js/blob/master/morris.coff...

... and you may want to move some of the helper functions within "redraw" out into regular instance functions, for clarity, and since you're already using a class.

oesmith5• 14 years ago

Thanks! Refactoring redraw() is high up on my list of priorities now that other people can see the code ;)

ricardobeat• 14 years ago

Is there an option to turn off the curve smoothing? It causes some misleading effects.

oesmith5• 14 years ago

Not yet, but it'll be an easy fix.

https://github.com/oesmith/morris.js/issues/12

jacobolus• 14 years ago

Pet peeve: I really hate the “feature” of adding arbitrary (as in, not related to the data or any reasonable model of them) spline interpolation through data points to make them look “smooth”, especially for these charts that really should be bar charts (i.e. represent quantities of items).

Anyway, this sort of thing can be helpful for quick one-offs, but for anyone who runs into the limits of what a tool like this one can do, and needs something more customizable or sophisticated, remember to take a look at D3. It really is neat. http://mbostock.github.com/d3/

rplnt• 14 years ago

I'm about to need something like this and I was thinking about using Google Charts[1]. What would I miss out? The thing is I don't want to introduce big requirement (jquery) if it is not necessary.

1. http://code.google.com/apis/chart/

pstinnett• 14 years ago

I just used RGraph for some charts in an application I'm working on. The biggest pain for me has been plotting time-based data and I wish I had seen this first.

Does the graph handle hours/minutes/seconds or no?

Morris.js: Pretty time-series line graphs

Related Stories