AJAX和NVD3.JS未捕获的对象错误令人讨厌的问题

Question

I am working on a script to be able to call data for my chart from a external php file.

I have tried just dropping the data into the chart manually and it works completely fine.

But when I do a ajax call to pull in the data, i get the following error -

`Uncaught TypeError: Object
[{"key":"O2","values":[{"x":"NRW ","y":1},{"x":"WRW ","y":3}]},{"key":"O1","values":[{"x":"ME ","y":1},{"x":"FST ","y":1},{"x":"SRW ","y":1},{"x":"LRW ","y":4}]},{"key":"O3","values":[{"x":"SEDG ","y":1},{"x":"DLDW ","y":1},{"x":"SM ","y":1},{"x":"DEDDN ","y":1},{"x":"LEEW ","y":3}]},{"key":"O4","values":[{"x":"BUEC ","y":2}]}];

has no method 'map'`

Here is part of my pages code -

<script> 

        var update = function() {


        var jsonData = $.ajax({
        url: "http://localhost/getData.php",
        async: false
        }).responseText;




        var chart;
        nv.addGraph(function() {
        chart = nv.models.multiBarChart()
        .color(d3.scale.category10().range())
        .rotateLabels(0)      //Angle to rotate x-axis labels.
        .transitionDuration(250)
        .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
        .groupSpacing(0.24)    //Distance between each group of bars.

        ;

        chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);

        chart.x (function(d) { return d.x; })


        chart.yAxis
        .tickFormat(d3.format(',.1f'))
        .axisLabel('Defect Count')
        .axisLabelDistance(40);

        d3.select('#chart1M svg')
        .datum(jsonData)
        .call(chart);

        return chart;     
        });
        };

</script>

Any help much appreciated

Answer 1

As @bart_s said in the comments, your JSON is invalid (if shouldn't end in a semi-colon). Here's a handy tool to check your JSON: http://jsonlint.com/.

That out of the way, you have bigger problems. Why are you using jQuery's $.ajax when d3 provides a better way to make the call? Why is your ajax call synchronous? Also, you should not use an absolute URL in the AJAX call unless you really, really need to. That http://localhost bit will fail when you deploy this.

Here's how I would write this:

d3.json("getData.php", function(jsonData) {  // assuming getData.php is served out of the same directory as the javascript

  var chart;
  nv.addGraph(function() {
    chart = nv.models.multiBarChart()
      .color(d3.scale.category10().range())
      .rotateLabels(0) //Angle to rotate x-axis labels.
    .transitionDuration(250)
      .showControls(false) //Allow user to switch between 'Grouped' and 'Stacked' mode.
    .groupSpacing(0.24) //Distance between each group of bars.

    ;

    chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);

    chart.x(function(d) {
      return d.x;
    })


    chart.yAxis
      .tickFormat(d3.format(',.1f'))
      .axisLabel('Defect Count')
      .axisLabelDistance(40);

    d3.select('#chart1M svg')
      .datum(jsonData)
      .call(chart);

    return chart;
  });

});

Example here.