javascript - Showing time labels below Google Charts Timeline -

solved: timeline chart doesn't play nicely bootstrap span class. debugged in wrong order , started code, not markup.

the timeline examples @ google charts show timelines time markers @ bottom. however, can not them appear, , documentation never mentions them, making me think @ point default, aren't anymore. examples on page images, not generated current api.

anyone here sorted out problem before?

edit: should note line appears in markup, hidden , contains looks single marking, (:10). also, requested, here of code. rails application, , data timeline fetched via ajax. maybe has it. code related datetime serves purpose of converting ruby javascript format time. last line hides scroll bar kept showing up:

i have ruled out problem data, because if switch out datatable.addrows() call 1 supplied in example (same parameters), still doesn't work.

$(document).ready(function(){     google.setonloadcallback(drawchart);     function drawchart() {         var rows_for_timeline = [[]];         var length = 0;         $.ajax({             url: '/timelineevents.json',             datatype: 'json',             async: false,             data: { operation_id: <%= @op.id %> },              success: function(data){               rows_for_timeline = data.timeline;               length = rows_for_timeline.length;               for(var = 0; < rows_for_timeline.length; i++){                 //convert ruby javascript time                 var s_date = new date(rows_for_timeline[i][2]*1000);                 var e_date = new date(rows_for_timeline[i][3]*1000);                 rows_for_timeline[i][2] = new date(s_date.getfullyear(), s_date.getmonth(), s_date.getdate(), s_date.gethours(), s_date.getminutes(), s_date.getseconds());                 rows_for_timeline[i][3] = new date(e_date.getfullyear(), e_date.getmonth(), e_date.getdate(), e_date.gethours(), e_date.getminutes(), e_date.getseconds());                 }               }         });         if(length > 0){             var timeline = $('#timeline')[0];             var chart;             chart = null;             chart = new google.visualization.timeline(timeline);              var datatable = new google.visualization.datatable();             datatable.addcolumn({ type: 'string', id: 'role' });             datatable.addcolumn({ type: 'string', id: 'name' });             datatable.addcolumn({ type: 'date', id: 'start' });             datatable.addcolumn({ type: 'date', id: 'end' });             datatable.addrows(rows_for_timeline);              var options = {               timeline: { groupbyrowlabel: true }             };              chart.draw(datatable, options);             //fix scroll bar @ end.           $("#timeline").children().first().children().first().children().first().siblings().first().css("overflow-y", "visible");         }     } });