莫里斯JS：“无法读取未定义的属性'匹配'”（带有ajax加载的json）

Question

I'm trying to dynamically load JSON data to put in a Morris JS Line, but I keep getting the following error:

Uncaught TypeError: Cannot read property 'match' of undefined
at Object.b.parseDate (morris.min.js:6)
at c.<anonymous> (morris.min.js:6)
at c.b.Grid.d.setData (morris.min.js:6)
at c.d [as constructor] (morris.min.js:6)
at new c (morris.min.js:6)
at Object.success ((index):232)
at f (jquery.js:1026)
at Object.fireWith [as resolveWith] (jquery.js:1138)
at r (jquery.js:8021)
at XMLHttpRequest.r (jquery.js:8558)

I'm making an ajax request using a form and returning data as JSON using the python "json.dumps" function.

$("#idForm").submit(function(e) {

    var url = "/predict/"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(json)
           {
                console.log(json);
                var chart = new Morris.Line({
                  // ID of the element in which to draw the chart.
                  element: 'myfirstchart',
                  data: json,
                  // Chart data records -- each entry in this array corresponds to a point on
                  // the chart.
                  // The name of the data record attribute that contains x-values.
                  xkey: 'date',
                  // A list of names of data record attributes that contain y-values.
                  ykeys: ['real', 'predicted'],
                  // Labels for the ykeys -- will be displayed when you hover over the
                  // chart.
                  labels: ['Observed Value', 'Predicted Value']
                });
           }
         });

The weird thing is that, if I substitute the "data: json" line with the real JSON (the one given in output by the console.log function, everything works smoothly)

The JSON is the following:

[
 {
  date: 2016-01-01, 
  real: 8, 
  predicted: 7
 }, 
 {
  date: 2016-01-02, 
  real: 5, 
  predicted: 3
 }, 
 {
  date: 2016-01-03, 
  real: 14, 
  predicted: 16
 }, 
 {
  date: 2016-01-04, 
  real: 6, 
  predicted: 6
 }, 
 {
  date: 2016-01-05, 
  real: 9, 
  predicted: 9
 }, 
 [...]
 {
  date: 2016-01-27, 
  real: 2, 
  predicted: 2
 }, 
 {
  date: 2016-01-28, 
  real: 5, 
  predicted: 5
 }, 
 {
  date: 2016-01-29, 
  real: 12, 
  predicted: 11
 }, 
 {
  date: 2016-01-30, 
  real: 14, 
  predicted: 14
 }, 
 {
  date: 2016-01-31, 
  real: 8, 
  predicted: 8
 }

]

I have tried to parse the JSON again with JQuery, but that gave a parsing error.

Has someone of you encountered this problem?

Thanks a lot

Answer 1

function line_chart(id) {
    $.ajax({
        type: 'POST',
        async: true,
        dataType: "json",
        url: 'code/content/profile/chart.php',
        data: { user_id: id, type: 'line'},
        success: function(data){
            $('#line').html('');
            Morris.Line({
              element: 'line',
              data: data,
              resize: true,
              xkey: 'period',
              ykeys: ['a', 'b', 'c'],
              lineColors: ['#2577b5', '#293c4d', '#4db6ac'],
              labels: ['Прием', 'Консультация', 'Выдача']
            });  
        }
    })
}