In my Vue.js application, I am utilizing the vis.js timeline to display data.
I have incorporated the vis timeline with randomly generated data.
Here is the code snippet:
created() {
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
var names = ['John', 'Alston', 'Lee', 'Grant'];
for (var g = 0; g < groupCount; g++) {
this.groups.push({
id: g,
content: names[g]
});
}
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, 'hours');
var group = Math.floor(Math.random() * groupCount);
this.items.push({
id: i,
group: group,
content: 'item ' + i +
' <span class="" style="color:green;">(' + names[group] + ')</span>',
start: start,
type: 'box',
className: 'green',
title:'Testing tool tip index' + i
});
}
},
Then, I used the following code to display the timeline in my Vue component:
<timeline ref="timeline"
:items="items"
:groups="groups"
:options="options"
>
</timeline>
This results in something like this:
https://i.sstatic.net/wuC3w.png
Please note that I have applied custom CSS changes to modify the appearance of the timeline.
As a beginner working with vis.js, I am interested in learning how to change the colors of the bars...
https://i.sstatic.net/V1IbN.png
How can I assign random colors to the bars instead of just green...