### Install Dependencies and Build Project
Source: https://github.com/visjs/vis-timeline/blob/master/README.md
Install project dependencies and build the library using npm. This is a prerequisite for testing and development.
```bash
cd vis-timeline
npm install
```
```bash
npm run build
```
--------------------------------
### Basic vis-timeline Example
Source: https://github.com/visjs/vis-timeline/blob/master/README.md
A fundamental example demonstrating how to initialize and populate a vis-timeline chart within an HTML document. It includes necessary script and CSS links, defines data items, and creates the timeline instance.
```html
Timeline
```
--------------------------------
### Run Tests
Source: https://github.com/visjs/vis-timeline/blob/master/README.md
Execute the project's test suite after installing dependencies. Ensure the library functions as expected.
```bash
npm install
npm run test
```
--------------------------------
### Timeline with Groups and Items Setup
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/groups/verticalItemsHide.html
This code initializes a Vis.js Timeline with predefined groups and dynamically generated items. It sets up options for stacking, maximum height, and the timeline's start and end dates. Use this as a base for creating interactive timelines where item visibility is a concern.
```javascript
function showVisibleItems() { var visibleItems = timeline.getVisibleItems(); document.getElementById("visibleItemsContainer").innerHTML = ""; document.getElementById("visibleItemsContainer").innerHTML += visibleItems; }
// get selected item count from url parameter var 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" },
{ id: 22, content: "Truck 22" },
{ id: 23, content: "Truck 23" },
{ id: 24, content: "Truck 24" },
{ id: 25, content: "Truck 25" },
]);
// create items var items = new vis.DataSet();
var types = ["box", "point", "range", "background"];
var order = 1;
var truck = 1;
for (var j = 0; j < 25; j++) {
var date = new Date();
for (var i = 0; i < count / 25; 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);
var type = types[Math.floor(4 * Math.random())];
items.add({
id: order,
group: truck,
start: start,
end: end,
type: type,
content: "Order " + order,
});
order++;
}
truck++;
}
// specify options var options = {
stack: true,
maxHeight: 400,
start: new Date(),
end: new Date(1000 * 60 * 60 * 24 + new Date().valueOf()),
};
// create a Timeline var container = document.getElementById("visualization");
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
```
--------------------------------
### Initialize Graph2d with Dynamic Styling Controls
Source: https://github.com/visjs/vis-timeline/blob/master/examples/graph2d/17_dynamicStyling.html
Sets up the Graph2d visualization with initial data, groups, and options. This code also includes the setup for the HTML elements that will control the dynamic styling.
```javascript
var container = document.getElementById("visualization");
var items = [
{ x: "2014-06-11", y: 10, group: 0 },
{ x: "2014-06-12", y: 25, group: 0 },
{ x: "2014-06-13", y: 30, group: 0 },
{ x: "2014-06-14", y: -10, group: 0 },
{ x: "2014-06-15", y: 15, group: 0 },
{ x: "2014-06-16", y: 30, group: 0 },
];
var dataset = new vis.DataSet(items);
var options = {
start: "2014-06-10",
end: "2014-06-18",
dataAxis: {
showMinorLabels: false,
icons: true,
},
};
var groupData = {
id: 0,
content: "Group Name",
options: {
drawPoints: {
style: "square", // square, circle
},
shaded: {
orientation: "zero", // top, bottom
},
},
};
var groups = new vis.DataSet();
groups.add(groupData);
var graph2d = new vis.Graph2d(container, dataset, groups, options);
updateStyle();
```
--------------------------------
### Creating a DataSet of Timeline Items
Source: https://github.com/visjs/vis-timeline/blob/master/docs/timeline/index.html
Demonstrates how to initialize a vis.DataSet with an array of item objects. Each item can have a start date, an optional end date, and content.
```javascript
var items = new vis.DataSet([
{
start: new Date(2010, 7, 15),
end: new Date(2010, 8, 2), // end is optional
content: 'Trajectory A'
// Optional: fields 'id', 'type', 'group', 'className', 'style'
}
// more items...
]);
```
--------------------------------
### Clone vis-timeline Repository
Source: https://github.com/visjs/vis-timeline/blob/master/README.md
Clone the vis-timeline project from GitHub to start development.
```bash
git clone git://github.com/visjs/vis-timeline.git
```
--------------------------------
### Initialize Timeline with Default Options
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/styling/axisOrientation.html
Basic setup for creating a vis.js timeline with a data set and initial options. This code is a prerequisite for interactive orientation changes.
```javascript
var container = document.getElementById("visualization");
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2014-04-20" },
{ id: 2, content: "item 2", start: "2014-04-14" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
{ id: 5, content: "item 5", start: "2014-04-25" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" },
]);
var options = {
height: 250,
};
var timeline = new vis.Timeline(container, items, options);
```
--------------------------------
### Vis Timeline Initialization with Bundled ESM
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/standalone-build.html
Example of initializing a Vis Timeline using the bundled ESM build. It shows creating a DataSet and attaching the timeline to a DOM element.
```javascript
// DOM element where the Timeline will be attached
const container = document.getElementById("visualization");
// Create a DataSet (allows two way data-binding)
const items = new DataSet([
{ id: 1, content: "item 1", start: "2014-04-20" },
{ id: 2, content: "item 2", start: "2014-04-14" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
{ id: 5, content: "item 5", start: "2014-04-25" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
// Configuration for the Timeline
const options = {};
// Create a Timeline
const timeline = new Timeline(container, items, options);
```
--------------------------------
### Vis Timeline Initialization with Browser UMD
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/standalone-build.html
Example of initializing a Vis Timeline using the UMD build. It demonstrates creating a DataSet and attaching the timeline to a DOM element.
```javascript
// DOM element where the Timeline will be attached
const container = document.getElementById("visualization");
// Create a DataSet (allows two way data-binding)
const items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2014-04-20" },
{ id: 2, content: "item 2", start: "2014-04-14" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
{ id: 5, content: "item 5", start: "2014-04-25" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
// Configuration for the Timeline
const options = {};
// Create a Timeline
const timeline = new vis.Timeline(container, items, options);
```
--------------------------------
### Listen for 'select' event
Source: https://github.com/visjs/vis-timeline/blob/master/docs/timeline/index.html
Example of how to listen for the 'select' event on a timeline instance. This event fires when items are selected.
```javascript
timeline.on('select', function (properties) {
alert('selected items: ' + properties.items);
});
```
--------------------------------
### Bundled ESM Setup for Vis Timeline
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/peer-build.html
Import Vis Timeline and DataSet using ESM syntax for bundled applications. Ensure the CSS is also imported.
```javascript
import { DataSet } from "vis-data/peer";
import { Timeline } from "vis-timeline/peer";
import "vis-timeline/styles/vis-timeline-graph2d.css";
// You may import from other packages like Vis Network or Vis Graph3D here.
// You can optionally include locales for Moment if you need any.
// DOM element where the Timeline will be attached
const container = document.getElementById("visualization");
// Create a DataSet (allows two way data-binding)
const items = new DataSet([
{ id: 1, content: "item 1", start: "2014-04-20" },
{ id: 2, content: "item 2", start: "2014-04-14" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
{ id: 5, content: "item 5", start: "2014-04-25" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
// Configuration for the Timeline
const options = {};
// Create a Timeline
const timeline = new Timeline(container, items, options);
```
--------------------------------
### JSDoc Tutorial Object Structure
Source: https://github.com/visjs/vis-timeline/blob/master/docs/README.md
An example structure for the 'tutorial' object, which is typically used for organizing tutorial content within JSDoc generation.
```javascript
{
"longname":"",
"name":"",
"title":"",
"content":"",
"parent":null,
"children":[],
"_tutorials":{}
}
```
--------------------------------
### Create a Basic Timeline with Data
Source: https://github.com/visjs/vis-timeline/blob/master/docs/timeline/index.html
This snippet demonstrates how to initialize a vis.js Timeline with a container, a DataSet of items, and an options object. The items include content, start dates, and some with end dates.
```html
Timeline | Basic demo
```
--------------------------------
### Example TaffyDB Item for an Instance Method
Source: https://github.com/visjs/vis-timeline/blob/master/docs/README.md
Illustrates the structure of a TaffyDB data item representing an instance method, including its parameters, access level, and metadata.
```javascript
[
{
comment:
"/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {boolean} selected
* @param {boolean} hover
* @param {number} x
* @param {number} y
* @param {string} [baseline='middle']
* @private
* /",
meta: {
range: [20060, 22269],
filename: "Label.js",
lineno: 652,
columnno: 2,
path: "/home/wim/projects/github/vis/lib/network/modules/components/shared",
code: {
id: "astnode100066427",
name: "Label#_drawText",
type: "MethodDefinition",
paramnames: ["ctx", "selected", "hover", "x", "y", "baseline"],
},
vars: { "": null },
},
params: [
{ type: { names: ["CanvasRenderingContext2D"] }, name: "ctx" },
{ type: { names: ["boolean"] }, name: "selected" },
{ type: { names: ["boolean"] }, name: "hover" },
{ type: { names: ["number"] }, name: "x" },
{ type: { names: ["number"] }, name: "y" },
{
type: { names: ["string"] },
optional: true,
defaultvalue: "'middle'",
name: "baseline",
},
],
access: "private",
name: "_drawText",
longname: "Label#_drawText",
kind: "function",
memberof: "Label",
scope: "instance",
___id: "T000002R005388",
___s: true,
},
];
```
--------------------------------
### Browser UMD Setup for Vis Timeline
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/peer-build.html
Include this script in your HTML to set up Vis Timeline using the UMD build. Ensure Moment.js and vis-data are also included.
```html
```
--------------------------------
### Browser UMD Setup for Vis Timeline
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/standalone-build.html
Include this script tag to use the UMD version of the standalone Vis Timeline build in a browser. It bundles all necessary dependencies.
```html
```
--------------------------------
### Initial JSON Data Example
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/dataHandling/dataSerialization.html
This is an example of the JSON data structure used for timeline items. It includes properties like id, content, start, end, and type.
```json
[ { "id": 1, "content": "item 1", "start": "2014-01-01T01:00:00" }, { "id": 2, "content": "item 2", "start": "2014-01-01T02:00:00" }, { "id": 3, "content": "item 3", "start": "2014-01-01T03:00:00" }, { "id": 4, "content": "item 4", "start": "2014-01-01T04:00:00", "end": "2014-01-01T04:30:00" }, { "id": 5, "content": "item 5", "start": "2014-01-01T05:00:00", "type": "point" }, { "id": 6, "content": "item 6", "start": "2014-01-01T06:00:00" } ]
```
--------------------------------
### Initialize Timeline with Items
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/interaction/animateWindow.html
Sets up the timeline with sample data. Ensure the container element exists in your HTML.
```javascript
// create a dataset with items // we specify the type of the fields
// start and end here to be strings // containing an ISO date. The fields will be outputted as ISO dates // automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: {
start: "ISODate",
end: "ISODate"
}
});
// add items to the DataSet
items.add([
{ id: 1, content: "item 1 start", start: "2014-01-23" },
{ id: 2, content: "item 2", start: "2014-01-18" },
{ id: 3, content: "item 3", start: "2014-01-21" },
{ id: 4, content: "item 4", start: "2014-01-19", end: "2014-01-24" },
{ id: 5, content: "item 5", start: "2014-01-28", type: "point" },
{ id: 6, content: "item 6", start: "2014-01-26" },
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true,
showCurrentTime: true,
};
var timeline = new vis.Timeline(container, items, options);
```
--------------------------------
### Getting the Current Visible Window
Source: https://github.com/visjs/vis-timeline/blob/master/docs/graph2d/index.html
Retrieve the current visible range of the timeline, returning an object with 'start' and 'end' Date properties.
```javascript
var window = graph2d.getWindow();
console.log(window.start, window.end);
```
--------------------------------
### Create and Populate Vis-Timeline with Expected vs Actual Times
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/items/expectedVsActualTimesItems.html
Initializes a Vis-Timeline with items representing expected and actual times. It specifies ISO date types for start and end fields and adds items with custom classes for visual distinction. This setup is useful for comparing planned versus real durations.
```javascript
// create a dataset with items // we specify the type of the fields
// start and
// end here to be strings // containing an ISO date. The fields will be outputted as ISO dates // automatically getting data from the DataSet via items.get(). var items = new vis.DataSet({
type: {
start: "ISODate",
end: "ISODate"
}
});
var groups = new vis.DataSet([
{
id: "group1",
content: "group1"
},
]);
// add items to the DataSet
items.add([
// group 1
{
id: "background1",
start: "2014-01-21",
end: "2014-01-22",
type: "background",
group: "group1"
},
// subgroup 1
{
id: 1,
content: "item 1 (expected time)",
className: "expected",
start: "2014-01-23T12:00:00",
end: "2014-01-26T12:00:00",
group: "group1",
subgroup: "sg_1"
},
{
id: 2,
content: "item 1 (actual time)",
start: "2014-01-24T12:00:00",
end: "2014-01-27T12:00:00",
group: "group1",
subgroup: "sg_1"
},
// subgroup 2
{
id: 3,
content: "item 2 (expected time)",
className: "expected",
start: "2014-01-13T12:00:00",
end: "2014-01-16T12:00:00",
group: "group1",
subgroup: "sg_2"
},
{
id: 4,
content: "item 2 (actual time)",
start: "2014-01-14T12:00:00",
end: "2014-01-17T12:00:00",
group: "group1",
subgroup: "sg_2"
},
// subgroup 3
{
id: 5,
content: "item 3 (expected time)",
className: "expected",
start: "2014-01-17T12:00:00",
end: "2014-01-19T12:00:00",
group: "group1",
subgroup: "sg_3"
},
{
id: 6,
content: "item 3 (actual time)",
start: "2014-01-17T12:00:00",
end: "2014-01-18T12:00:00",
group: "group1",
subgroup: "sg_3"
},
]);
var container = document.getElementById("visualization");
var options = {
start: "2014-01-10",
end: "2014-02-10",
editable: true,
stack: false,
stackSubgroups: false,
};
var timeline = new vis.Timeline(container, items, groups, options);
```
--------------------------------
### JSDoc Environment Variable Example
Source: https://github.com/visjs/vis-timeline/blob/master/docs/README.md
An example of the global 'env' variable in JSDoc, which contains information about the current execution, arguments, configuration, and source files.
```javascript
{
"run":{"start":"2017-09-16T05:06:45.621Z","finish":null},
"args":["-c","jsdoc.json","-r","-t","default","../github/vis/lib/network/"],
"conf":{
"plugins":["/usr/lib/node_modules/jsdoc/plugins/markdown.js"],
"recurseDepth":10,
"source":{"includePattern":".+\.js(doc|x)?$","excludePattern":""},
"sourceType":"module",
"tags":{"allowUnknownTags":true,"dictionaries":["jsdoc","closure"]},
"templates":{"monospaceLinks":false,"cleverLinks":false}
},
"dirname":"/usr/lib/node_modules/jsdoc",
"pwd":"/home/wim/projects/jsdoc",
"opts":{ <> },
"sourceFiles":[ <> ],
"version":{"number":"3.5.4","revision":"Fri, 04 Aug 2017 22:05:27 GMT"}
}
```
--------------------------------
### Configure and Initialize Vis Timeline
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/other/groupsPerformance.html
Sets up the timeline options and initializes the `vis.Timeline` instance with the created groups and items.
```javascript
// 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("visualization");
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);
document.getElementById("count").innerHTML = count;
```
--------------------------------
### Create and Populate Vis-Timeline Items
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/editing/editingItems.html
Initializes a Vis-DataSet with specified data types and adds sample items. Changes to the dataset are logged to the console.
```javascript
var items = new vis.DataSet({
type: {
start: "ISODate",
end: "ISODate"
},
});
items.add([
{ id: 1, content: "item 1 start", start: "2014-01-23" },
{ id: 2, content: "item 2", start: "2014-01-18" },
{ id: 3, content: "item 3", start: "2014-01-21" },
{ id: 4, content: "item 4", start: "2014-01-19", end: "2014-01-24" },
{ id: 5, content: "item 5", start: "2014-01-28", type: "point" },
{ id: 6, content: "item 6", start: "2014-01-26" },
]);
items.on("*", function (event, properties) {
console.log(event, properties.items);
});
```
--------------------------------
### Custom Item Template Example
Source: https://github.com/visjs/vis-timeline/blob/master/docs/timeline/index.html
This example shows how to define a custom template function to dynamically generate HTML markup for timeline items based on their data.
```javascript
var options = {
template: function (item, element, data) {
var html = ... // generate HTML markup for this item
return html;
}
};
```
--------------------------------
### Initialize Timeline with Options
Source: https://github.com/visjs/vis-timeline/blob/master/test/timeline.html
Demonstrates how to initialize a Vis.js Timeline with various configuration options. This includes setting up item types, fields, and event handlers.
```javascript
console.time("create dataset");
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var items = new vis.DataSet({
type: {
start: "ISODate",
end: "ISODate",
},
fieldId: "_id",
});
var someHtml = document.createElement("div");
someHtml.innerHTML = 'Click here or here ';
items.add([
{
_id: 0,
content: someHtml,
start: now.clone().add(3, "days").toDate(),
title: "hello title!",
},
{
_id: "1",
content: "item 1 start",
start: now.clone().add(4, "days").toDate(),
},
{
_id: 2,
content: "Click here! (anchor)
" +
"
Click here! (div)
",
start: now.clone().add(-2, "days").toDate(),
},
{
_id: 3,
content: "item 3",
start: now.clone().add(2, "days").toDate(),
style: "color: red;",
},
{
_id: 4,
content: 'item 4 foo bar foo bar foo bar foo bar foo bar Normal link',
start: now.clone().add(0, "days").toDate(),
end: now.clone().add(7, "days").toDate(),
title: "hello title!",
},
{
_id: 4.1,
content: "item 4.1 test overflow foo bar foo bar foo bar",
start: now.clone().add(0, "days").toDate(),
end: now.clone().add(1, "days").toDate(),
title: "hello title!",
},
{
_id: 4.2,
content: "item 4.2 test overflow foo bar foo bar foo bar",
start: now.clone().add(1, "days").toDate(),
end: now.clone().add(1, "days").add(1, "minutes").toDate(),
title: "hello title!",
},
{
_id: 5,
content: "item 5",
start: now.clone().add(9, "days").toDate(),
type: "point",
title: "hello title!",
className: "special",
},
{
_id: 6,
content: "item 6 very long test bla bla bla",
start: now.clone().add(11, "days").toDate(),
},
]);
var container = document.getElementById("visualization");
var options = {
configure: true,
multiselect: true,
editable: true,
//orientation: 'top',
orientation: "both",
// start: now.clone().add(-7, 'days'),
// end: now.clone().add(7, 'days'),
//maxHeight: 200,
//height: 200,
showCurrentTime: true,
format: {
minorLabels: {
weekday: "dddd D",
month: "MMMM",
},
majorLabels: {
minute: "dddd D MMMM",
hour: "dddd D MMMM",
},
},
snap: null,
// timeAxis: {
// scale: 'hour',
// step: 2
// }
//clickToUse: true,
//min: moment('2013-01-01'),
//max: moment('2013-12-31'),
//zoomMin: 1000 * 60 * 60 * 24, // 1 day
//zoomMax: 1000 * 60 * 60 * 24 * 30 * 6 // 6 months
};
console.timeEnd("create dataset");
console.time("create timeline");
var timeline = new vis.Timeline(container, items, options);
console.timeEnd("create timeline");
```
--------------------------------
### Handling Drag Start for Timeline Items
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/other/drag_drop.html
This function is called when a drag operation starts on a timeline item. It sets the allowed drag effect and prepares the data to be transferred, including item type and optional fixed times.
```javascript
function handleDragStart(event) {
var dragSrcEl = event.target;
event.dataTransfer.effectAllowed = "move";
var itemType = event.target.innerHTML.split("-")[1].trim();
var item = {
id: new Date(),
type: itemType,
content: event.target.innerHTML.split("-")[0].trim(),
};
var isFixedTimes = event.target.innerHTML.split("-")[2] && event.target.innerHTML.split("-")[2].trim() == "fixed times";
if (isFixedTimes) {
item.start = new Date();
item.end = new Date(1000 * 60 * 10 + new Date().valueOf());
}
event.dataTransfer.setData("text", JSON.stringify(item));
}
```
--------------------------------
### Attaching Drag Start Event Listeners
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/other/drag_drop.html
Attaches 'dragstart' event listeners to individual timeline items and object items, enabling them to be dragged. This ensures that the respective drag start handler functions are called when a drag operation begins.
```javascript
var items = document.querySelectorAll(".items .item");
var objectItems = document.querySelectorAll(".object-item");
for (var i = items.length - 1; i >= 0; i--) {
var item = items[i];
item.addEventListener("dragstart", handleDragStart.bind(this), false);
}
for (var i = objectItems.length - 1; i >= 0; i--) {
var objectItem = objectItems[i];
objectItem.addEventListener(
"dragstart",
handleObjectItemDragStart.bind(this),
false,
);
}
```
--------------------------------
### Graph2d Initialization and Data Setup
Source: https://github.com/visjs/vis-timeline/blob/master/examples/graph2d/14_toggleGroups.html
This snippet sets up the data (items and groups) and initializes multiple Graph2d instances with shared configurations. It demonstrates how to define group properties like drawing style and shading.
```javascript
// create a dataSet with groups var names = ["SquareShaded", "Bargraph", "Blank", "CircleShaded"]; var groups = new vis.DataSet(); groups.add({ id: 0, content: names[0], options: { drawPoints: { style: "square", // square, circle }, shaded: { orientation: "bottom", // top, bottom }, }, }); groups.add({ id: 1, content: names[1], options: { style: "bar", }, }); groups.add({ id: 2, content: names[2], options: { drawPoints: false }, }); groups.add({ id: 3, content: names[3], options: { drawPoints: { style: "circle", // square, circle }, shaded: { orientation: "top", // top, bottom }, }, }); var container = document.getElementById("visualization"); var items = [ { x: "2014-06-13", y: 60 }, { x: "2014-06-14", y: 40 }, { x: "2014-06-15", y: 55 }, { x: "2014-06-16", y: 40 }, { x: "2014-06-17", y: 50 }, { x: "2014-06-13", y: 30, group: 0 }, { x: "2014-06-14", y: 10, group: 0 }, { x: "2014-06-15", y: 15, group: 1 }, { x: "2014-06-16", y: 30, group: 1 }, { x: "2014-06-17", y: 10, group: 1 }, { x: "2014-06-18", y: 15, group: 1 }, { x: "2014-06-19", y: 52, group: 1 }, { x: "2014-06-20", y: 10, group: 1 }, { x: "2014-06-21", y: 20, group: 2 }, { x: "2014-06-22", y: 60, group: 2 }, { x: "2014-06-23", y: 10, group: 2 }, { x: "2014-06-24", y: 25, group: 2 }, { x: "2014-06-25", y: 30, group: 2 }, { x: "2014-06-26", y: 20, group: 3 }, { x: "2014-06-27", y: 60, group: 3 }, { x: "2014-06-28", y: 10, group: 3 }, { x: "2014-06-29", y: 25, group: 3 }, { x: "2014-06-30", y: 30, group: 3 }, ]; var dataset = new vis.DataSet(items); var options = { defaultGroup: "ungrouped", legend: false, graphHeight: 200, start: "2014-06-10", end: "2014-07-04", showMajorLabels: false, showMinorLabels: false, }; var graph2d1 = new vis.Graph2d( document.getElementById("visualization1"), dataset, groups, options, );
```
--------------------------------
### Initializing Timeline with Items and Groups
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/styling/dayScaleWithCalendarWeek.html
Sets up a vis-timeline with items and groups, demonstrating how to create week-based data using localized moment.js objects for both US and ISO week numbering conventions.
```javascript
var itemCount = 26; // DOM element where the Timeline will be attached var container = document.getElementById("visualization"); // just a group for the effects var groups = new vis.DataSet(); groups.add(\[ { id: 1, content: "ISO Weeks" }, { id: 2, content: "US Weeks" }, \]); // Create a DataSet (allows two way data-binding) var items = new vis.DataSet(); // create a localized moment object based on the current date var USdate = moment()
.locale("en")
.hours(0)
.minutes(0)
.seconds(0)
.milliseconds(0); // use the locale-aware weekday function to move to the begin of the current week USdate.weekday(0); // Iterate and just add a week to use it again in the next iteration for (var i = 0; i < itemCount; i++) {
var USweekNumber = USdate.format("w");
var USweekStart = USdate.format();
var USweekEnd = USdate.add(1, "week").format();
items.add({ id: i, group: 2, content: "US week " + USweekNumber, start: USweekStart, end: USweekEnd });
}
// create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system var DEdate = moment()
.locale("de")
.hours(0)
.minutes(0)
.seconds(0)
.milliseconds(0);
DEdate.weekday(0);
for (var j = 0; j < itemCount; j++) {
var DEweekNumber = DEdate.format("w");
var DEweekStart = DEdate.format();
var DEweekEnd = DEdate.add(1, "week").format();
items.add({ id: itemCount + j, group: 1, content: "ISO week " + DEweekNumber, start: DEweekStart, end: DEweekEnd });
}
```
--------------------------------
### getWindow()
Source: https://github.com/visjs/vis-timeline/blob/master/docs/timeline/index.html
Retrieves the current visible window of the timeline, including its start and end dates.
```APIDOC
## getWindow()
Returns the current visible window. Returns an object with properties `start: Date` and `end: Date`.
```
--------------------------------
### Getting the Data Range
Source: https://github.com/visjs/vis-timeline/blob/master/docs/graph2d/index.html
Obtain the minimum and maximum dates of all items in the timeline using getDataRange().
```javascript
var range = graph2d.getDataRange();
console.log(range.min, range.max);
```
--------------------------------
### Initializing Vis-Timeline with Groups and Options
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/groups/nestedGroups.html
This snippet shows how to instantiate the Vis-Timeline visualization with the created items, groups, and custom options. It's essential for rendering the timeline on the page.
```javascript
var container = document.getElementById("visualization");
var options = {
groupOrder: "content", // groupOrder can be a property name or a sorting function
};
var timeline = new vis.Timeline(container, items, groups, options);
```
--------------------------------
### Getting Event Properties
Source: https://github.com/visjs/vis-timeline/blob/master/docs/graph2d/index.html
Extract relevant properties from a click event, such as coordinates, time, and the element clicked.
```javascript
var properties = graph2d.getEventProperties(event);
```
--------------------------------
### Create and Configure Vis.js Timeline
Source: https://github.com/visjs/vis-timeline/blob/master/examples/timeline/interaction/navigationMenu.html
Initializes a Vis.js timeline with sample data and basic options. This sets up the core visualization component.
```javascript
var container = document.getElementById("visualization");
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2014-04-20" },
{ id: 2, content: "item 2", start: "2014-04-14" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
{ id: 5, content: "item 5", start: "2014-04-25" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" },
]);
var options = {};
var timeline = new vis.Timeline(container, items, options);
```
--------------------------------
### Getting the Custom Time
Source: https://github.com/visjs/vis-timeline/blob/master/docs/graph2d/index.html
Retrieve the custom time value using getCustomTime(). This is only applicable when the 'showCustomTime' option is enabled.
```javascript
var customTime = graph2d.getCustomTime();
```