Morris.js数据（无法读取未定义的属性“ match”）

Question

I have been pounding at this problem for a couple of days. I am trying to use Morris Chart in one of my pages to display statistics collected from a SQL database. But I cannot get it to work. It all comes down to this:

If I manually enter the data in the "data" field everything is fine. But if I put the data in a variable and refer to the variable in the "data" field I get:

Cannot read property 'match' of undefined.

What is the difference?

This works:

 var chart = Morris.Line({ element: 'line-example', data: [{Timestamp:'2015-05-20 10:00:00',Diastolic:110,Systolic:90,Pulse:65}], xkey: 'Timestamp', ykeys: ['Diastolic', 'Systolic', 'Pulse'], labels: ['Diastolic', 'Systolic', 'Pulse'] }); 

This does not work:

 var mydata = "[{Timestamp:'2015-05-20 10:00:00',Diastolic:110,Systolic:90,Pulse:65}]"; var chart = Morris.Line({ element: 'line-example', data: mydata, xkey: 'Timestamp', ykeys: ['Diastolic', 'Systolic', 'Pulse'], labels: ['Diastolic', 'Systolic', 'Pulse'] }); 

Answer 1

The first one is an array. The second one, you're defining mydata as a string.

Try:

data: JSON.parse(mydata)

Answer 2

I was experiencing a similar issue which was driving me crazy but fortunately I came to a solution.

I was passing an array of javascript objects as the holder of data and used the function to turn it into a JSON string. It wasn't working at all... but then I tried to parse the string with JSON.parse and it worked smoothly. Apparently there is a bug in Morris JS code while parsing a JSON string.

If you are using an array of objects like me, try this:

var area = new Morris.Area({
        element: 'revenue-chart',
        resize: true,
        data: JSON.parse(JSON.stringify(data)), //data is an array of objects
        xkey: 'date',
        ykeys: ['npubs_t', 'npubs_f'],
        labels: ['T', 'F'],
        lineColors: ['#a0d0e0', '#3c8dbc'],
        hideHover: 'auto'
      });

It worked great this way. Hope this helps you or someone else.

Answer 3

I hit this same problem. My issue was that I had declared the data variable as array in my angular(1.5) controller:

  data = [];

And then I was getting values from the function call. This was working except for line charts in morris.js (Angular-morris was the wrapper). I changed data to

  data = '';

It worked perfectly.