diff options
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, 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..9625b51d --- /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.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 |