Morris.js create graph data-attributes [rails4]

Question

I'm trying to show statistics with morris.js .

But I always got this error msg in the Firebug console.

TypeError: this.options.data is undefined

clients_controller:

 @stats = @user.treatments.pluck( :created_at, :effective )

show.html.erb

 <%= content_tag :div, "", id: "graph1337", data: { stats: @stats } %> 

Javascript code version 1:

  $(function () {
      Morris.Line({
          element: 'graph1337',
          data: $('#graph1337').data('stats'),
          xkey: 'created_at',
          ykeys: ['effective'],
          labels: ['effective' ]
      }); 
  });

Error msg:

TypeError: e is undefined

Javasciprt code version 2:

  $(function () {
   var stats = $('#graph1337').data('stats');                               
     Morris.Line({
          element: 'graph1337',
          data: $.map(stats, function(element) { JSON.stringify(element)}),
          xkey: 'created_at',
          ykeys: ['effective'],
          labels: ['effective' ]
          });
      });

I did 2 versions because I think that this is some kind of a 2 dimensional array. So I've tried to make one(lik Ruby flatten ).

if I inspect the DOM element with Firebug:

<div id="graph1337" data-stats="[["2014-07-11T14:44:16.528Z",5],["2014-07-11T14:41:33.340Z",4],["2014-07-11T13:58:11.967Z",3],[null,5],[null,4],[null,3],[null,2],["2014-06-08T09:47:16.260Z",1]]" style="position: relative;">
<svg height="342" version="1.1" width="1140" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; top: -0.5px;">
<desc>Created with Raphaël 2.1.0</desc>
<defs>
</svg>
<div class="morris-hover morris-default-style" style="display: none;"></div>
</div>

rails debug msg:

<%= debug @stats %>
---
- - 2014-07-11 14:44:16.528543000 Z
  - 5
- - 2014-07-11 14:41:33.340103000 Z
  - 4
- - 2014-07-11 13:58:11.967193000 Z
  - 3
- - 
  - 5
- - 
  - 4
- - 
  - 3
- - 
  - 2
- - 2014-06-08 09:47:16.260312000 Z
  - 1

It's either not showing anything or it's the same error, any suggestions? Thank you for your time.

Answer 1

For your script work you need 3 modifications. (There doesn't have enough element for that I give the ruby-on-rails script but I think that my advices will guide you).

Step 1 :

The line of the data-stats doesn't have null value, if you have null value you get an error.

Like this :

[
    ['2014-07-11T14:44:16.528Z', 5],
    ['2014-07-11T14:41:33.340Z', 4],
    ['2014-07-11T13:58:11.967Z', 3],
    ['2014-06-08T09:47:16.260Z', 1]
],

Step 2 :

You set bad value to xkey, an ykey. The value must to be key of the value in your array.

You get this :

Morris.Line({
    element: 'graph1337',
    data: [
        ['2014-07-11T14:44:16.528Z', 5],
        ['2014-07-11T14:41:33.340Z', 4],
        ['2014-07-11T13:58:11.967Z', 3],
        ['2014-06-08T09:47:16.260Z', 1]
    ],
    xkey: "0",
    ykeys: ["1"],
    labels: ["effective"]
});

Step 3 :

Replace string date by timestamp and use dateFormat function.

var stats = $('#graph1337').data('stats');

Morris.Line({
    element: 'graph1337',
    data: [
        [1405082656528, 5],
        [1405082493340, 4],
        [1405079891967, 3],
        [1405064836260, 1]
    ],
    dateFormat: function (x) { return new Date(x).toLocaleTimeString(); },
    xkey: "0",
    ykeys: ["1"],
    labels: ["effective"]
});

Demo : http://jsbin.com/zatoyudo/1/edit

See more :

• Formatting timestamps with ruby-on-rails