UNPKG

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