From 6f9cc716cb752c35f034cbfade7b908f51492635 Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Tue, 24 Jun 2014 17:56:01 +0200 Subject: [PATCH] more examples, working on performance example --- dist/vis.js | 14 ++- examples/graph2d/05_bothAxis.html | 7 +- examples/graph2d/06_interpolation.html | 17 +-- examples/graph2d/07_scrollingAndSorting.html | 72 ++++++++++++ examples/graph2d/08_performance.html | 116 +++++++++++++++++++ examples/graph2d/09_performance.html | 102 ---------------- src/timeline/component/GraphGroup.js | 2 +- src/timeline/component/Legend.js | 4 +- src/timeline/component/Linegraph.js | 8 +- 9 files changed, 218 insertions(+), 124 deletions(-) create mode 100644 examples/graph2d/07_scrollingAndSorting.html create mode 100644 examples/graph2d/08_performance.html delete mode 100644 examples/graph2d/09_performance.html diff --git a/dist/vis.js b/dist/vis.js index 9072c1ec..140a1682 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -2788,7 +2788,7 @@ GraphGroup.prototype.setOptions = function(options) { GraphGroup.prototype.update = function(group) { this.group = group; this.content = group.content || 'graph'; - this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0]; + this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10; this.setOptions(group.options); }; @@ -2963,11 +2963,11 @@ Legend.prototype.redraw = function() { } if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') { - this.dom.frame.style.top = '4px'; + this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px'; this.dom.frame.style.bottom = ''; } else { - this.dom.frame.style.bottom = '4px'; + this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px'; this.dom.frame.style.top = ''; } @@ -3923,6 +3923,10 @@ Linegraph.prototype.redraw = function() { if (zoomed == true) { this._updateGraph(); } + + this.legendLeft.redraw(); + this.legendRight.redraw(); + return resized; }; @@ -4194,8 +4198,8 @@ Linegraph.prototype._prepareData = function (datapoints, options) { axis = this.yAxisRight; } for (var i = 0; i < datapoints.length; i++) { - xValue = toScreen(datapoints[i].x) + this.width - 1; - yValue = axis.convertValue(datapoints[i].y); + xValue = Math.round(toScreen(datapoints[i].x) + this.width - 1); + yValue = Math.round(axis.convertValue(datapoints[i].y)); extractedData.push({x: xValue, y: yValue}); } diff --git a/examples/graph2d/05_bothAxis.html b/examples/graph2d/05_bothAxis.html index 233070a9..717a3a91 100644 --- a/examples/graph2d/05_bothAxis.html +++ b/examples/graph2d/05_bothAxis.html @@ -41,10 +41,9 @@

Graph2D | Both Axis Example

This example shows the some of the graphs outlined on the right side using the yAxisOrientation option within the groups. - We also show a few more custom styles for the graphs. - Finally, the legend is manually positioned. Both the left and right axis + We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split - in a left and a right segment. Since this example shows the right axis, the right legend is configured. + in a left and a right segment. The default position of the left axis has been changed.
@@ -128,7 +127,7 @@ var dataset = new vis.DataSet(items); var options = { dataAxis: {showMinorLabels: false}, - legend: {left:{position:"bottom-left"},right:{position:'top-right'}}, + legend: {left:{position:"bottom-left"}}, start: '2014-06-09', end: '2014-07-03' }; diff --git a/examples/graph2d/06_interpolation.html b/examples/graph2d/06_interpolation.html index dc8b9b6e..953fb950 100644 --- a/examples/graph2d/06_interpolation.html +++ b/examples/graph2d/06_interpolation.html @@ -15,13 +15,14 @@

Graph2D | Interpolation

- This example shows the most basic functionality of the vis.js Graph2D module. An array or a vis.Dataset can be used as input. - In the following examples we'll explore the options Graph2D offest for customization. This example uses all default settings. - There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can - create your own styling. + The Graph2D makes use of Catmull-Rom spline interpolation. + The user can configure these per group, or globally. In this example we show all 4 possiblities. The differences are in the parametrization of + the curves. The options are uniform, chordal and centripetal. Alternatively you can disable the Catmull-Rom interpolation and + a linear interpolation will be used. The centripetal parametrization produces the best result (no self intersection, yet follows the line closely) and is therefore the default setting.

- Graph2D is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2D. - In these examples however, we will focus on what's new in Graph2D! + For both the centripetal and chordal parametrization, the distances between the points have to be calculated and this makes these methods computationally intensive + if there are very many points. The uniform parametrization still has to do transformations, though it does not have to calculate the distance between point. Finally, the + linear interpolation is the fastest method. For more on the Catmull-Rom method, C. Yuksel et al. have an interesting paper titled ″On the parametrization of Catmull-Rom Curves″.

@@ -74,7 +75,7 @@ for (var i = 0; i < names.length; i++) { dataset.add( [ {x: '2014-06-12', y: 0 , group: i}, - {x: '2014-06-13', y: 30, group: i}, + {x: '2014-06-13', y: 40, group: i}, {x: '2014-06-14', y: 10, group: i}, {x: '2014-06-15', y: 15, group: i}, {x: '2014-06-15', y: 30, group: i}, @@ -90,7 +91,7 @@ dataPoints: false, dataAxis: {visible: false}, legend: true, - start: '2014-06-10', + start: '2014-06-11', end: '2014-06-22' }; var graph2d = new vis.Graph2d(container, dataset, options, groups); diff --git a/examples/graph2d/07_scrollingAndSorting.html b/examples/graph2d/07_scrollingAndSorting.html new file mode 100644 index 00000000..817eef2d --- /dev/null +++ b/examples/graph2d/07_scrollingAndSorting.html @@ -0,0 +1,72 @@ + + + + Graph2d | Scrolling and Sorting + + + + + + + +

Graph2D | Scrolling and Sorting

+
+ You can determine the height of the Graph2D seperately from the height of the frame. If the graphHeight + is defined, and the height is not, the frame will auto-scale to accommodate the graphHeight. If the height + is defined as well, the user can scroll up and down vertically as well as horizontally to view the graph. +

+ Vertical scrolling is planned, though not yet available. The graphHeight also does not conform if only the height is defined. +

+ Graph2D does not sort the data. It is plotted as it is inputted. If you want your data to be sorted, sort your data. +
+
+
+ + + + \ No newline at end of file diff --git a/examples/graph2d/08_performance.html b/examples/graph2d/08_performance.html new file mode 100644 index 00000000..d9fbb923 --- /dev/null +++ b/examples/graph2d/08_performance.html @@ -0,0 +1,116 @@ + + + + Graph2D | Performance + + + + + + + + + + +

Graph2D | Performance

+
+ This example shows the some of the graphs outlined on the right side using the yAxisOrientation option within the groups. + We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis + have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split + in a left and a right segment. The default position of the left axis has been changed. + + +
+
+

+ + + + + +

+
+ + + + \ No newline at end of file diff --git a/examples/graph2d/09_performance.html b/examples/graph2d/09_performance.html deleted file mode 100644 index c66d5985..00000000 --- a/examples/graph2d/09_performance.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - Graph2d | Basic demo - - - - - - - -
- - - - \ No newline at end of file diff --git a/src/timeline/component/GraphGroup.js b/src/timeline/component/GraphGroup.js index c89bf0cb..4eec94d9 100644 --- a/src/timeline/component/GraphGroup.js +++ b/src/timeline/component/GraphGroup.js @@ -47,7 +47,7 @@ GraphGroup.prototype.setOptions = function(options) { GraphGroup.prototype.update = function(group) { this.group = group; this.content = group.content || 'graph'; - this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0]; + this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10; this.setOptions(group.options); }; diff --git a/src/timeline/component/Legend.js b/src/timeline/component/Legend.js index a5245071..d879d0de 100644 --- a/src/timeline/component/Legend.js +++ b/src/timeline/component/Legend.js @@ -123,11 +123,11 @@ Legend.prototype.redraw = function() { } if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') { - this.dom.frame.style.top = '4px'; + this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px'; this.dom.frame.style.bottom = ''; } else { - this.dom.frame.style.bottom = '4px'; + this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px'; this.dom.frame.style.top = ''; } diff --git a/src/timeline/component/Linegraph.js b/src/timeline/component/Linegraph.js index cb61269d..e92de576 100644 --- a/src/timeline/component/Linegraph.js +++ b/src/timeline/component/Linegraph.js @@ -453,6 +453,10 @@ Linegraph.prototype.redraw = function() { if (zoomed == true) { this._updateGraph(); } + + this.legendLeft.redraw(); + this.legendRight.redraw(); + return resized; }; @@ -724,8 +728,8 @@ Linegraph.prototype._prepareData = function (datapoints, options) { axis = this.yAxisRight; } for (var i = 0; i < datapoints.length; i++) { - xValue = toScreen(datapoints[i].x) + this.width - 1; - yValue = axis.convertValue(datapoints[i].y); + xValue = Math.round(toScreen(datapoints[i].x) + this.width - 1); + yValue = Math.round(axis.convertValue(datapoints[i].y)); extractedData.push({x: xValue, y: yValue}); }