How to change background colors, marker css and add hover text on marker?

[abhisheksimion]

I am trying to create a timeline view using visjs of a upgrade scenario (Pre Upgrade, Pre Release & Post Upgrade) something similar to the image below. Need some pointers to create different region colors as depicted in the image, css to change the main marker to an image source and also on hover of the slider (region or markers) it should show some description.

I have posted a stackoverflow question here.

Plunker link

[josdejong]

Did you have a look at background areas?

http://visjs.org/examples/timeline/items/backgroundAreas.html

[abhisheksimion]

@josdejong Yes I followed the same example, but somehow the background areas are not rendering. Please check here

$scope.visData = new vis.DataSet([ {start: '2015-07-26', end: '2015-08-25', type: 'background', title: 'Pre Upgrade', className: 'preupgrade'}, {start: '2015-08-26', end: '2015-09-30', type: 'background', title: 'Pre Release', className: 'prerelease'}, {start: '2015-10-01', end: '2015-10-31', type: 'background', title: 'Post Upgrade', className: 'postupgrade'} ]);

[josdejong]

I think there is something going wrong where you load the data into the Timeline:

timeline = new vis.Timeline(element[0], scope.data.items, scope.data.groups, scope.options);

When I log scope.data, it's a DataSet, not an object containing properties items and groups.

Besides that, are you actually using angular-visjs? Because in your example you're loading the vanilla JavaScript version of the Timeline (new vis.Timeline(...) instead of <time-line data="data" options="options" events="events"></time-line>)