Search code examples
javascriptvue.jsvuejs2vis.jsvis.js-timeline

How to sort nestedGroups in vis.js timeline?


I have a problem with nestedGroups. I sort the array before the items and the nestedGroups are created but even then for some reason I'm getting the first item on the last position in the timeline.

enter image description here

Here is a screenshot of my problem. The activity_9 item need to be before the activity_10 item. And I'm confused because in the groups above the order of the nestedGroups is good. Can anyone help me please. Thank you.


Solution

  • i had that issue my self, the reason as i understand it, is that js reads it alphabetic so 1-9 is fine but 10 is lower then 2 as it only reads the first number.

    so what i did, was adding some numbers infront of my id. so it always was the same lenght.

    1000 , 1001, 1002 - all the way up to 9999 ( if you need more then 10.000 entities add a ekstra zero )

    i used Mysql to add the numbers as i pull all data though that .

    so my code would look like this

    $sortnum = $row['id'];
    $sortnum = "1".str_pad($sortnum, 4, '0', STR_PAD_LEFT);
    

    if you have the id 10 it would return 10010 and if you have 2 it would be 10002 that way the js would read it correct as 10002 is less than 10010

    i know this may not be a good or prober way to do it , but for worked for me, and until i find a better solution it will do.

    Edit:

    if you have the id slot locked for something else, you could sort it by content and simply start the content with a hidden field containing the "id" from before works just as well.

    then all you have to do is in the option of vis.js set the groupOrder to groupOrder: 'content',