Rickshaw JS axis render issue when called within AJAX success function

Question

I am creating a graph using Rickshaw JS. To do this i have created a function which when called renders the graph. The issue i am facing is when called within the script tags, the function renders everything fine, as i expect. However when called from within the success function of an AJAX call, the axes do not show up.

Relevant code snippet:

<script>
function ProbabilityPlot(a) {
    var graph = new Rickshaw.Graph({
       ...
    });
    graph.render();

    var xAxis = new Rickshaw.Graph.Axis.X({
       ...
    });
    xAxis.render();

    var yAxis = new Rickshaw.Graph.Axis.Y({
       ...
    });
    yAxis.render();
};

$.ajax({
    url: plotURl,
    dataType: 'json',
    cache: false,
    success: function(data) {
        ProbabilityPlot([ {{plot_data}} ]); <-- axes do NOT work
    }
});

ProbabilityPlot([ {{plot_data}} ]); <-- eveything works perfectly
</script>

I can verify that the parameters passed onto the function are same in both cases.

Answer 1

Not sure about how it was fixed or what the underlying issue is, but the fix (atleast for now) was to move the scripts to the head of the html.

<script src="{% static "Home/js/vendor/jquery.js" %}"></script>
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>