Morris.js: Pretty time-series line graphs | Hacker News Reader

Morris.js: Pretty time-series line graphs

oesmith.github.com

169 pointsoesmith25 comments

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.

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.

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

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

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

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

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

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!

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!

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?

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..)

I see. Have you considered rendering a Dom element in JavaScript instead of the SVG approach? As a developer I feel there is a lower barrier of entry for me because I pretty much don't need to understand SVG, or Raphael for that matter, to use your library otherwise, however I would like more control over the overlay elements.

In any case, great work!

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.

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.

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.

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

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

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

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

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/

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!

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/

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.

Take a look at Rickshaw:

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

It is built on top of D3.

Thanks for the suggestions!

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/

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?

Reply on news.ycombinator.com