jQuery.ajax and Rickshaw - Callback functions?

I wrote the following code. I have a json file on my server that is valid and looks like:

[
  {
    "data": [
      {
        "y": 1.0,
        "x": 1451936340.0
      },
      {
        "y": 1.0,
        "x": 1451936400.0
      },
      {
        "y": 1.0,
        "x": 1451936460.0
      }
    ]
  }
]

I have the following code. I am trying to draw a line chart and overlay points on the line chart using renderer: 'multi' but I am hitting a lot of snags. I am a novice with JS and I do not understand where I am messing up. I think I need a callback function in my jQuery.ajax function but I am unsure. I appreciate any help.

<html>
<head>

    <!-- css  -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.css">

  <!-- js -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

    <script>
        jQuery.noConflict();
    </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>

</head>

<body>

    <div style="margin:10px auto;width:auto;" id="chart_container">

        <div id="chart"></div>
        <div id="slider"></div>

        <script>

            var json = jQuery.ajax({
                'url': "/assets/json/data.json",
                'success': function(json) {
                  console.log(json[0].data);
                }
            });

            var graph = new Rickshaw.Graph( {
                element: document.getElementById("chart"),
                renderer: 'multi',
                height: 200,
                width: 400,
                series: [
                                {
                                            name: "series 1",
                                            data: json[0].data,
                                            color: "rgba(255, 0, 0, 0.4)",
                                            renderer: "line"
                                }, {
                                            name: "series 2",
                                            data: json[0].data,
                                            color: "rgba(255, 0, 0, 0.4)",
                                            renderer: "scatterplot"
                                }
                ]
            } );

            graph.render();

            var slider = new Rickshaw.Graph.RangeSlider.Preview( {
                graph: graph,
                element: document.querySelector('#slider')
            } );


            var detail = new Rickshaw.Graph.HoverDetail( {
                graph: graph
            } );

            graph.render();

        </script>

    </div>

</body>

Solution

There are a few things I would change here.

1.) jQuery.ajax returns a promise, not the raw data itself, so var json = jQuery.ajax(...) will not assign the json value you are expecting.

2.) pass a success callback function to properly access the JSON returned by the server

3.) Only call graph.render() once.

Javascript

jQuery.ajax({
  'url': "/assets/json/data.json",
  'success': renderGraph // callback for ajax success
});

// wrap graph creation logic in a function to be used as a callback
function renderGraph(json) {
  var graph = new Rickshaw.Graph({
    element: document.getElementById("chart"),
    renderer: 'multi',
    height: 200,
    width: 400,
    series: [{
      name: "series 1",
      data: json[0].data,
      color: "rgba(255, 0, 0, 0.4)",
      renderer: "line"
    }, {
      name: "series 2",
      data: json[0].data,
      color: "rgba(255, 0, 0, 0.4)",
      renderer: "scatterplot"
    }]
  });

  // remove this, only render once at the end
  // graph.render();

  var slider = new Rickshaw.Graph.RangeSlider.Preview({
    graph: graph,
    element: document.querySelector('#slider')
  });


  var detail = new Rickshaw.Graph.HoverDetail({
    graph: graph
  });

  graph.render();
}