1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Performance</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span.label {
width:150px;
display:inline-block;
}
</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.8.4/moment.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body>
<h2>Graph2d | Performance</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example is a test of the performance of the Graph2d. Select the amount of datapoints you want to plot and press draw.
You can choose between the style of the points as well as the interpolation method. This can only be toggled with the buttons.
The interpolation options may not look different for this dataset but you can see their effects clearly in example 7.
<br /><br />
Linear interpolation and no points are the settings that will render quickest. By default, Graph2d will downsample when there are more
than 1 point per pixel. This can be manually disabled at the cost of performance by using the <code>sampling</code> option.
</div>
<br />
<p>
<span class="label">Number of items:</span><input id="count" value="50000">
<input id="draw" type="button" value="draw" style="width:200px;"> <span id="description"><b>Click the draw button to load the data!</b></span>
<br />
<span class="label">Interpolation method:</span><input id="interpolation" value="linear">
<input id="toggleInterpolation" type="button" value="toggle Interpolation" style="width:200px;">
<br />
<span class="label">Points style:</span><input id="points" value="none">
<input id="togglePoints" type="button" value="toggle Points" style="width:200px;">
</p>
<div id="visualization"></div>
<script>
var points = 'none';
var interpolation = 'linear';
function togglePoints() {
var pointsOptions = {};
var pointsField = document.getElementById("points");
if (points == "none") {
points = 'circle';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "circle") {
points = 'square';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "square") {
points = 'none';
pointsOptions = {drawPoints: false};
}
pointsField.value = points;
graph2d.setOptions(pointsOptions);
}
function toggleInterpolation() {
var interpolationOptions = {};
var interpolationField = document.getElementById("interpolation");
if (interpolation == "linear") {
interpolation = 'centripetal';
interpolationOptions = {interpolation: {parametrization: interpolation}};
}
else if (interpolation == "centripetal") {
interpolation = 'chordal';
interpolationOptions = {interpolation: {parametrization: interpolation}};
}
else if (interpolation == "chordal") {
interpolation = 'uniform';
interpolationOptions = {interpolation: {parametrization: interpolation}};
}
else if (interpolation == "uniform") {
interpolation = 'linear';
interpolationOptions = {interpolation: false};
}
interpolationField.value = interpolation;
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 + 3600000 * 5000;
// create data -- this is seperated into 3 functions so we can update the span.
function createData() {
var span = document.getElementById("description");
span.innerHTML = 'Generating data... (just javascript, not vis.graph2D)...';
setTimeout(generateData,10);
}
function generateData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
var span = document.getElementById("description");
var start = now;
for (var i = 0; i < count; i++) {
var yval = Math.sin(i/100) * Math.cos(i/50) * 50 + Math.sin(i/1000) * 50;
newData.push({id: i, x: start + 3600000 * i, y: yval});
}
span.innerHTML = 'Loading data into Graph2d...';
setTimeout(function() {loadDataIntoVis(newData);},10);
}
function loadDataIntoVis(newData) {
var span = document.getElementById("description");
dataset.clear();
dataset.add(newData);
span.innerHTML = 'Done!';
}
document.getElementById('draw').onclick = createData;
document.getElementById('toggleInterpolation').onclick = toggleInterpolation;
document.getElementById('togglePoints').onclick = togglePoints;
var container = document.getElementById('visualization');
var options = {
sampling: true,
drawPoints: {enabled:false, size:3},
interpolation: false,
start: startPoint,
end: endPoint
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>
|
