javascript - How to work around VIS Timeline group ordering bug in Chrome? -

vis.js timeline has bug in chrome (only). changes ordering of groups when there more 10 groups (trucks).

in this exmaple in chrome browser truck 11 display in first row , truck 2 display after truck 10. in other browsers ordering of groups correct.

how can make chrome display groups in right order?

example: http://jsfiddle.net/parhum/rcsrfaka/

html code:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css"> <div id="js__timeline"></div> 

js code:

<script>   /**    * url parameter    * http://www.netlobo.com/url_query_string_javascript.html    */   function gup( name ) {     name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");     var regexs = "[\\?&]"+name+"=([^&#]*)";     var regex = new regexp( regexs );     var results = regex.exec( window.location.href );     if( results == null )       return "";     else       return results[1];   }    // selected item count url parameter   var count = (number(gup('count')) || 1000);    // create groups   var groups = new vis.dataset([     {id: 1, content: 'truck&nbsp;1'},     {id: 2, content: 'truck&nbsp;2'},     {id: 3, content: 'truck&nbsp;3'},     {id: 4, content: 'truck&nbsp;4'},     {id: 5, content: 'truck&nbsp;5'},     {id: 6, content: 'truck&nbsp;6'},     {id: 7, content: 'truck&nbsp;7'},     {id: 8, content: 'truck&nbsp;8'},     {id: 9, content: 'truck&nbsp;9'},     {id: 10, content: 'truck&nbsp;10'},     {id: 11, content: 'truck&nbsp;11'},     {id: 12, content: 'truck&nbsp;12'},     {id: 13, content: 'truck&nbsp;13'},     {id: 14, content: 'truck&nbsp;14'},     {id: 15, content: 'truck&nbsp;15'},     {id: 16, content: 'truck&nbsp;16'},     {id: 17, content: 'truck&nbsp;17'},     {id: 18, content: 'truck&nbsp;18'},     {id: 19, content: 'truck&nbsp;19'},     {id: 20, content: 'truck&nbsp;20'},     {id: 21, content: 'truck&nbsp;21'}   ]);    // create items   var items = new vis.dataset();    var order = 1;   var truck = 1;   (var j = 0; j < 21; j++) {     var date = new date();     (var = 0; < count/10; i++) {       date.sethours(date.gethours() +  4 * (math.random() < 0.2));       var start = new date(date);        date.sethours(date.gethours() + 2 + math.floor(math.random()*4));       var end = new date(date);        items.add({         id: order,         group: truck,         start: start,         end: end,         content: 'order ' + order       });        order++;     }     truck++;   }    // specify options   var options = {     stack: false,     start: new date(),     end: new date(1000*60*60*24 + (new date()).valueof()),     editable: true,     margin: {       item: 10, // minimal margin between items       axis: 5   // minimal margin between items , axis     },     orientation: 'top'   };    // create timeline   var container = document.getelementbyid('js__timeline');   timeline = new vis.timeline(container, null, options);   timeline.setgroups(groups);   timeline.setitems(items);    document.getelementbyid('count').innerhtml = count; </script> 

as far can see haven't defined ordering groups, leaving order undetermined.

you can either set option grouporder 'id' have groups ordered id, or provide own sorting function there, or give groups property order.

from docs on grouporder:

order groups field name or custom sort function. default, groups ordered property order (if set). if no order properties provided, order undetermined.

https://github.com/almende/vis/issues/1399