bleeding-edge-sample-app
bleeding-edge-sample-app copied to clipboard
backstopmedia
Charting survey activity
I think three reasonable approaches for this are:
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?
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.
Yeah responses over time. Per hour probably makes more sense considering the application is short lived.
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?
well that is pretty definitive! - How does react-art compare? I have not used it myself at all.
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.
