Category Archives: JavaScript

Multiple Value Axes in amCharts 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./amcharts4/core.js"></script>
<script src="./amcharts4/charts.js"></script>
<script src="./amcharts4/maps.js"></script>
<script src="./amcharts4/themes/animated.js"></script>
<div style="width: 100%;max-height: 500px;height: 100vh;" id="chartdiv"></div>
<script>
	am4core.ready(function() {
		// Themes begin
		am4core.useTheme(am4themes_animated);
		// Themes end

		// Create chart instance
		var chart = am4core.create("chartdiv", am4charts.XYChart);

		// Increase contrast by taking evey second color
		chart.colors.step = 2;

		// Add data
		chart.data = generateChartData();

		// Create axes
		var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
		dateAxis.renderer.minGridDistance = 50;
		dateAxis.renderer.labels.template.location = 0.0001;
		dateAxis.baseInterval = {
			 "timeUnit": "second",
			 "count": 1
		}

		// Create series
		function createAxisAndSeries(field, name, opposite, bullet, numberFormat) {
		  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
		  if(chart.yAxes.indexOf(valueAxis) != 0){
			valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
		  }
		  
		  var series = chart.series.push(new am4charts.LineSeries());
		  series.dataFields.valueY = field;
		  series.dataFields.dateX = "date";
		  series.strokeWidth = 2;

		  series.yAxis = valueAxis;
		  series.name = name;

		  if(field == "T0"){
			series.tooltipText = " {date.formatDate('YYYY-MM-dd hh:mm')} \n {name}: [red bold]{valueY}°C[/]";
			series.stroke = am4core.color("red");
			
		  }else if(field == "RH"){
			series.tooltipText = " {date.formatDate('YYYY-MM-dd hh:mm')} \n {name}: [blue bold]{valueY}%[/]"; 
			series.stroke = am4core.color("blue");
		  }

		  series.tensionX = 0.8;
		  series.showOnInit = true;
		
		  var interfaceColors = new am4core.InterfaceColorSet();
		  
		  switch(bullet) {
			case "RH":
			 var bullet = series.bullets.push(new am4charts.CircleBullet());
				bullet.circle.strokeWidth = 2;
				bullet.circle.radius = 4;
				bullet.circle.fill = am4core.color("#fff");
				bullet.circle.stroke = am4core.color("blue");
				var bullethover1 = bullet.states.create("hover");
				bullethover1.properties.scale = 1.3;	
				valueAxis.title.text = "相對濕度 (%)";
				break;
			case "T0":
				// Make bullets grow on hover
				var bullet = series.bullets.push(new am4charts.CircleBullet());
				bullet.circle.strokeWidth = 2;
				bullet.circle.radius = 4;
				bullet.circle.fill = am4core.color("#fff");
				bullet.circle.stroke = am4core.color("red");
				var bullethover1 = bullet.states.create("hover");
				bullethover1.properties.scale = 1.3;
				valueAxis.title.text = "氣溫 (°C)";
	
				break;
			default:
				var bullet = series.bullets.push(new am4charts.CircleBullet());
				bullet.circle.stroke = interfaceColors.getFor("background");
				bullet.circle.strokeWidth = 2;
				break;
			} 
			valueAxis.renderer.line.strokeOpacity = 1;
			valueAxis.renderer.line.strokeWidth = 2;
			valueAxis.renderer.line.stroke = series.stroke;
			valueAxis.renderer.labels.template.fill = series.stroke;
			valueAxis.renderer.opposite = opposite;
			valueAxis.numberFormatter = new am4core.NumberFormatter();
			valueAxis.numberFormatter.numberFormat = numberFormat; 
		}
		createAxisAndSeries("T0", "氣溫", true, "T0", "#°C");
		createAxisAndSeries("RH", "相對濕度", false, "RH", "#'%'");
	
		// Add legend
		chart.legend = new am4charts.Legend();

		// Add cursor
		chart.cursor = new am4charts.XYCursor();
		chart.dateFormatter.inputDateFormat = "yyyy-MM-dd H:m";
		
		chart.scrollbarX = new am4core.Scrollbar();
		chart.scrollbarX.parent = chart.bottomAxesContainer;

		// Enable export
		chart.exporting.menu = new am4core.ExportMenu();
    chart.exporting.menu.items[0].icon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIi";
		// chart.exporting.menu.container = document.getElementById("tools");

		// generate some random data, quite different range
		function generateChartData() {
			var chartData = [];
			chartData.push({date: "2020-03-04 00:00",RH: "78.7",T0: "20",});
			chartData.push({date: "2020-03-04 00:01",RH: "78.8",T0: "20",});
			chartData.push({date: "2020-03-04 00:02",RH: "79.1",T0: "20",});
			chartData.push({date: "2020-03-04 00:03",RH: "79.1",T0: "20",});
			chartData.push({date: "2020-03-04 00:04",RH: "78.9",T0: "20",}); 
			return chartData;
		}
	}); // end am4core.ready()

	$(document).ready(function(){
		$("g[aria-labelledby='id-66-title']").hide();
	})
</script>

Ouput:
multiple-value-axes-in-amcharts-4

upload file in JQuery

function imageManager(){
	var fd = new FormData(); 
	var files = $('#file')[0].files[0]; 
	fd.append('file', files); 

	$.ajax({
	  type:"POST",
	  url:"http://127.0.0.1/ajax/do-item.ajax.php",
	  data: fd, 
		contentType: false, 
		processData: false, 
	  beforeSend:function(){
		$("#ajax-file").html("Loading...");
	  },
	  success:function(data){
		$("#ajax-file").html(decodeURI(data));
	  }
	});
}

<?php
   var_dump($_FILES);
?>

addLayer in OpenLayer

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
	<style>
      .map {
        height: 100%;
        width: 100%;
		
      }
      .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
      }
      .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }
      .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
      }
      .ol-popup:before {
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
      }
      .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 2px;
        right: 8px;
      }
      .ol-popup-closer:after {
        content: "✖";
      }
    </style>
  <title>OpenLayers 3 example</title>
  </head>
  <body>
    <div id="map" class="map">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content" style="width:300px; height:120px;"></div>
        </div>
    </div> 
	<script type="text/javascript">
		/**
		* Elements that make up the popup.
		*/
		var container = document.getElementById('popup');
		var content = document.getElementById('popup-content');
		var closer = document.getElementById('popup-closer');

		/**
		* Add a click handler to hide the popup.
		* @return {boolean} Don't follow the href.
		*/
		closer.onclick = function() {
			overlay.setPosition(undefined);
			closer.blur();
			return false;
		};

		/**
		* Create an overlay to anchor the popup to the map.
		*/
		var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
			element: container,
			autoPan: true,
			autoPanAnimation: {
				duration: 250 // 當彈出超出地圖邊界時,為了彈出全部可見,地圖移動的速度。單位為毫秒(ms)
			}
		}));
	
		map = new ol.Map({
			target: 'map',
			layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM()
					})
				],
			view: new ol.View({
			  center: ol.proj.transform([114.17232, 22.29958], 'EPSG:4326', 'EPSG:3857'),
			  zoom: 15
			})
		});
		
		var vectorLayer1 = new ol.layer.Vector({
			source:new ol.source.Vector({
				features: [new ol.Feature({
					geometry: new ol.geom.Point(ol.proj.transform([parseFloat(114.17232), parseFloat(22.29958)], 'EPSG:4326', 'EPSG:3857')),
				})]
			}),
			style: new ol.style.Style({
				image: new ol.style.Icon({
					anchor: [0.5, 0.5],
					anchorXUnits: "fraction",
					anchorYUnits: "fraction",
					src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
				})
			})
		});
		map.addLayer(vectorLayer1); 
		
		var vectorLayer2 = new ol.layer.Vector({
			source:new ol.source.Vector({
				features: [new ol.Feature({
					geometry: new ol.geom.Point(ol.proj.transform([parseFloat(114.1704), parseFloat(22.3012)], 'EPSG:4326', 'EPSG:3857')),
				})]
			}),
			style: new ol.style.Style({
				image: new ol.style.Icon({
					anchor: [0.5, 0.5],
					anchorXUnits: "fraction",
					anchorYUnits: "fraction",
					src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
				})
			})
		});
		map.addLayer(vectorLayer2); 

		/**
		* Add a click handler to the map to render the popup.
		*/
		map.on('click', function(e) {
			var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
				return feature;
			});
			map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
			    if (layer === vectorLayer1) {
					var coordinate = e.coordinate;
					var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
					coordinate, 'EPSG:3857', 'EPSG:4326'));
					content.innerHTML = '<p>A:</p><code>' + hdms + '</code>';
					overlay.setPosition(coordinate);
					map.addOverlay(overlay);
				}else if (layer === vectorLayer2) {
					var coordinate = e.coordinate;
					var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
					coordinate, 'EPSG:3857', 'EPSG:4326'));
					content.innerHTML = '<p>B:</p><code>' + hdms + '</code>';
					overlay.setPosition(coordinate);
					map.addOverlay(overlay);
				}
			});
		});
	</script>
  </body>
</html>

openlayer-map

OpenLayer – Map

<!doctype html>
<html lang="en">
  <head>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <style>
      .map {
        height: 100%;
        width: 100%;
      }
    </style>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
		center: ol.proj.transform([114.17232, 22.29958], 'EPSG:4326', 'EPSG:3857'),
		zoom: 16
        })
      });
    </script>
  </body>
</html>

openlayer-map

OpenLayer

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 )