[ 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: countries.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="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 - Zapatec AJAX Grid Widget - World Info</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" />


	<script type="text/javascript" src="../src/zpgrid-editable.js"></script>
	<script type="text/javascript" src="../../zpslider/src/slider.js"></script>
	<script type="text/javascript" src="chart.js"></script>
	<!-- Custon style for "Total:" and "Average:" labels -->
	<style type="text/css">
		.zpGridRowTotals .zpGridCellTotals0 {
			font-weight: bold !important;
		}
	</style>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Zapatec AJAX Grid Widget - World Info</div>


		<div class="leftCol">
		<h3>Controls</h3>
		<form onsubmit="return filter(this)" style="width:100%">
			<div>
				<fieldset>
					<p>Filter Continets</p>
					<div align="left" style="margin-left: 5px; margin-bottom: 5px" id="filterContinets"></div>
				</fieldset>
			</div>
			<div>
				<fieldset>
					<p>Life Expectency</p>
					<div align="center" id="lifeExpectencyScale"></div>
					<div style="margin-bottom: 5px" align="center" id="lifeExpectencyRange"></div>
				</fieldset>
			</div>
			<div>
				<fieldset>
					<div style="margin: 5px">Find Value</div>
					<div style="margin: 5px"><input type="checkbox" name="isRegExp"/> Use regular expression</div>
					<div style="margin: 5px">Search: <input type="text" name="textFilter" size="6"/></div>
					<div style="margin: 5px"><input type="button" name="buttonText" value=" Go " onclick="filter(this.form)"/></div>
				</fieldset>
			</div>
			<div>
				<fieldset>
					<div style="margin: 5px">Reset all filters</div>
					<div style="margin: 5px"><input type="button" value="Reset" onclick="resetControls(this.form)"/></div>
				</fieldset>
			</div>
		</form>
	</div>
	<div class="mainCol">
		<span>An advanced example demonstrating many of the grid features.
		 This example shows how to integrate a chart into a grid.</span>
		<div id="chart" style="height: 500px; margin: 5px 0px"></div>
		<div id="gridHeaderContainer"></div>
		<div id="gridContainer" style="width: 520px; overflow: scroll"></div>
		<div id="gridPaginationContainer"></div>
	</div>
	<script type="text/javascript">

		/*
		 * Initialize grid
		 */
		var objGrid = new Zapatec.EditableGrid({

			// Use countries.txt file as grid data source
			source: 'countries.txt',
			sourceType: 'json/url',

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

			// Put grid header into element with id "gridHeaderContainer"
			headerContainer: 'gridHeaderContainer',

			// Put grid pagination into element with id "gridPaginationContainer"
			paginationContainer: 'gridPaginationContainer',

			// Use "winxp" theme
			theme: "winxp",

			// Display 20 rows per page
			rowsPerPage: 20,

			// Fix "Country" column
			fixedLeft: 1,

			// Initially sort by Country
			sortColumn: 0,

			// Display filter out forms
			filterOut: [
				{
					// Use "Continent" column
					column: 7,
					// Put checkboxes into element with id "filterContinets"
					container: 'filterContinets'
				}
			],

			// Totals definition
			totals: [
				{
					column: [1, 2, 3, 4, 5, 6],
					callback: Zapatec.Grid.sum,
					label: 'Total:',
					labelColumn: 0
				},
				{
					column: [1, 2, 3, 4, 5, 6],
					callback: Zapatec.Grid.avg,
					label: 'Average:',
					labelColumn: 0
				}
			],

			// Event listeners
			eventListeners: {
				'gridInitialized': onGridInitCountries,
				// Integrate chart
				'gridRefreshed': onGridRefreshed,
				'gridEdited': refreshChart
			}

		});

		/*
		 * Draws chart.
		 */
		function drawChart(strXML) {
			var arrObject = [];
			arrObject.push('<EMBED src="../fusioncharts/FPS_1_Pie.swf" \
			 FlashVars="&dataXML=');
			arrObject.push(strXML);
			arrObject.push('" quality=high WIDTH="520" HEIGHT="500" \
			 NAME="FPS_1b_Pie" ALIGN="" TYPE="application/x-shockwave-flash" \
			 PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>');
			document.getElementById('chart').innerHTML = arrObject.join('');
		}

		/*
		 * Keeps number of rows displayed in the grid.
		 */
		var iRecordsDisplayed = 0;

		/*
		 * Refreshes chart togeter with grid.
		 */
		function onGridRefreshed() {
			var objGrid = this;
			if (iRecordsDisplayed == objGrid.recordsDisplayed()) {
				// No need to refresh chart
				return;
			}
			iRecordsDisplayed = objGrid.recordsDisplayed();
			// Refresh chart
			refreshChart.call(objGrid);
		}

		/*
		 * Refreshes chart togeter with grid.
		 */
		function refreshChart() {
			var objGrid = this;
			// Calculate GDP for continents
			var iChargesAf = 0;
			var iChargesAn = 0;
			var iChargesAs = 0;
			var iChargesEu = 0;
			var iChargesNA = 0;
			var iChargesOc = 0;
			var iChargesSA = 0;
			var arrFilteredRows = objGrid.getFilteredRows();
			for (var iRow = 0; iRow < arrFilteredRows.length; iRow++) {
				var objRow = arrFilteredRows[iRow];
				var strRatePeriod =
				 objGrid.getCellValueString(objGrid.getCellByRow(objRow, 7));
				var iCharges = objGrid.getCellValueString(
				 objGrid.getCellByRow(objRow, 3)).replace(/[$,]/g, '') / 1000000;
				switch (strRatePeriod) {
					case 'Africa':
						iChargesAf += iCharges;
						break;
					case 'Antarctica':
						iChargesAn += iCharges;
						break;
					case 'Asia':
						iChargesAs += iCharges;
						break;
					case 'Europe':
						iChargesEu += iCharges;
						break;
					case 'North America':
						iChargesNA += iCharges;
						break;
					case 'Oceania':
						iChargesOc += iCharges;
						break;
					case 'South America':
						iChargesSA += iCharges;
						break;
				}
			}
			// Redraw chart if there are any data
			if (iChargesAf || iChargesAn || iChargesAs || iChargesEu || iChargesNA ||
			 iChargesOc || iChargesSA) {
				// Form XML source XML
				var arrXml = [];
				// Open tag
				arrXml.push("<graph initialXGrow='0' wallThickness='40' cameraY='40' \
				 baseFontColor='FFFFFF' outCnvBaseFontSize='13' showLegend='1' \
				 legendMax='5' legendHorPadding='40' showValues='0' showNames='1' \
				 showPercentageValues='0' caption='          GDP per Continent' \
				 captionFontSize='22' playMode='' \
				 subcaption='In this chart all numbers are divided by 1,000,000' \
				 navRefresh='1' navPrint='1' chartLeftMargin='0' chartRightMargin='0' \
				 chartTopMargin='0' chartBottomMargin='0' \
				 legendPercentageHDText='%25 of Total GDP' \
				 legendNameHDText='Continent' legendValuesHDText='GDP' \
				 showLegendPosition='0' showLegendColumn='0' navJog='1' radius='150' \
				 numberPrefix='' BrightnessLine='10' BrightnessFill='-10' \
				 formatNumberScale='0' decimalPrecision='0' \
				 percentageDecimalPrecision='2'>");
				// Antarctica
				arrXml.push("<set name='Antarctica' value='");
				arrXml.push(iChargesAn);
				arrXml.push("' alpha='75' color='FEDA8D' />");
				// Asia
				arrXml.push("<set name='Asia' value='");
				arrXml.push(iChargesAs);
				arrXml.push("' alpha='75' color='AFD8F8' />");
				// Oceania
				arrXml.push("<set name='Oceania' value='");
				arrXml.push(iChargesOc);
				arrXml.push("' alpha='75' color='6DDCDC' />");
				// North America
				arrXml.push("<set name='North America' value='");
				arrXml.push(iChargesNA);
				arrXml.push("' isSliced='1' alpha='75' color='8BBA00' />");
				// South America
				arrXml.push("<set name='South America' value='");
				arrXml.push(iChargesSA);
				arrXml.push("' alpha='75' color='F6BD0F' />");
				// Europe
				arrXml.push("<set name='Europe' value='");
				arrXml.push(iChargesEu);
				arrXml.push("' alpha='75' color='F984A1' />");
				// Africa
				arrXml.push("<set name='Africa' value='");
				arrXml.push(iChargesAf);
				arrXml.push("' alpha='75' color='A66EDD' />");
				// Close tag
				arrXml.push("</graph>");
				// Update chart with new source
				drawChart(arrXml.join(''));
			}
		}

		/*
		 * Check if Flash 6 or higher is available and SWF file exists
		 */
		checkFlash('FPS_1_Pie.swf');
		objGrid.fireEvent('gridEdited');
		/*
		 * Passed to grid through eventListeners config option as 'gridInitialized'
		 * event listener and called when grid is initialized. Grid object can be
		 * accessed through "this" because function is called in scope of grid
		 * object.
		 */
		function onGridInitCountries() {
			var objGrid = this;
			// Get range of life expectency
			var objRange = this.getColumnRange({column: 5});
			if (objRange) {
				document.getElementById('lifeExpectencyRange').innerHTML = 
					objRange.min + ' - ' + Math.ceil(objRange.max);
			}
			// Draw slider
			var objSlider = new Zapatec.Slider({
				div: 'lifeExpectencyScale', 
				length: Math.ceil(objRange.max) - objRange.min,
				dual: true, 
				orientation: 'H',
				step: 2,
				range : [objRange.min, Math.ceil(objRange.max)],
				newPosition: function (iMinValue, iMaxValue) {
					iMinValue = Math.round(iMinValue);
					iMaxValue = Math.round(iMaxValue);
					// Display scale
					document.getElementById('lifeExpectencyRange').innerHTML =
					iMinValue + ' - ' + iMaxValue;
					// Limit range of life expectency
					objGrid.limitRange({
						column: 5,
						min: iMinValue,
						max: iMaxValue
					});
				}
			});
		}

	</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>