top | item 3640737

Morris.js: Pretty time-series line graphs

169 points| oesmith | 14 years ago |oesmith.github.com | reply

25 comments

order
[+] sudonim|14 years ago|reply
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|reply
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|reply
Check out jqplot as well. It's quite comprehensive.

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

[+] oesmith|14 years ago|reply
This is my first (proper) open-source release. I'd be very grateful for feedback from HN!
[+] jzawodn|14 years ago|reply
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!

[+] pan69|14 years ago|reply
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.

[+] dmvaldman|14 years ago|reply
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?

[+] jashkenas|14 years ago|reply
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.

[+] oesmith|14 years ago|reply
Thanks! Refactoring redraw() is high up on my list of priorities now that other people can see the code ;)
[+] jacobolus|14 years ago|reply
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/

[+] gotrythis|14 years ago|reply
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|reply
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/

[+] rplnt|14 years ago|reply
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|reply
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?