Skip to content

Instantly share code, notes, and snippets.

@CGavrila

CGavrila/gist:a3021a4fc49d5c9e3068

Last active August 29, 2015 14:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CGavrila/a3021a4fc49d5c9e3068 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CGavrila/a3021a4fc49d5c9e3068 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. CGavrila renamed this gist Dec 2, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion gistfile1.txt → gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    <!DOCTYPE HTML>
    <html>

  2. CGavrila created this gist Dec 2, 2014.
    157 changes: 157 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,157 @@

    <!DOCTYPE HTML>
    <html>

    <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>Graph2d | Streaming data</title>

    <style type="text/css">
    body, html, select {
    font: 10pt sans-serif;
    }
    </style>

    <script src="http://visjs.org/dist/vis.js"></script>
    <link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <h2>Graph2d | Streaming data</h2>
    <p style="max-width: 700px;">
    This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options <code>moveable</code> and <code>zoomable</code> false.
    </p>

    <p>
    <label for="strategy">Strategy:</label>
    <select id="strategy">
    <option value="continuous" selected>Continuous (CPU intensive)</option>
    <option value="discrete">Discrete</option>
    <option value="static">Static</option>
    </select>
    </p>

    <div id="visualization"></div>

    <script type="text/javascript">
    var DELAY = 1000; // delay in ms to add new data points

    var strategy = document.getElementById('strategy');

    // create a graph2d with an (currently empty) dataset
    var container = document.getElementById('visualization');
    var dataset = new vis.DataSet();

    var options = {
    start: vis.moment().add(-30, 'seconds'), // changed so its faster
    end: vis.moment(),
    dataAxis: {
    customRange: {
    left: {
    min:-10, max: 10
    }
    }
    },
    drawPoints: {
    style: 'circle' // square, circle
    },
    shaded: {
    orientation: 'bottom' // top, bottom
    }
    };

    /**
    * Define the groups of data that will be plotted into the graph
    */
    var names = ['Group 1', 'Group 2'];
    var groups = new vis.DataSet();
    groups.add({
    id: 0,
    content: names[0],
    options: {
    drawPoints: false, // or style: 'circle'/'square'
    shaded: {
    orientation: 'bottom' // top, bottom
    }
    }
    });
    groups.add({
    id: 1,
    content: names[1],
    options: {
    drawPoints: false, // or style: 'circle'/'square'
    shaded: {
    orientation: 'bottom' // top, bottom
    }
    }
    });

    var graph2d = new vis.Graph2d(container, dataset, groups, options);

    // a function to generate data points
    function y(x) {
    return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
    }

    function renderStep() {
    // move the window (you can think of different strategies).
    var now = vis.moment();
    var range = graph2d.getWindow();
    var interval = range.end - range.start;
    switch (strategy.value) {
    case 'continuous':
    // continuously move the window
    graph2d.setWindow(now - interval, now, {animate: false});
    requestAnimationFrame(renderStep);
    break;

    case 'discrete':
    graph2d.setWindow(now - interval, now, {animate: false});
    setTimeout(renderStep, DELAY);
    break;

    default: // 'static'
    // move the window 90% to the left when now is larger than the end of the window
    if (now > range.end) {
    graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
    }
    setTimeout(renderStep, DELAY);
    break;
    }
    }
    renderStep();

    /**
    * Add a new datapoint to the graph
    */
    function addDataPoint() {
    // add a new data point to the dataset
    var now = vis.moment();
    dataset.add({
    x: now,
    y: y(now / 1000),
    group: 0
    });

    dataset.add({
    x: now,
    y: y(now / 1000) + 2,
    group: 1
    });

    // remove all data points which are no longer visible
    var range = graph2d.getWindow();
    var interval = range.end - range.start;
    var oldIds = dataset.getIds({
    filter: function (item) {
    return item.x < range.start - interval;
    }
    });
    dataset.remove(oldIds);

    setTimeout(addDataPoint, DELAY);
    }
    addDataPoint();
    </script>
    </body>
    </html>