diff --git a/docs/timeline.html b/docs/timeline.html index 5c5e1766..c280eb56 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -174,18 +174,27 @@ var items = [ Description - id - String | Number + className + String no - An id for the item. Using an id is not required but highly - recommended. An id is needed when dynamically adding, updating, - and removing items in a DataSet. + This field is optional. A className can be used to give items + an individual css style. For example, when an item has className + 'red', one can define a css style like: + 
+.vis.timeline .red {
+  color: white;
+  background-color: red;
+  border-color: darkred;
+}
+ More details on how to style items can be found in the section + Styles. + - start - Date + content + String yes - The start date of the item, for example new Date(2010,09,23). + The contents of the item. This can be plain text or html code. end @@ -195,20 +204,6 @@ var items = [ If end date is provided, the item is displayed as a range. If not, the item is displayed as a box. - - content - String - yes - The contents of the item. This can be plain text or html code. - - - type - String - 'box' - The type of the item. Can be 'box' (default), 'point', or 'range'. - Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date. - - group any type @@ -221,20 +216,33 @@ var items = [ - className - String + id + String | Number no - This field is optional. A className can be used to give items - an individual css style. For example, when an item has className - 'red', one can define a css style like: - 
-.vis.timeline .red {
-  color: white;
-  background-color: red;
-  border-color: darkred;
-}
- More details on how to style items can be found in the section - Styles. + An id for the item. Using an id is not required but highly + recommended. An id is needed when dynamically adding, updating, + and removing items in a DataSet. + + + start + Date + yes + The start date of the item, for example new Date(2010,9,23). + + + title + String + none + Add a title for the item, displayed when holding the mouse on the item. + The title can only contain plain text. + + + + type + String + 'box' + The type of the item. Can be 'box' (default), 'point', or 'range'. + Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date. @@ -276,20 +284,6 @@ var groups = [ Required Description - - id - String | Number - yes - An id for the group. The group will display all items having a - property group which matches the id - of the group. - - - content - String - yes - The contents of the group. This can be plain text or html code. - className String @@ -306,6 +300,28 @@ var groups = [ Styles. + + content + String + yes + The contents of the group. This can be plain text or html code. + + + id + String | Number + yes + An id for the group. The group will display all items having a + property group which matches the id + of the group. + + + title + String + none + A title for the group, displayed when holding the mouse the groups label. + The title can only contain plain text. + + diff --git a/examples/graph2d/index.html b/examples/graph2d/index.html index b022b8c9..784f56f6 100644 --- a/examples/graph2d/index.html +++ b/examples/graph2d/index.html @@ -1,21 +1,20 @@ - +
-

Graph2d Examples

- -

01_basic.html

-

02_bars.html

-

03_groups.html

-

04_rightAxis.html

-

05_bothAxis.html

-

06_interpolation.html

-

07_scrollingAndSorting.html

-

08_performance.html

+

Graph2d Examples

+

01_basic.html

+

02_bars.html

+

03_groups.html

+

04_rightAxis.html

+

05_bothAxis.html

+

06_interpolation.html

+

07_scrollingAndSorting.html

+

08_performance.html

diff --git a/src/timeline/component/Group.js b/src/timeline/component/Group.js index 09c237f0..bfc63e71 100644 --- a/src/timeline/component/Group.js +++ b/src/timeline/component/Group.js @@ -81,6 +81,9 @@ Group.prototype.setData = function(data) { this.dom.inner.innerHTML = this.groupId; } + // update title + this.dom.label.title = data && data.title || ''; + if (!this.dom.inner.firstChild) { util.addClassName(this.dom.inner, 'hidden'); } diff --git a/src/timeline/component/ItemSet.js b/src/timeline/component/ItemSet.js index 47d524db..1a5171cd 100644 --- a/src/timeline/component/ItemSet.js +++ b/src/timeline/component/ItemSet.js @@ -1317,3 +1317,4 @@ ItemSet.itemSetFromTarget = function(event) { return null; }; + diff --git a/src/timeline/component/item/ItemBox.js b/src/timeline/component/item/ItemBox.js index 6a067826..04c94439 100644 --- a/src/timeline/component/item/ItemBox.js +++ b/src/timeline/component/item/ItemBox.js @@ -112,6 +112,12 @@ ItemBox.prototype.redraw = function() { this.dirty = true; } + // update title + if (this.data.title != this.title) { + dom.box.title = this.data.title; + this.title = this.data.title; + } + // update class var className = (this.data.className? ' ' + this.data.className : '') + (this.selected ? ' selected' : ''); diff --git a/src/timeline/component/item/ItemPoint.js b/src/timeline/component/item/ItemPoint.js index ebb74c28..bd6fd09f 100644 --- a/src/timeline/component/item/ItemPoint.js +++ b/src/timeline/component/item/ItemPoint.js @@ -102,6 +102,12 @@ ItemPoint.prototype.redraw = function() { this.dirty = true; } + // update title + if (this.data.title != this.title) { + dom.point.title = this.data.title; + this.title = this.data.title; + } + // update class var className = (this.data.className? ' ' + this.data.className : '') + (this.selected ? ' selected' : ''); diff --git a/src/timeline/component/item/ItemRange.js b/src/timeline/component/item/ItemRange.js index 98572557..b6bc2572 100644 --- a/src/timeline/component/item/ItemRange.js +++ b/src/timeline/component/item/ItemRange.js @@ -96,6 +96,12 @@ ItemRange.prototype.redraw = function() { this.dirty = true; } + // update title + if (this.data.title != this.title) { + dom.box.title = this.data.title; + this.title = this.data.title; + } + // update class var className = (this.data.className ? (' ' + this.data.className) : '') + (this.selected ? ' selected' : ''); diff --git a/test/timeline.html b/test/timeline.html index 7486f353..94607b91 100644 --- a/test/timeline.html +++ b/test/timeline.html @@ -65,16 +65,17 @@ fieldId: '_id' }); items.add([ - {_id: 0, content: 'item 0', start: now.clone().add('days', 3).toDate()}, + {_id: 0, content: 'item 0', start: now.clone().add('days', 3).toDate(), title: 'hello title!'}, {_id: 1, content: 'item 1
start', start: now.clone().add('days', 4).toDate()}, {_id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() }, {_id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()}, { _id: 4, content: 'item 4 ', start: now.clone().add('days', 0).toDate(), - end: now.clone().add('days', 7).toDate() + end: now.clone().add('days', 7).toDate(), + title: 'hello title!' }, - {_id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point'}, + {_id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point', title: 'hello title!'}, {_id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()} ]); diff --git a/test/timeline_groups.html b/test/timeline_groups.html index de2f5b16..aae53b62 100644 --- a/test/timeline_groups.html +++ b/test/timeline_groups.html @@ -51,7 +51,7 @@ var names = ['John (0)', 'Alston (1)', 'Lee (2)', 'Grant (3)']; var groups = new vis.DataSet(); for (var g = 0; g < groupCount; g++) { - groups.add({id: g, content: names[g]}); + groups.add({id: g, content: names[g], title: 'Title of group ' + g}); } // create a dataset with items @@ -65,6 +65,7 @@ content: 'item ' + i + ' (' + names[group] + ')', start: start, + title: 'Title for item ' + i, type: 'box' }); }