[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zpgrid/zpgrid/demo/ [ Home ]
File: realtime_update_json.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" The grid is initialized from JavaScript object. Company column is used as primary key. This gives ability easily to synchronize grid with server database in real time. Updated row is specified with value of primary key column instead of internal grid row id. Once the grid is initialized, it starts to poll server script realtime_update_json.php every second. Server script generates random prices for one or several companies at a time and returns them as string in JSON format. Data are formed on the server to pass them directly into splice method of the grid without convertion. String generated by the server is fetched and parsed into JavaScript array using Zapatec.Transport.fetchJsonObj function. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Grid Widget - Real Time Update With JSON Example</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
	<script type="text/javascript" src="../src/zpgrid.js"></script>
	<script type="text/javascript" src="demo.js"></script>

	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>
	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	
	<link href="../themes/layout.css" rel="stylesheet" type="text/css" />


	<!-- Custom style for grid -->
	<style type="text/css">
		.zpGridWinxp .zpGridTable .zpGridRow .zpGridCell4 {
			font: 9px tahoma,arial,sans-serif;
			color: #999;
		}
	</style>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Real Time Update With JSON Example</div>

This is a basic example showing a grid of the performance of the stock of
various companies updated in real time. Update is done on a row basis. See also
<a href="realtime_update_xml.html">example with XML source</a>.<br/>
<strong>Note: All prices and other data used in this demo are
fictitious.</strong>

		<div class='zpCalDemoText'>
		<ul>
		
		
<li>The grid is initialized from JavaScript object.</li>
<li><b>Company</b> column is used as primary key. This gives ability easily to
 synchronize grid with server database in real time. Updated row is specified
 with value of primary key column instead of internal grid row id.</li>
<li>Once the grid is initialized, it starts to poll server script
 <i>realtime_update_json.php</i> every second.</li>
<li>Server script generates random prices for one or several companies at a time
 and returns them as string in JSON format. Data are formed on the server to
 pass them directly into <i>splice</i> method of the grid without
 convertion.</li>
<li>String generated by the server is fetched and parsed into JavaScript array
 using <i>Zapatec.Transport.fetchJsonObj</i> function.</li>

		</ul>
		</div>



<div class="mainCol">
	<div id="gridContainer"></div>
</div>

<script type="text/javascript">

/*
 * Check if demo was loaded from server
 */
if (document.location.toString().indexOf('http') != 0) {
	alert('Since this example demonstrates interaction between server and \
javascript application, it must be loaded from server. This example does \
not work if opened from local hard drive.');
} else {

	/*
	 * Updates grid with data received from server.
	 */
	function updateGrid(aUpdates) {

		// Update grid
		oGrid.splice(aUpdates);

		// Schedule next update in 1 second
		setTimeout(getUpdates, 1000);

	}

	/*
	 * Receives updates from server.
	 */
	function getUpdates() {

		// Get array with updates from server
		Zapatec.Transport.fetchJsonObj({

			// Get data from realtime_update_json.php script preventing caching
			url: 'realtime_update_json.php?' + Math.random(),

			// Pass received array to updateGrid function
			onLoad: updateGrid

		});

	}

	/*
	 * Conversion method for custom "float" data type.
	 */
	function convertFloat(objCell) {
		objCell = this.convertFloat(objCell);
		if (objCell.c < 0) {
			objCell.style = 'color:#c00';
		} else if (objCell.c > 0) {
			objCell.style = 'color:#090';
		}
		return objCell;
	}

	/*
	 * Setup custom "float" type.
	 */
	Zapatec.Grid.createType(convertFloat, 'myFloat', 'zpGridTypeFloat');

	/*
	 * Initial grid source
	 */
	var oSource = {

		// Grid structure
		fields: [
			{title: 'Company', dataType: 'string'},
			{title: 'Price', dataType: 'float'},
			{title: 'Change', dataType: 'myFloat'},
			{title: '%Change', dataType: 'myFloat'},
			{title: 'Last Update', dataType: 'timestamp'}
		],

		// Use first column as primary key
		primaryKey: 0,

		// Initial data
		rows: [
			{cells: [
				{v: 'Alcoa Inc'}, {v: 28.41}, {v: 0}, {v: 0}, {v: 0}
			]},
			{cells: [
				{v: 'AT&T Inc.'}, {v: 32.65}, {v: 0}, {v: 0}, {v: 0}
			]},
			{cells: [
				{v: 'General Electric Company'}, {v: 35.59}, {v: 0}, {v: 0}, {v: 0}
			]},
			{cells: [
				{v: 'General Motors Corporation'}, {v: 35.31}, {v: 0}, {v: 0}, {v: 0}
			]},
			{cells: [
				{v: 'Intel Corporation'}, {v: 21.95}, {v: 0}, {v: 0}, {v: 0}
			]},
			{cells: [
				{v: 'Microsoft Corporation'}, {v: 29.22}, {v: 0}, {v: 0}, {v: 0}
			]},
			{cells: [
				{v: 'Pfizer Inc'}, {v: 26.25}, {v: 0}, {v: 0}, {v: 0}
			]},
			{cells: [
				{v: 'The Home Depot, Inc.'}, {v: 37.76}, {v: 0}, {v: 0}, {v: 0}
			]},
			{cells: [
				{v: 'Verizon Communications'}, {v: 36.25}, {v: 0}, {v: 0}, {v: 0}
			]},
			{cells: [
				{v: 'Walt Disney Company'}, {v: 32.53}, {v: 0}, {v: 0}, {v: 0}
			]}
		]

	};

	/*
	 * Initialize grid
	 */
	var oGrid = new Zapatec.Grid({

		// Use object as data source
		source: oSource,
		sourceType: 'json',

		// Use winxp theme
		theme: 'winxp',

		// Put grid into element with id gridContainer
		container: 'gridContainer',

		// Initially sort ascending by first column
		sortColumn: 0,

		// Start to get updates once the Grid is initialized
		eventListeners: {
			gridInitialized: getUpdates
		}

	});

}

</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>