I'm trying to create something like a Google Analytics Audience Overview diagram. I try to put the clock from 12:00 to midnight to 11:00 on the x axis.
This is what I am using now:
Morris.Line({ element: 'chart_div_compare', data: [ { hours: '00:00', a: 793, b: 729}, { hours: '01:00', a: 524, b: 537}, { hours: '02:00', a: 337, b: 347}, { hours: '03:00', a: 272, b: 213}, { hours: '04:00', a: 176, b: 169}, { hours: '05:00', a: 174, b: 147}, { hours: '06:00', a: 212, b: 193}, { hours: '07:00', a: 341, b: 294}, { hours: '08:00', a: 551, b: 501}, { hours: '09:00', a: 724, b: 692}, { hours: '10:00', a: 880, b: 896}, { hours: '11:00', a: 955, b: 1004}, { hours: '12:00', a: 1053, b: 1142}, { hours: '13:00', a: 1063, b: 1150}, { hours: '14:00', a: 92, b: 1123}, { hours: '15:00', a: 0, b: 1151}, { hours: '16:00', a: 0, b: 1222}, { hours: '17:00', a: 0, b: 1155}, { hours: '18:00', a: 0, b: 1246}, { hours: '19:00', a: 0, b: 1100}, { hours: '20:00', a: 0, b: 1199}, { hours: '21:00', a: 0, b: 1395}, { hours: '22:00', a: 0, b: 1361}, { hours: '23:00', a: 0, b: 1005}, ], // The name of the data record attribute that contains x-values. xkey: 'hours', hideHover: 'auto', // A list of names of data record attributes that contain y-values. ykeys: ['a', 'b'], // Labels for the ykeys -- will be displayed when you hover over the // chart. labels: ['2014-04-16', '2014-04-14'] });
The x axis becomes 1900, 1910, 1920. Is my format incorrect for the clock column? I cannot figure out how to do this correctly, but in the end I would like 12:00, 1:00, etc.