CODEWITHSUNDEEP
javascripthtmlmorris.js
Zerquix18
Zerquix18

Reputation: 769

Morris Line Chart not working

I'm trying to figure out what's wrong with my code. I've read the documentation a lot of times but I don't know why this is simply not working. In this code I show the stats of the last 7 days. Even the label just 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>

Upvotes: 0

Views: 1633

Answers (1)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17134

Labels should be a list. You could have more than one series, so you could have more than one label. You need to define it as an array.

As for the days, this value needs to be a date, now you're just setting the day. Easiest way would be to use the Date object. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date. Morris.js can work with the milliseconds format returned by Date object.

Once the date is properly set, you can always modify the way it's displayed on the chart using xLabelFormat or the 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>

Upvotes: 2

Related Questions