What is the best way to organize nestedGroups in the vis.js timeline?

Running into an issue with the nestedGroups in my code. Despite sorting the array before creating the items and nestedGroups, I'm encountering a problem where the first item is showing up in the last position on the timeline.

https://i.sstatic.net/NemEv.png

Attached is a screenshot illustrating the issue - the activity_9 item should be displayed before the activity_10 item. The confusing part is that the order of the nestedGroups seems correct above. Any assistance would be greatly appreciated. Thank you.

Answer №1

Dealing with a specific issue myself, I discovered that JavaScript reads numerical values alphabetically. This means that numbers like 1-9 are fine, but once you reach double digits, such as 10, it can be interpreted incorrectly because only the first number is considered.

To resolve this issue, I decided to prepend additional numbers to my ID so that all IDs were the same length. For example, using numbers like 1000, 1001, 1002 up to 9999 (if surpassing 10,000 entities, an extra zero can be added).

I utilized MySQL to modify the numbers while extracting data. Here's an example of how the code looked:

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

For instance, if the original ID was 10, after modification it would become 10010, and for 2 it would be 10002. This ensured that JavaScript accurately interpreted the numeric order.

This might not be the most conventional method, but it served its purpose for me until I discover a more efficient solution.

Edit:

If your ID slot is reserved for another usage, an alternative approach could involve sorting based on content. Simply hide the previous ID within the content itself, allowing vis.js to order items by setting groupOrder to 'content' in the options.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to include numerous attributes to an element using JavaScript?

Attributes can be included within a string in the following format: let attr = ' min="0" step="5" max="100" '; or let attr = ' min="2019-12-25T19:30" '; and so on. Is there a function available ...

In Next.js, the 404 error page is displayed using getInitialProps

Currently, I am learning how to redirect users in getInitialProps by following a helpful example. Here is the link to the example I am referring to However, I encountered an issue where when I try to return a 404 error using the code snippet provided, in ...

What are the best practices for effectively utilizing the nodejs Stream API?

I am currently working on an application that reads input from various sources, including files, sockets, and other parts of the same program that produce buffers or strings. While I have successfully handled sockets and files using node's Stream API ...

Unable to view the most recent state

Looking at the code below: export function loginUserRequest() { console.log('ACTION INITIATED'); return { type: LOGIN_USER_REQUEST, }; } we can see the matching reducer: export default function loginReducer(state = initialState, acti ...

Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

<div class="tabs-wrap left relative nomargin" id="tabs"> <ul class="nav ultab" id="fram"> <li class="active"><a href="#history" data-toggle="tab" id="history1" >History< ...

Unable to choose anything within a draggable modal window

Can someone please assist me? I am struggling to figure this out. I can't select text inside the modal or click on the input to type text into it. I suspect it may be due to z-index issues, but I'm having trouble locating them. var currentZ = n ...

What is the best way to fully eliminate the Pixi renderer, stage, and all associated assets

I am currently faced with a challenge of mounting and unmounting a Pixi stage using React without relying on react-pixi. Upon re-mounting the component, I encounter the following error: Uncaught Error: Resource with name "cupCake.png" already exists i.ad ...

Tips for making a website display in landscape mode rather than portrait orientation

As a newcomer to web design, I am curious if it is feasible to create a website that automatically rotates to landscape view when accessed on a mobile device. The current project I am working on is fluid in design, so this feature would greatly enhance t ...

Troubleshooting issues with AngularJS's minDate functionality

I have been trying to set the minDate for the datepicker to today, following the example on the angularJS bootstrap site. However, it seems like something is not working correctly. There are no console errors showing up, but it appears that the minDate is ...

Discover the Primevue DataTable feature that enables dynamic column and column grouping functionality, with the added bonus of gridlines disappearing as you scroll down

I am currently utilizing the PrimeVue DataTable feature with dynamic column and column grouping. Initially, when the table loads, everything appears to be great - gridlines are visible, columns freeze, scrollable functionality is working as expected. htt ...

The promise is coming back as undefined

I am encountering an issue where the value returned from a promise is coming back as undefined in my template. In the getLabel function, I am receiving a label as a promise and resolving it before returning it to the title in the getMenuItems function. H ...

Having trouble getting the innerHTML update to be triggered by onchange

Hey there, I am looking to tweak my file upload button so that it triggers a change in a specific span, signaling to the user that a file has indeed been selected. <script type="text/javascript"> function get_fileName(fileSelector, fileId) { var ...

How to incorporate JSON into a d3.js calendar display?

Learning d3 charts and javascript has been quite challenging for me. After researching a lot, I successfully populated the chart with CSV data. Now, my next goal is to populate the chart with json data. This is the code I'm using, which is inspired ...

Tips for acquiring the newest router in an angular environment

Is there a way to retrieve and store the URL of the latest router that the user has visited in local storage? Any suggestions would be greatly appreciated. Thank you! ...

Vue.js is displaying API data in the browser's console, but it is not appearing on the webpage

I am currently learning about API design and attempting to make an API call that retrieves data from an online API server using the vue.js project through CLI. While I can see the results in the browser console, I'm encountering issues with displaying ...

Issue with sending data from JQuery Ajax to PHP codeExplanation:The problem

Here is the output from myscript.js: [{"orcamento":"10","atual":"20","desvio":"","data":"2015-01-01","nome_conta":"BBB","nome_categoria":"abc","nome_entidade":"def"}] This is the content of myscript.js: if (addList.length) { $.ajax($.extend({}, ajax ...

Implementing the adding functionality within an ejs file

I'm currently working on a project that involves fetching data from an API using a simple JavaScript file upon clicking a button. Initially, everything was functioning properly when both the HTML file and JS file were in the same folder, and I could a ...

Utilizing Regular Expressions to Substitute 'null' in API Data with a Custom String in JavaScript

I'm working with an API to gather information about books, including the title and author. However, I've noticed that some authors' data is returned as 'undefined'. I had the idea of using regular expressions (RegExp) to replace th ...

Is there a way to select a checkbox in Google Forms using the console?

I need help with a script I'm creating to automatically populate Google Forms. I am able to select checkboxes using querySelector, but they don't have a .click() method or similar. How can I go about checking the checkboxes? ...

Encountered an error trying to access the length property of an undefined variable while passing props

I need help with my shopping app project. I am trying to create a feature where if the cart is empty, it should display a message saying "shopping cart is empty." However, when I try to implement this, I keep getting a type error that says "Cannot read p ...