

Morris.js: Pretty time-series line graphs - oesmith
http://oesmith.github.com/morris.js/

======
sudonim
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
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.

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

~~~
dmvaldman
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?

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

~~~
dmvaldman
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!

------
jashkenas
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...](https://github.com/oesmith/morris.js/blob/master/morris.coffee#L19-52)

... 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
Thanks! Refactoring redraw() is high up on my list of priorities now that
other people can see the code ;)

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

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

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

------
jacobolus
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
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!

~~~
danvk
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.

------
rplnt
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
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?

