Rickshaw.js graph with ajax/jsonp adding axis

Question

I'm new to javascript jQuery and JSON and I'm starting a project where I'd like to do some graphs in a browser. Digging through tutorials and examples I'd like to create a graph with some data gathered with JSON and then work with the graph as shown in the examples (adding axes... ).

So I'm pretty sure the problem is that creating the graph with var ajaxGraph = new Rickshaw.Graph.Ajax doesn't return the same object as var graph = new Rickshaw.Graph. The Rickshaw.Class.create function used for var ajaxGraph = new Rickshaw.Graph.Ajax is too complicated for me to comprehend with my current skills. Can I somehow get the proper graph object from Rickshaw.Graph.Ajax? Or should I try to use JSON separately and then call var graph = new Rickshaw.Graph somehow?

Thanks for any hints.

Answer 1

I would definitely consider rather doing the JSON stuff separately, getting the data into the correct format and then binding Rickshaw to it.

Doing that might not be as hard as you think and will be useful later on for different work. Using Rickshaw's ajax abstraction doesn't really save you from complexity in my opinion.

Here's a screencast that I created that goes through exactly what you need: http://tagtree.tv/d3-with-rickshaw-and-angular. It might be a bit more complex because it plonks a Rickshaw graph into an Angularjs app, which has it's own challenges. But what it does show you, is how to massage the data you get from the server into the correct format to give to Rickshaw.

Getting the data from the server with jQuery is quite easy. You can use the shorthand ajax methods:

http://api.jquery.com/category/ajax/shorthand-methods/

Or even get to know the ajax call (I think it's better to start here):

http://api.jquery.com/jQuery.ajax/

Then massaging the data so that Rickshaw can bind to it, I would recommend using underscore:

http://underscorejs.org/