morris.js on rails 3.2.1 cannot get json from html

Question

I have a strange error on the morris.js graphing library

this works in graphs.js

$(document).ready(function() { 
  Morris.Line({
  element: 'annual',
    data: [
    {y: '2012', a: 100},
    {y: '2011', a: 75},
    {y: '2010', a: 50},
    {y: '2009', a: 75},
    {y: '2008', a: 50},
    {y: '2007', a: 75},
    {y: '2006', a: 100}
  ],
    xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A']
});
})

this does not graphs.js

$(document).ready(function() { 
  Morris.Line({
  element: 'annual',
    data: $('#logs_chart').data('logs'),
    xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A']
});
})

in the corresponding html

<div data-logs="[
    {y: '2012', a: 100},
    {y: '2011', a: 75},
    {y: '2010', a: 50},
    {y: '2009', a: 75},
    {y: '2008', a: 50},
    {y: '2007', a: 75},
    {y: '2006', a: 100}
  ]" id="logs_chart"></div>

I get

Uncaught TypeError: Cannot call method 'match' of undefined  morris.js:316

Morris.parseDate = function(date) {
    var isecs, m, msecs, n, o, offsetmins, p, q, r, ret, secs;
    if (typeof date === 'number') {
      return date;
    }
    m = date.match(/^(\d+) Q(\d)$/);
Uncaught TypeError: Cannot call method 'match' of undefined
    n = date.match(/^(\d+)-(\d+)$/);

Has someone encountered this and found a solution?

Answer 1

For me the solution was to put the json output in a variable in a script tag at the end of the HTML.

Like this

<script> 

 var json_data = [
    {y: '2012', a: 100},
    {y: '2011', a: 75},
    {y: '2010', a: 50},
    {y: '2009', a: 75},
    {y: '2008', a: 50},
    {y: '2007', a: 75},
    {y: '2006', a: 100}
  ]

</script>

and call this variable in the graphs.js file

$(document).ready(function() { 
  Morris.Line({
  element: 'annual',
    data: json_data,
    xkey: 'y',
  ykeys: ['a'],
  labels: ['Series A']
});
})

Answer 2

Stuffing the graph data in data-logs isn't working because it's a string. You'll need to parse the data using JSON.parse, jQuery.parseJSON or similar.

It's also worth noting that the data you've got in your example isn't strictly valid JSON, you need to escape the keys, eg:

<div data-logs='[
    {"y": "2012", "a": 100},
    {"y": "2011", "a": 75},
    {"y": "2010", "a": 50},
    {"y": "2009", "a": 75},
    {"y": "2008", "a": 50},
    {"y": "2007", "a": 75},
    {"y": "2006", "a": 100}
  ]' id="logs_chart"></div>

And the corresponding HTML:

$(document).ready(function() { 
  Morris.Line({
    element: 'annual',
    data: $.parseJSON($('#logs_chart').data('logs')),
    xkey: 'y',
    ykeys: ['a'],
    labels: ['Series A']
  });
})