Charting survey activity

[rtfeldman]

We need a component to graph survey activity, which will look like this:

[rtfeldman]

I think three reasonable approaches for this are:

1. chartjs
2. react-art
3. Just put in a <canvas> and issue drawing instructions on mount

I'm leaning toward chartjs because it doesn't require the user to learn any other APIs.

react-art requires learning the ART vector drawing API, and drawing on the canvas requires learning at least a bit about the HTML5 Canvas API. Neither of those seem particularly useful to our readers, whereas wrapping arbitrary non-React libraries (in this case a chart) in React components does seem like a useful thing to demonstrate.

Thoughts?

[brigand]

It's pretty simple with just SVG. I just threw together an example.

http://jsbin.com/kivibowetubo/6/edit?js,output

It's probably better to show using a plugin if we're not doing that elsewhere. Otherwise I think showing off some declarative SVG is cool. I don't know if you've seen the source for charting libraries, but usually a line chart is a few hundred lines of code.

[jonathan-beebe]

What exactly are we plotting? Responses per hour or day?

[brigand]

Yeah responses over time. Per hour probably makes more sense considering the application is short lived.

[rtfeldman]

Things I've learned so far:

• chartjs eagerly attempts to shim window.requestAnimationFrame, which means even the act of requiring it on the server throws an exception for window being undefined.
• Any charting library that has a dependency on D3 kills our build, as the JSX compiler detects a syntax error somewhere in D3's source and won't proceed.

It seems like the best solution here is to use @brigand's SVG approach instead of a charting library.

Thoughts?

[karlmikko]

well that is pretty definitive! - How does react-art compare? I have not used it myself at all.

[rtfeldman]

Looked into react-art a bit. It seems like a pretty thin wrapper around another drawing library (ART instead of SVG), so I'd say we might as well just go with @brigand's example to save time.

[hojberg]

working on this right now