jrtechs-vis/examples/graph3d/playground/playground.js

var query = null;


function load() {
    selectDataType();

    loadCsvExample();
    loadJsonExample();
    loadJavascriptExample();
    loadGooglespreadsheetExample();
    loadDatasourceExample();

    draw();
}



/**
 * Upate the UI based on the currently selected datatype
 */
function selectDataType() {
    var datatype = getDataType();

    document.getElementById("csv").style.overflow = "hidden";

    document.getElementById("csv").style.visibility               = (datatype == "csv") ? "" : "hidden";

    document.getElementById("csv").style.height               = (datatype == "csv") ? "auto" : "0px";
}


function round(value, decimals) {
    return parseFloat(value.toFixed(decimals));
}

function loadCsvExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "value"\n';

    // create some nice looking data with sin/cos
    var steps = 30;
    var axisMax = 314;
    var axisStep = axisMax / steps;
    for (var x = 0; x < axisMax; x+=axisStep) {
        for (var y = 0; y < axisMax; y+=axisStep) {
            var value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50;

            csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + '\n';
        }
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "surface";
    document.getElementById("verticalRatio").value = "0.5";

  document.getElementById("xLabel").value = "x";
  document.getElementById("yLabel").value = "y";
  document.getElementById("zLabel").value = "value";
}


function loadCsvAnimationExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "value", "time"\n';

    // create some nice looking data with sin/cos
    var steps = 20;
    var axisMax = 314;
    var tMax = 31;
    var axisStep = axisMax / steps;
    for (var t = 0; t < tMax; t++) {
        for (var x = 0; x < axisMax; x+=axisStep) {
            for (var y = 0; y < axisMax; y+=axisStep) {
                var value = Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
                csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + ', ' + t + '\n';
            }
        }
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "surface";
    document.getElementById("verticalRatio").value = "0.5";
    document.getElementById("animationInterval").value = 100;

    document.getElementById("xLabel").value = "x";
    document.getElementById("yLabel").value = "y";
    document.getElementById("zLabel").value = "value";
    document.getElementById("filterLabel").value = "time";
    document.getElementById("legendLabel").value = "value";

}


function loadCsvLineExample() {
    var csv = "";

    // headers
    csv += '"sin(t)", "cos(t)", "t"\n';

    // create some nice looking data with sin/cos
    var steps = 100;
    var axisMax = 314;
    var tmax = 4 * 2 * Math.PI;
    var axisStep = axisMax / steps;
    for (t = 0; t < tmax; t += tmax / steps) {
        var r = 1;
        var x = r * Math.sin(t);
        var y = r * Math.cos(t);
        var z = t;
        csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + '\n';
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "line";
    document.getElementById("verticalRatio").value = "1.0";
    document.getElementById("showPerspective").checked = false;

  document.getElementById("xLabel").value = "sin(t)";
  document.getElementById("yLabel").value = "cos(t)";
  document.getElementById("zLabel").value = "t";
}

function loadCsvMovingDotsExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "z", "color value", "time"\n';

    // create some shortcuts to math functions
    var sin = Math.sin;
    var cos = Math.cos;
    var pi = Math.PI;

    // create the animation data
    var tmax = 2.0 * pi;
    var tstep = tmax / 75;
    var dotCount = 1;  // set this to 1, 2, 3, 4, ...
    for (var t = 0; t < tmax; t += tstep) {
        var tgroup = parseFloat(t.toFixed(2));
        var value = t;

        // a dot in the center
        var x = 0;
        var y = 0;
        var z = 0;
        csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';

        // one or multiple dots moving around the center
        for (var dot = 0; dot < dotCount; dot++) {
            var tdot = t + 2*pi * dot / dotCount;
            //data.addRow([sin(tdot),  cos(tdot), sin(tdot), value, tgroup]);
            //data.addRow([sin(tdot), -cos(tdot), sin(tdot + tmax*1/2), value, tgroup]);

            var x = sin(tdot);
            var y = cos(tdot);
            var z = sin(tdot);
            csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';

            var x = sin(tdot);
            var y = -cos(tdot);
            var z = sin(tdot + tmax*1/2);
            csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';

        }
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "dot-color";
    document.getElementById("verticalRatio").value = "1.0";
    document.getElementById("animationInterval").value = "35";
    document.getElementById("animationAutoStart").checked = true;
    document.getElementById("showPerspective").checked = true;

  document.getElementById("xLabel").value = "x";
  document.getElementById("yLabel").value = "y";
  document.getElementById("zLabel").value = "z";
  document.getElementById("filterLabel").value = "time";
  document.getElementById("legendLabel").value = "color value";
}

function loadCsvColoredDotsExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "z", "distance"\n';

    // create some shortcuts to math functions
    var sqrt = Math.sqrt;
    var pow = Math.pow;
    var random = Math.random;

    // create the animation data
    var imax = 200;
    for (var i = 0; i < imax; i++) {
        var x = pow(random(), 2);
        var y = pow(random(), 2);
        var z = pow(random(), 2);
        var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));

        csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2)  + ', ' + round(dist, 2)+ '\n';
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "dot-color";
    document.getElementById("verticalRatio").value = "1.0";
    document.getElementById("showPerspective").checked = true;

  document.getElementById("xLabel").value = "x";
  document.getElementById("yLabel").value = "y";
  document.getElementById("zLabel").value = "value";
  document.getElementById("legendLabel").value = "distance";
}

function loadCsvSizedDotsExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "z", "range"\n';

    // create some shortcuts to math functions
    var sqrt = Math.sqrt;
    var pow = Math.pow;
    var random = Math.random;

    // create the animation data
    var imax = 200;
    for (var i = 0; i < imax; i++) {
        var x = pow(random(), 2);
        var y = pow(random(), 2);
        var z = pow(random(), 2);
        var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
        var range = sqrt(2) - dist;

        csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2)  + ', ' + round(range, 2)+ '\n';
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "dot-size";
    document.getElementById("verticalRatio").value = "1.0";
    document.getElementById("showPerspective").checked = true;

  document.getElementById("xLabel").value = "x";
  document.getElementById("yLabel").value = "y";
  document.getElementById("zLabel").value = "z";
  document.getElementById("legendLabel").value = "range";
}


function loadJsonExample() {
}


function loadJavascriptExample() {
}

function loadJavascriptFunctionExample() {
}

function loadGooglespreadsheetExample() {

}


function loadDatasourceExample() {
}



/**
 * Retrieve teh currently selected datatype
 * @return {string} datatype
 */
function getDataType() {
   return "csv";
}


/**
 * Retrieve the datatable from the entered contents of the csv text
 * @return {Google DataTable}
 */
function getDataCsv() {
    var csv = document.getElementById("csvTextarea").value;

    // parse the csv content
    var csvArray = csv2array(csv);

    var data = new vis.DataSet({});

    // read all data
    for (var row = 1; row < csvArray.length; row++) {
      if (csvArray[row].length == 4) {
        data.add({x:parseFloat(csvArray[row][0]),
          y:parseFloat(csvArray[row][1]),
          z:parseFloat(csvArray[row][2]),
          style:parseFloat(csvArray[row][3])});
      }
      else if (csvArray[row].length == 5) {
        data.add({x:parseFloat(csvArray[row][0]),
          y:parseFloat(csvArray[row][1]),
          z:parseFloat(csvArray[row][2]),
          style:parseFloat(csvArray[row][3]),
          filter:parseFloat(csvArray[row][4])});
      }
      else {
        data.add({x:parseFloat(csvArray[row][0]),
          y:parseFloat(csvArray[row][1]),
          z:parseFloat(csvArray[row][2]),
          style:parseFloat(csvArray[row][2])});
      }
    }

    return data;
}

/**
 * remove leading and trailing spaces
 */
function trim(text) {
    while (text.length && text.charAt(0) == ' ')
        text = text.substr(1);

    while (text.length && text.charAt(text.length-1) == ' ')
        text = text.substr(0, text.length-1);

    return text;
}

/**
 * Retrieve the datatable from the entered contents of the javascript text
 * @return {Google DataTable}
 */
function getDataJson() {
    var json = document.getElementById("jsonTextarea").value;
    var data = new google.visualization.DataTable(json);

    return data;
}


/**
 * Retrieve the datatable from the entered contents of the javascript text
 * @return {Google DataTable}
 */
function getDataJavascript() {
    var js = document.getElementById("javascriptTextarea").value;

    eval(js);

    return data;
}


/**
 * Retrieve the datatable from the entered contents of the datasource text
 * @return {Google DataTable}
 */
function getDataDatasource() {
}

/**
 * Retrieve a JSON object with all options
 */
function getOptions() {
    return {
        width:              document.getElementById("width").value,
        height:             document.getElementById("height").value,
        style:              document.getElementById("style").value,
        showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
        showGrid:          (document.getElementById("showGrid").checked != false),
        showPerspective:   (document.getElementById("showPerspective").checked != false),
        showShadow:        (document.getElementById("showShadow").checked != false),
        keepAspectRatio:   (document.getElementById("keepAspectRatio").checked != false),
        verticalRatio:      document.getElementById("verticalRatio").value,
        animationInterval:  document.getElementById("animationInterval").value,
        xLabel:             document.getElementById("xLabel").value,
        yLabel:             document.getElementById("yLabel").value,
        zLabel:             document.getElementById("zLabel").value,
        filterLabel:        document.getElementById("filterLabel").value,
        legendLabel:        document.getElementById("legendLabel").value,
        animationPreload:  (document.getElementById("animationPreload").checked != false),
        animationAutoStart:(document.getElementById("animationAutoStart").checked != false),

        xCenter:           Number(document.getElementById("xCenter").value) || undefined,
        yCenter:           Number(document.getElementById("yCenter").value) || undefined,

        xMin:              Number(document.getElementById("xMin").value) || undefined,
        xMax:              Number(document.getElementById("xMax").value) || undefined,
        xStep:             Number(document.getElementById("xStep").value) || undefined,
        yMin:              Number(document.getElementById("yMin").value) || undefined,
        yMax:              Number(document.getElementById("yMax").value) || undefined,
        yStep:             Number(document.getElementById("yStep").value) || undefined,
        zMin:              Number(document.getElementById("zMin").value) || undefined,
        zMax:              Number(document.getElementById("zMax").value) || undefined,
        zStep:             Number(document.getElementById("zStep").value) || undefined,

        valueMin:          Number(document.getElementById("valueMin").value) || undefined,
        valueMax:          Number(document.getElementById("valueMax").value) || undefined,

        xBarWidth:         Number(document.getElementById("xBarWidth").value) || undefined,
        yBarWidth:         Number(document.getElementById("yBarWidth").value) || undefined
    };
}

/**
 * Redraw the graph with the entered data and options
 */
function draw() {
    return drawCsv();
}

function drawCsv() {
    // Instantiate our graph object.
    var graph = new links.Graph3d(document.getElementById('graph'));

    // retrieve data and options
    var data = getDataCsv();
    var options = getOptions();

    // Draw our graph with the created data and options
    graph.draw(data, options);
}

function drawJson() {
    // Instantiate our graph object.
    var graph = new links.Graph3d(document.getElementById('graph'));

    // retrieve data and options
    var data = getDataJson();
    var options = getOptions();

    // Draw our graph with the created data and options
    graph.draw(data, options);
}

function drawJavascript() {
    // Instantiate our graph object.
    var graph = new links.Graph3d(document.getElementById('graph'));

    // retrieve data and options
    var data = getDataJavascript();
    var options = getOptions();

    // Draw our graph with the created data and options
    graph.draw(data, options);
}


function drawGooglespreadsheet() {
    // Instantiate our graph object.
    drawGraph = function(response) {
        document.getElementById("draw").disabled = "";

        if (response.isError()) {
            error = 'Error: ' + response.getMessage();
            document.getElementById('graph').innerHTML =
                "<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
        }

        // retrieve the data from the query response
        data = response.getDataTable();

        // specify options
        options = getOptions();

        // Instantiate our graph object.
        var graph = new links.Graph3d(document.getElementById('graph'));

        // Draw our graph with the created data and options
        graph.draw(data, options);
    }

    url = document.getElementById("googlespreadsheetText").value;
    document.getElementById("draw").disabled = "disabled";

    // send the request
    query && query.abort();
    query = new google.visualization.Query(url);
    query.send(drawGraph);
}


function drawDatasource() {
    // Instantiate our graph object.
    drawGraph = function(response) {
        document.getElementById("draw").disabled = "";

        if (response.isError()) {
            error = 'Error: ' + response.getMessage();
            document.getElementById('graph').innerHTML =
                "<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
        }

        // retrieve the data from the query response
        data = response.getDataTable();

        // specify options
        options = getOptions();

        // Instantiate our graph object.
        var graph = new links.Graph3d(document.getElementById('graph'));

        // Draw our graph with the created data and options
        graph.draw(data, options);
    };

    url = document.getElementById("datasourceText").value;
    document.getElementById("draw").disabled = "disabled";

    // if the entered url is a google spreadsheet url, replace the part
    // "/ccc?" with "/tq?" in order to retrieve a neat data query result
    if (url.indexOf("/ccc?")) {
        url.replace("/ccc?", "/tq?");
    }

    // send the request
    query && query.abort();
    query = new google.visualization.Query(url);
    query.send(drawGraph);
}