CODEWITHSUNDEEP
javascriptmorris.js
Frank
Frank

Reputation: 61

Morris.js data (Cannot read property 'match' of undefined)

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']
});

Upvotes: 2

Views: 2567

Answers (3)

deep_chaos
deep_chaos

Reputation: 31

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.

Upvotes: 3

yeaske
yeaske

Reputation: 1432

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.

Upvotes: 0

krlzlx
krlzlx

Reputation: 5822

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

Try:

data: JSON.parse(mydata)

Upvotes: 3

Related Questions