Backbone collection into morris.js d="M,0,0" error
backbone.js, javascript, morris.js, raphael
Solution
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
Problem
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 ```