jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Added an example about orientation of axis and items, and fixed a bug in orientation of items

flowchartTest
jos 9 years ago
parent
8effbd782e
commit
3d4213fa73
5 changed files with 99 additions and 8 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +74
    -0
      examples/timeline/34_orientation.html
  2. +1
    -0
      examples/timeline/index.html
  3. +14
    -6
      lib/timeline/Core.js
  4. +5
    -1
      lib/timeline/Graph2d.js
  5. +5
    -1
      lib/timeline/Timeline.js

+ 74
- 0
examples/timeline/34_orientation.html View File

@ -0,0 +1,74 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Orientation</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
There are a number of orientation options for the time axis and the items.
</p>
<p>
<label for="axis-orientation">Axis orientation</label>
<select id="axis-orientation">
<option value="both">both</option>
<option value="bottom" selected>bottom</option>
<option value="top">top</option>
</select>
</p>
<p>
<label for="item-orientation">Item orientation</label>
<select id="item-orientation">
<option value="bottom" selected>bottom</option>
<option value="top">top</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
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'}
]);
// Configuration for the Timeline
var options = {
height: 250 // px
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
var axisOrientation = document.getElementById('axis-orientation');
axisOrientation.onchange = function () {
timeline.setOptions({ orientation: {axis: this.value} });
};
var itemOrientation = document.getElementById('item-orientation');
itemOrientation.onchange = function () {
timeline.setOptions({ orientation: {item: this.value} });
};
</script>
</body>
</html>

+ 1
- 0
examples/timeline/index.html View File

@ -46,6 +46,7 @@
<p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p> <p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p>
<p><a href="32_grid_styling.html">32_grid_styling.html</a></p> <p><a href="32_grid_styling.html">32_grid_styling.html</a></p>
<p><a href="33_custom_snapping.html">33_custom_snapping.html</a></p> <p><a href="33_custom_snapping.html">33_custom_snapping.html</a></p>
<p><a href="34_orientation.html">34_orientation.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p> <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
</div> </div>

+ 14
- 6
lib/timeline/Core.js View File

@ -218,14 +218,22 @@ Core.prototype.setOptions = function (options) {
if ('orientation' in options) { if ('orientation' in options) {
if (typeof options.orientation === 'string') { if (typeof options.orientation === 'string') {
this.options.orientation = options.orientation;
this.options.orientation = {
item: options.orientation,
axis: options.orientation
};
} }
else if (typeof options.orientation === 'object' && 'axis' in options.orientation) {
this.options.orientation = options.orientation.axis;
else if (typeof options.orientation === 'object') {
if ('item' in options.orientation) {
this.options.orientation.item = options.orientation.item;
}
if ('axis' in options.orientation) {
this.options.orientation.axis = options.orientation.axis;
}
} }
} }
if (this.options.orientation === 'both') {
if (this.options.orientation.axis === 'both') {
if (!this.timeAxis2) { if (!this.timeAxis2) {
var timeAxis2 = this.timeAxis2 = new TimeAxis(this.body); var timeAxis2 = this.timeAxis2 = new TimeAxis(this.body);
timeAxis2.setOptions = function (options) { timeAxis2.setOptions = function (options) {
@ -680,7 +688,7 @@ Core.prototype._redraw = function() {
// reposition the scrollable contents // reposition the scrollable contents
var offset = this.props.scrollTop; var offset = this.props.scrollTop;
if (options.orientation == 'bottom') {
if (options.orientation.item == 'bottom') {
offset += Math.max(this.props.centerContainer.height - this.props.center.height - offset += Math.max(this.props.centerContainer.height - this.props.center.height -
this.props.border.top - this.props.border.bottom, 0); this.props.border.top - this.props.border.bottom, 0);
} }
@ -936,7 +944,7 @@ Core.prototype._updateScrollTop = function () {
if (scrollTopMin != this.props.scrollTopMin) { if (scrollTopMin != this.props.scrollTopMin) {
// in case of bottom orientation, change the scrollTop such that the contents // in case of bottom orientation, change the scrollTop such that the contents
// do not move relative to the time axis at the bottom // do not move relative to the time axis at the bottom
if (this.options.orientation == 'bottom') {
if (this.options.orientation.item == 'bottom') {
this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin); this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
} }
this.props.scrollTopMin = scrollTopMin; this.props.scrollTopMin = scrollTopMin;

+ 5
- 1
lib/timeline/Graph2d.js View File

@ -33,7 +33,11 @@ function Graph2d (container, items, groups, options) {
autoResize: true, autoResize: true,
orientation: 'bottom',
orientation: {
axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
item: 'bottom' // not relevant for Graph2d
},
width: null, width: null,
height: null, height: null,
maxHeight: null, maxHeight: null,

+ 5
- 1
lib/timeline/Timeline.js View File

@ -38,7 +38,11 @@ function Timeline (container, items, groups, options) {
autoResize: true, autoResize: true,
orientation: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
orientation: {
axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
item: 'bottom' // not relevant
},
width: null, width: null,
height: null, height: null,
maxHeight: null, maxHeight: null,

Write Preview
Loading…
Cancel
Save