1#@!#!123s

: / home / ensad / www / gestiondepersonal / web / bower_components / vis / examples / graph2d /
Filename : 08_performance.html
back
<!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" />
</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>