Category Archives: JavaScript

Multiple Value Axes in amCharts 4

LEUNG 有 14 則迴響

<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

LEUNG 有 16 則迴響

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);
?>

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 )

Category Archives: JavaScript

Multiple Value Axes in amCharts 4

upload file in JQuery

addLayer in OpenLayer

OpenLayer – Map

OpenLayer