Vis.js Timeline has a bug in Chrome (only). It changes the ordering of groups when there are more than 10 groups (trucks).
In this exmaple in Chrome browser Truck 11 display in first row and Truck 2 display after Truck 10. In other browsers the ordering of groups are correct.
How can I make Chrome display the groups in the 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>
/**
* Get 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];
}
// get selected item count from url parameter
var count = (Number(gup('count')) || 1000);
// create groups
var groups = new vis.DataSet([
{id: 1, content: 'Truck 1'},
{id: 2, content: 'Truck 2'},
{id: 3, content: 'Truck 3'},
{id: 4, content: 'Truck 4'},
{id: 5, content: 'Truck 5'},
{id: 6, content: 'Truck 6'},
{id: 7, content: 'Truck 7'},
{id: 8, content: 'Truck 8'},
{id: 9, content: 'Truck 9'},
{id: 10, content: 'Truck 10'},
{id: 11, content: 'Truck 11'},
{id: 12, content: 'Truck 12'},
{id: 13, content: 'Truck 13'},
{id: 14, content: 'Truck 14'},
{id: 15, content: 'Truck 15'},
{id: 16, content: 'Truck 16'},
{id: 17, content: 'Truck 17'},
{id: 18, content: 'Truck 18'},
{id: 19, content: 'Truck 19'},
{id: 20, content: 'Truck 20'},
{id: 21, content: 'Truck 21'}
]);
// create items
var items = new vis.DataSet();
var order = 1;
var truck = 1;
for (var j = 0; j < 21; j++) {
var date = new Date();
for (var i = 0; i < 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 and the axis
},
orientation: 'top'
};
// create a 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 as I can see you haven't defined any ordering for the groups, leaving their order undetermined.
You can either set the option groupOrder to 'id' to have the groups ordered by their id, or provide your own sorting function there, or give all groups a property order.
From the docs on groupOrder:
Order the groups by a field name or custom sort function. By default, groups are ordered by a property order (if set). If no order properties are provided, the order will be undetermined.