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

more examples, working on performance example

css_transitions
Alex de Mulder 10 years ago
parent
db46e27732
commit
6f9cc716cb
9 changed files with 218 additions and 124 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -5
      dist/vis.js
  2. +3
    -4
      examples/graph2d/05_bothAxis.html
  3. +9
    -8
      examples/graph2d/06_interpolation.html
  4. +72
    -0
      examples/graph2d/07_scrollingAndSorting.html
  5. +116
    -0
      examples/graph2d/08_performance.html
  6. +0
    -102
      examples/graph2d/09_performance.html
  7. +1
    -1
      src/timeline/component/GraphGroup.js
  8. +2
    -2
      src/timeline/component/Legend.js
  9. +6
    -2
      src/timeline/component/Linegraph.js

+ 9
- 5
dist/vis.js View File

@ -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});
}

+ 3
- 4
examples/graph2d/05_bothAxis.html View File

@ -41,10 +41,9 @@
<h2>Graph2D | Both Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> 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 <code>left</code> and a <code>right</code> segment. Since this example shows the right axis, the right legend is configured.
in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
</div>
@ -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'
};

+ 9
- 8
examples/graph2d/06_interpolation.html View File

@ -15,13 +15,14 @@
<body>
<h2>Graph2D | Interpolation</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
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 <a href="http://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline" target="_blank">Catmull-Rom spline interpolation</a>.
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 <code>uniform</code>, <code>chordal</code> and <code>centripetal</code>. Alternatively you can disable the Catmull-Rom interpolation and
a linear interpolation will be used. The <code>centripetal</code> parametrization produces the best result (no self intersection, yet follows the line closely) and is therefore the default setting.
<br /><br />
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 <code>centripetal</code> and <code>chordal</code> parametrization, the distances between the points have to be calculated and this makes these methods computationally intensive
if there are very many points. The <code>uniform</code> 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, <a href="http://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf" target="_blank">C. Yuksel et al. have an interesting paper titled &Prime;On the parametrization of Catmull-Rom Curves&Prime;</a>.
</div>
<br />
<div id="visualization"></div>
@ -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);

+ 72
- 0
examples/graph2d/07_scrollingAndSorting.html View File

@ -0,0 +1,72 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Scrolling and Sorting</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" />
</head>
<body>
<h2>Graph2D | Scrolling and Sorting</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can determine the height of the Graph2D seperately from the height of the frame. If the <code>graphHeight</code>
is defined, and the <code>height</code> is not, the frame will auto-scale to accommodate the graphHeight. If the <code>height</code>
is defined as well, the user can scroll up and down vertically as well as horizontally to view the graph.
<br /><br />
Vertical scrolling is planned, though not yet available. The graphHeight also does not conform if only the <code>height</code> is defined.
<br /><br />
Graph2D does not sort the data. It is plotted as it is inputted. If you want your data to be sorted, sort your data.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30},
{x: '2014-06-11', y: 100},
{x: '2014-06-12', y: 250},
{x: '2014-06-13', y: 300},
{x: '2014-06-14', y: 100},
{x: '2014-06-15', y: 150},
{x: '2014-06-16', y: 300},
{x: '2014-06-11', y: 400},
{x: '2014-06-12', y: 450},
{x: '2014-06-13', y: 400},
{x: '2014-06-14', y: 500},
{x: '2014-06-15', y: 420},
{x: '2014-06-16', y: 600},
{x: '2014-06-11', y: 810},
{x: '2014-06-12', y: 825},
{x: '2014-06-13', y: 830},
{x: '2014-06-14', y: 810},
{x: '2014-06-15', y: 815},
{x: '2014-06-16', y: 900}
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
defaultGroup: 'doodle',
graphHeight: '1500px',
height: '500px',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 116
- 0
examples/graph2d/08_performance.html View File

@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2D | Performance</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2D | Performance</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> 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 <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
</div>
<br />
<p>
<label for="count">Number of items</label>
<input id="count" value="100">
<input id="draw" type="button" value="draw">
<input id="toggleInterpolation" type="button" value="toggle Interpolation">
<input id="togglePoints" type="button" value="toggle Points">
</p>
<div id="visualization"></div>
<script>
var points = '';
var interpolation = '';
function togglePoints() {
var pointsOptions = {};
if (points == "") {
points = 'circle';
pointsOptions = {drawPoints: {style: 'circle'}};
}
else if (points == "circle") {
points = 'square';
pointsOptions = {drawPoints: {style: 'square'}};
}
else if (points == "square") {
points = '';
pointsOptions = {drawPoints: false};
}
graph2D.setOptions(pointsOptions);
}
function toggleInterpolation() {
var interpolationOptions = {};
if (interpolation == "") {
interpolation = 'centripetal';
interpolationOptions = {drawPoints: {style: 'circle'}};
}
else if (interpolation == "circle") {
interpolation = 'chordal';
interpolationOptions = {drawPoints: {style: 'square'}};
}
else if (interpolation == "square") {
interpolation = 'uniform';
interpolationOptions = {drawPoints: false};
}
else if (interpolation == "square") {
interpolation = '';
interpolationOptions = {drawPoints: false};
}
graph2D.setOptions(interpolationOptions);
}
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var dataset = new vis.DataSet({
type: {start: 'ISODate', end: 'ISODate' }
});
var startPoint = now;
var endPoint = now.clone().add('days', 100);
// create data
function createData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
for (var i = 0; i < count; i++) {
newData.push({id: i, x: now.clone().add('days', i), y: Math.sin(0.1 * 3.14159654 * i)});
}
dataset.clear();
dataset.add(newData);
}
createData();
document.getElementById('draw').onclick = createData;
document.getElementById('toggleInterpolation').onclick = createData;
document.getElementById('togglePoints').onclick = createData;
var container = document.getElementById('visualization');
var options = {
start: startPoint,
end: endPoint
};
var graph2D = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 0
- 102
examples/graph2d/09_performance.html View File

@ -1,102 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Basic demo</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" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var options = {
yAxisOrientation: 'left',
shaded: {
enabled: true,
orientation: 'bottom' // top, bottom
},
drawPoints: {
enabled: false,
size: 6,
style: 'circle' // square, circle
}
};
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
// className: "graphGroup9",
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
options: {
style:'bar',
// yAxisOrientation: 'right',
drawPoints: false, // square, circle
shaded: {
orientation: 'top' // top, bottom
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right',
shaded: {
enabled: false,
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10 },
{x: '2014-06-12', y: 25 },
{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: 100, group: 1},
{x: '2014-06-18', y: 150, group: 1},
{x: '2014-06-19', y: 520, group: 1},
{x: '2014-06-20', y: 100, 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-11', y: 10},
// {x: '2014-06-12', y: 25},
// {x: '2014-06-13', y: 30},
// {x: '2014-06-14', y: 10},
// {x: '2014-06-15', y: 15},
// {x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var graph2d = new vis.Graph2d(container, items, options, groups);
</script>
</body>
</html>

+ 1
- 1
src/timeline/component/GraphGroup.js View File

@ -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);
};

+ 2
- 2
src/timeline/component/Legend.js View File

@ -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 = '';
}

+ 6
- 2
src/timeline/component/Linegraph.js View File

@ -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});
}

Write Preview
Loading…
Cancel
Save