diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
| commit | 210e8feae2fb4842bfb2de38666e6c41671fef3c (patch) | |
| tree | cbdafa34b1a6260bb20236d7e9de9eb1b690a1c5 /www/lib/vis/examples/graph2d/08_performance.html | |
| parent | e7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff) | |
removed lib
Diffstat (limited to 'www/lib/vis/examples/graph2d/08_performance.html')
| -rw-r--r-- | www/lib/vis/examples/graph2d/08_performance.html | 150 |
1 files changed, 0 insertions, 150 deletions
diff --git a/www/lib/vis/examples/graph2d/08_performance.html b/www/lib/vis/examples/graph2d/08_performance.html deleted file mode 100644 index 9a2ad2e1..00000000 --- a/www/lib/vis/examples/graph2d/08_performance.html +++ /dev/null @@ -1,150 +0,0 @@ -<!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 |
