How to display data when using Rickshaw.Graph.Ajax

Question

1.) How can I access the data using new Rickshaw.Graph.Ajax? My complete code is below, including a sample set of the JSON that is being called via AJAX:

(function(){
    var ajaxGraph = new Rickshaw.Graph.Ajax( {
        element: document.getElementById("chart"),
        width: 400,
        height: 200,
        renderer: 'line',
        dataURL: '/data.json',
        onData: function(data) {
            var arrData = [];
            $.each(data[0], function(i, l){
                var rawData = l.data;
                arrData.push(rawData);
                return arrData;
            });

        }
    } );

})();

//JSON SAMPLE

[{
    "took": 32,
    "total": 34200,
    "strokeVolume_count": {
        "name": "strokeVolume_count",
        "data": [
            {"x": 1387130400000,"y": 1800},
            {"x": 1387134000000,"y": 1800}
         ]
     }
}]

2.) How should I know when to use .render() method? I've seen examples of this being used on some charts and not on others. I've read the Rickshaw/github documentation explaining that you use it either to draw or redraw a graph, however, I have seen other examples display without use of this method.

score 1 · Answer 1 · answered Jan 07 '14 at 17:28

I'm not entirely sure what you mean by your first question, but you need to return an array of series objects from the onData function.

Regarding calling graph.render(), I've had success placing the call in the onComplete callback like so:

(function(){
    var ajaxGraph = new Rickshaw.Graph.Ajax( {
        element: document.getElementById("chart"),
        width: 400,
        height: 200,
        renderer: 'line',
        dataURL: '/data.json',
        onData: function(data) {
            return [{
                name : "Stroke Volume"
                data : data[0].strokeVolume_count.data;
            }];
            // or simply return [data[0].strokeVolume_count]; since it looks like a series object already
        },
        onComplete: function() {
            // this is also where you can set up your axes and hover detail
            this.graph.render();
        }
    } );

})();

How to display data when using Rickshaw.Graph.Ajax

1 Answers1