Backbone collection into morris.js d="M,0,0" error

Question

Hello I'm studying backbone and I have created a php api to work with backbone and now I'm trying to draw a collection retrieved from a get request with morris.

Here is my data retrieved from php script:

[{"m":"Mar","t":"92","e":"8","p":"64"},{"m":"Apr","t":"0","e":"0","p":"0"},{"m":"May","t":"60","e":"20","p":"40"},{"m":"Jun","t":"50","e":"6","p":"44"},{"m":"Jul","t":"160","e":"30","p":"130"},{"m":"Aug","t":"50","e":"6","p":"44"},{"m":"Sep","t":"0","e":"0","p":"0"},{"m":"Oct","t":"120","e":"12","p":"108"},{"m":"Nov","t":"50","e":"10","p":"40"},{"m":"Dec","t":"182","e":"22","p":"40"},{"m":"Jan","t":"380","e":"112","p":"168"},{"m":"Feb","t":"0","e":"0","p":"0"}]

Furthermore this is my javascript:

<div class="row">
    <div id="dashboardMainGraph"></div>
</div>

<script>

    Month = Backbone.Model.extend({
        default:{
            m:'',
            t:0,
            e:0,
            p:0
        }
    });

    DashboardMainDiagram = Backbone.Collection.extend({
        model: Month,
        url: '/api/getDashboardMainGraph'
    });

    Diagram = Backbone.View.extend({
        el: $('#dashboardMainGraph'),
        initialize:function(){
            console.log('initializing')
            var self = this, 
                coll = new DashboardMainDiagram(); 
            coll.fetch({ 
                success: function(data){ 
                    self.draw(data.toJSON()); 
                } 
            });              
        },

        draw:function(d) {
            console.log(JSON.stringify(d))
            window.m = new Morris.Line({
              // ID of the element in which to draw the chart.
              element: this.el,
              // Chart data records -- each entry in this array corresponds to a point on
              // the chart.
              data: d,
              xkey: 'm',
              ykeys: ['t', 'e', 'p'],
              labels: ['Total', 'Expenses', 'Profit']
            });
        }
    })

    var diagram = new Diagram();


</script>

And here is teh error I'm getting in my console:

Error: Problem parsing d="M,0,0" raphael-min.js:10
q raphael-min.js:10
w raphael-min.js:10
a._engine.path raphael-min.js:10
k.path raphael-min.js:10
t.Line.n.drawLinePath morris-0.4.3.min.js:1
t.Line.n._drawLineFor morris-0.4.3.min.js:1
t.Line.n.drawSeries morris-0.4.3.min.js:1
t.Line.n.draw morris-0.4.3.min.js:1
t.Grid.r.redraw morris-0.4.3.min.js:1
t.Grid.r.setData morris-0.4.3.min.js:1
r morris-0.4.3.min.js:1
n morris-0.4.3.min.js:1
Backbone.View.extend.draw dashboard:164
coll.fetch.success dashboard:157
t.success backbone-min.js:1
j jquery-2.1.0.min.js:2
k.fireWith jquery-2.1.0.min.js:2
x jquery-2.1.0.min.js:4
(anonymous function) jquery-2.1.0.min.js:4

Haymes

It mostly works with a line graph jsfiddle.net/nikoshr/6PH7b/1 (your xkey is not a date), even better with a bar graph jsfiddle.net/nikoshr/6PH7b I may have oversimplified your setup, but it would seem your problem lies somewhere else. – Paleolithic

Answer 1

After a closer look the documentation mentions this property when you initialize a graph parseTime:false Setting it to false prevents the plugin from trying to parse the labels on the x axis as dates/time.

Short answer add: parseTime: false

Haymes