Category Archives: JavaScript

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).

openlayer

Reference : https://openlayers.org/
Reference : https://www.openstreetmap.org/ ( Latitude and longitude )

setInterval or setTimeout

LEUNG 沒有迴響

setInterval

<!DOCTYPE html>
<html>
	<head>
		<title>Jquery setinterval stop after sometime</title>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type='text/javascript'>
			$.ajaxSetup({ cache: false })
		</script>
	</head>
	<body>
		<input type="button" value="Start count!" onclick="startTimer()"> 
		<input type="button" value="Stop count!" onclick="stopTimer()"> 
		<br/>
		<div id="countdown_text">Placeholding text</div>
		<script type="text/javascript">
			var timer = null, 
			value = 0;

			function startTimer(){
				if (timer !== null) return;
				timer = setInterval(function () {
					document.getElementById('countdown_text').innerHTML = ++value;
				}, 1000); 
			}

			function stopTimer(){
				clearInterval(timer);
				timer = null
			}		
		</script>
	</body>
</html>

setTimeout

<!DOCTYPE html>
<html>
<body>
	<title>Jquery setinterval stop after sometime</title>
		<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type='text/javascript'>
			$.ajaxSetup({ cache: false })
		</script>
		<button onclick="startCount()">start</button>
		<button onclick="stopCount()">stop</button>
		<div id="countdown_text">Placeholding text</div>

		<script>
			var c = 0;
			var t;
			var timer_is_on = 0;

			function timedCount() {
				document.getElementById('countdown_text').innerHTML = c;
				c = c + 1;
				t = setTimeout(
						function(){ 
							timedCount() 
						}, 1000
					);
			}

			function startCount() {
				if (!timer_is_on) {
					timer_is_on = 1;
					timedCount();
				}
			}

			function stopCount() {
				clearTimeout(t);
				timer_is_on = 0;
			}
		</script>
</body>
</html>

Remark :
setTimeout (無限loop)
setTimeout (僅行一次)

ECharts

LEUNG 沒有迴響

echarts

ECharts，一個使用JavaScript 實現的開源可視化庫，可以流暢的運行在PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

豐富的可視化類型
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關係數據可視化的關係圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用於BI 的漏斗圖，儀錶盤，並且支持圖與圖之間的混搭。

Reference : http://echarts.baidu.com/

Example : http://echarts.baidu.com/examples/index.html#chart-type-line

Category Archives: JavaScript

addLayer in OpenLayer

OpenLayer – Map

OpenLayer

setInterval or setTimeout

ECharts