Ajay Kulkarni Ajay Kulkarni - 3 months ago 13
jQuery Question

Changing the values at X axis in morris linear graph

I wrote a simple morris linear graph to capture how much has been collected at particular timing.

JSFiddle: https://jsfiddle.net/Lvdn7xLa/2/

Morris js code:


Morris.Line({
element: 'line-example',
data: [{
y: '6.30AM',
a: 20
}, {
y: '7.30AM',
a: 40
}, {
y: '8.30AM',
a: 60
}, {
y: '9.30AM',
a: 80
}, {
y: '10.30AM',
a: 100
}, {
y: '11.30AM',
a: 120
}, {
y: '12.30PM',
a: 140
}],
xkey: 'y',
ykeys: ['a'],
labels: ['Amount collected']
});


However
time
values aren't appearing in
X-axis
. Some unrelated years are appearing. If I change
xkey: 'y', ykeys: ['a']
to
xkey: ['a'], ykeys: 'y'
, then I get weird results like

Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)
Amount collected: 6.3


How can I make time values appear at
X-axis
?

Answer

Add

parseTime: false

into your chart configuration.

This will

skip time/date parsing for X values, instead treating them as an equally-spaced series.

Otherwise you would need to adjust your "x" values to either milliseconds or a valid Date/Time string that can be parsed

A string containing the name of the attribute that contains date (X) values. Timestamps are accepted in the form of millisecond timestamps (as returned by Date.getTime() or as strings in the following formats:

  • 2012
  • 2012 Q1
  • 2012 W1
  • 2012-02
  • 2012-02-24
  • 2012-02-24 15:00
  • 2012-02-24 15:00:00
  • 2012-02-24 15:00:00.000

http://jsbin.com/walekitori/edit?html,js,output