javascript - Morris Line Chart not working -
i'm trying figure out what's wrong code. i've read documentation lot of times don't know why not working. in code show stats of last 7 days. label shows 'v' instead of 'value'. what's going on?!
var ledata = { "element":"bar-example", "data":[ {"day":"31","count":0}, {"day":"01","count":0}, {"day":"02","count":0}, {"day":"03","count":0}, {"day":"04","count":0}, {"day":"05","count":0} ], "xkey":"day", "ykeys":["count"], "labels":"value" }; new morris.line( ledata );<!doctype html> <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> <meta charset=utf-8 /> <title>morris.js bar chart example</title> </head> <body> <div id="bar-example"></div> </body> </html>
labels should list. have more 1 series, have more 1 label. need define array.
as days, value needs date, you're setting day. easiest way use date object. see https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/date. morris.js can work milliseconds format returned date object.
once date set, can modify way it's displayed on chart using xlabelformat or intervals using xlabels.
var date = new date(); var ledata = { "element": "bar-example", "data": [{ "day": date.valueof(), "count": 0 }, { "day": date.setdate(date.getdate() - 1), "count": 0 }, { "day": date.setdate(date.getdate() - 1), "count": 0 }, { "day": date.setdate(date.getdate() - 1), "count": 0 }, { "day": date.setdate(date.getdate() - 1), "count": 0 }, ], "xkey": "day", "xlabelformat": function(x) { return x.tolocaledatestring(); }, "ykeys": ["count"], "labels": ["value"], "xlabels": "days" }; new morris.line(ledata);<!doctype html> <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> <meta charset=utf-8 /> <title>morris.js bar chart example</title> </head> <body> <div id="bar-example"></div> </body> </html>
Comments
Post a Comment