mega changes, including updates and X

author: Pliable Pixels <pliablepixels@gmail.com> 2017-09-21 12:49:18 -0400
committer: Pliable Pixels <pliablepixels@gmail.com> 2017-09-21 12:49:18 -0400
commit: b28028ac4082842143b0f528d6bc539da6ccb419 (patch)
tree: 1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/graph2d/08_performance.html
parent: 676270d21beed31d767a06c89522198c77d5d865 (diff)
1 files changed, 150 insertions, 0 deletions
diff --git a/www/lib/vis/examples/graph2d/08_performance.html b/www/lib/vis/examples/graph2d/08_performance.html
new file mode 100644
index 00000000..9a2ad2e1
--- /dev/null
+++ b/www/lib/vis/examples/graph2d/08_performance.html
@@ -0,0 +1,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>
+\ No newline at end of file
author	Pliable Pixels <pliablepixels@gmail.com>	2017-09-21 12:49:18 -0400
committer	Pliable Pixels <pliablepixels@gmail.com>	2017-09-21 12:49:18 -0400
commit	b28028ac4082842143b0f528d6bc539da6ccb419 (patch)
tree	1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/graph2d/08_performance.html
parent	676270d21beed31d767a06c89522198c77d5d865 (diff)