|
|
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>Datastream example</title>
-
- <style>
- body {
- width: 600px;
- font-size: 14px;
- }
- </style>
-
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript" src="../graph3d.js"></script>
- <script type="text/javascript" src="ajax.js"></script>
-
- <script>
- var url = "datastream_csv.php";
-
- google.load("visualization", "1");
-
- // Set callback to run when API is loaded
- google.setOnLoadCallback(load);
-
- var loaded = false;
- var ajax = new Ajax();
- var dataBuffer = "";
-
- var indexTable = undefined;
- var dataTable = undefined;
- var graph = undefined;
- var options = undefined;
-
- function load() {
- // initialize data table
- indexTable = new Array();
- dataTable = new google.visualization.DataTable();
- dataTable.addColumn('number', 'x');
- dataTable.addColumn('number', 'y');
- dataTable.addColumn('number', 'z');
- dataTable.addColumn('number', 'color');
-
- // specify options
- options = {
- width: "500px",
- height: "500px",
- style: "dot-color",
- showPerspective: true,
- showGrid: true,
- showShadow: false,
- keepAspectRatio: true,
- verticalRatio: 0.5,
- cameraPosition: {
- distance: 1.4,
- horizontal: 0.0,
- vertical: 1.0
- }
- };
-
- // Instantiate our graph object.
- graph = new links.Graph3d(document.getElementById('graph'));
-
- // Draw our graph with the created data and options
- graph.draw(dataTable, options);
-
- loaded = true;
- }
-
- /**
- * Update the data in the datatable
- */
- function setData(id, x, y, z, color) {
- if (indexTable[id] != undefined) {
- // update data
- var row = indexTable[id];
- dataTable.setValue(row, 0, x);
- dataTable.setValue(row, 1, y);
- dataTable.setValue(row, 2, z);
- dataTable.setValue(row, 3, color);
- }
- else {
- // add data
- var row = dataTable.addRow([x, y,z, color]);
- indexTable[id] = row;
- }
- }
-
- /**
- * Parse data in csv format.
- * The data is supposed to be in CSV format and has five numeric columns:
- * id, x, y,z, color
- * Rows are separated by a line and, and fields by a comma. spaces are
- * neglected.
- * @param {string} data
- * @param {string} delimeter Optional delimeter. A comma "," by default
- */
- function parseData(data, delimeter) {
- if (delimeter == undefined) {
- delimeter = ",";
- }
-
- dataBuffer += data;
-
- var id = undefined;
- var x = undefined;
- var y = undefined;
- var z = undefined;
- var color = undefined;
-
- var rows = dataBuffer.split("\n");
- for (var i = 0; i < rows.length; i++) {
- var row = rows[i].split(delimeter);
-
- if (row.length == 5) {
- var id = parseInt(row[0]);
- var x = parseFloat(row[1]);
- var y = parseFloat(row[2]);
- var z = parseFloat(row[3]);
- var color = parseFloat(row[4]);
-
- setData(id, x, y, z, color);
- }
- else {
- // corrupt data or empty line
- }
- }
-
- // empty the buffer up to the last line
- // TODO: handle the buffer smarter, makes not much sense right now.
- var lastReturn = dataBuffer.lastIndexOf("\n");
- if (lastReturn >= 0)
- dataBuffer = dataBuffer.substring(lastReturn);
- else
- dataBuffer = "";
- }
-
- function start() {
- if(!loaded) {
- alert("Still loading Google API. One moment please...");
- return;
- }
-
- var callback = function (newData) {
- parseData(newData);
- graph.redraw(dataTable);
- }
-
- ajax.abort();
- ajax.requestLongPoll("GET", url, callback);
- }
-
- function stop () {
- ajax.abort();
- }
-
- </script>
-
- </head>
- <body>
- <h1>Datastream example</h1>
-
- <p>
- This example demonstrates reading a data stream, via a long poll.
- </p>
-
- <p>
- Note that some browsers buffer data from a stream before sending it to the
- screen. In that case "nothing" seems to happens until the buffer limit is
- reached.
- </p>
-
- <p>
- When the datasource is located on an external server,
- the datasource must enable cross domain scripting
- (Access-Control-Allow-Origin must be set on the server side).
- </p>
-
- <p>
- <input type="button" id="start" value="Start" onclick="start();">
- <input type="button" is="stop" value="Stop" onclick="stop();">
- </p>
-
- <div id="graph"></div>
- </body>
- </html>
|
