Search code examples
morris.js

morris.js displaying difficulties

I have a morris.js graph. I have a table with 3 columns id with values such as 1,2,3 etc, usernames with values such as sophie, nick, Paul etc and timesloggedin with values such as 69, 58, 4 etc.

I created a chart that has the ids on x and the timesloggedin on y.

What I want is instead of displaying the id number on the bottom of the chart under the bars, to have their usernames. You can see the chart here:

http://kleanthisg.work/chartsnew2.php

CODE: http://kleanthisg.work/CODE.TXT

table:

user list:

Solution

  • You need to provide the username and set it as xkey

    Morris.Bar({
 element : 'chart_line_1',
 data:[{ id:'1', timesloggedin:65, username: 'Paul'}, 
        { id:'5', timesloggedin:10, username: 'John'}, 
        { id:'7', timesloggedin:4, username: 'Steve' }],
 xkey:'username',
 ykeys:['timesloggedin'],
 labels:['timesloggedin'],
 hideHover:'auto',
});