|
|
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>Data from datasource</title>
-
- <style>
- body {font: 10pt arial;}
- </style>
-
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript" src="../graph3d.js"></script>
-
- <script type="text/javascript">
- var DATASOURCE_URL = "datasource_csv_to_json.php";
- var REFRESH_INTERVAL = 1000; // milliseconds
-
- var data = null;
- var graph = null;
- var query = null;
-
- var draw = function() {
- // create an empty table to initialized the graph
- data = new google.visualization.DataTable();
- data.addColumn('number', 'x');
- data.addColumn('number', 'y');
- data.addColumn('number', 'z');
- data.addColumn('number', 'color');
-
- // specify options
- var options = {
- width: "600px",
- height: "600px",
- 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(data, options);
-
- refresh();
- };
-
- google.load("visualization", "1");
-
- // Set callback to run when API is loaded
- google.setOnLoadCallback(draw);
-
- // callback function, executed when the response data is received
- var redraw = function(response) {
- data = response.getDataTable();
- graph.redraw(data);
- document.getElementById("info").innerHTML = "Updated " + new Date();
- };
-
- var refresh = function() {
- // send the datasource request
- query && query.abort();
- query = new google.visualization.Query(DATASOURCE_URL);
- query.send(redraw);
-
- window.setTimeout(refresh, REFRESH_INTERVAL);
- }
- </script>
- </head>
-
- <body>
- <h1>Refresh data from external datasource</h1>
- <p>
- This example refreshes once per second the data from an external datasource.
- </p>
- <p style="font-style:italic;">
- Note: this example works only when running it on a PHP server,
- as the datasource is a php file.
- </p>
-
- <div id="graph"></div>
-
- <div id="info"></div>
- </body>
- </html>
|
