Migration from highcharts to chartjs

WP-GPX-Maps.js

@@ -2,9 +2,9 @@
 Plugin Name: WP-GPX-Maps
 Plugin URI: http://www.devfarm.it/
 Description: Draws a gpx track with altitude graph
-Version: 1.3.15
+Version: 1.5.00
 Author: Bastianon Massimo
-Author URI: http://www.pedemontanadelgrappa.it/
+Author URI: http://www.devfarm.it/
 */
 
 (function ( $ ) {
@@ -126,6 +126,8 @@ Author URI: http://www.pedemontanadelgrappa.it/
 		
 		var hasThunderforestApiKey = (ThunderforestApiKey + '').length > 0;
 		
+		var _formats=[];
+
 		// Unit of measure settings
 		var l_s;
 		var l_x;
@@ -638,20 +640,32 @@ Author URI: http://www.pedemontanadelgrappa.it/
 					{
 						marker.setPosition(event.latLng);	
 						marker.setTitle(lng.currentPosition);
-						if (hchart)
+						if (myChart)
 						{
-							var tooltip = hchart.tooltip;
 							var l1 = event.latLng.lat();
 							var l2 = event.latLng.lng();
 							var ci = getClosestIndex(mapData,l1,l2);
-							var items = [];
+							var activeElements = [];
-							var seriesLen = hchart.series.length;
+							var seriesLen = myChart.data.datasets.length;												
 							for(var i=0; i<seriesLen;i++)
 							{
-								items.push(hchart.series[i].data[ci]);
+								activeElements.push(myChart.chart.getDatasetMeta(i).data[ci]);
 							}
-							if (items.length > 0)
+							if (activeElements.length > 0)
-								tooltip.refresh(items);
+							{
+								myChart.options.customLine.x = activeElements[0]._model.x;
+								if (isNaN(myChart.tooltip._eventPosition))
+								{
+									myChart.tooltip._eventPosition = {
+											x: activeElements[0]._model.x, 
+											y: activeElements[0]._model.y
+										};
+								}								
+								myChart.tooltip._active = activeElements;
+								myChart.tooltip.update(true);
+								myChart.draw();
+							}
+
 						}
 					}
 				});		
@@ -707,14 +721,13 @@ Author URI: http://www.pedemontanadelgrappa.it/
 
 		});
 		
-		var graphh = jQuery('#hchart_' + params.targetId).css("height");
+		var graphh = jQuery('#myChart_' + params.targetId).css("height");
 		
 		if (graphDist != '' && (graphEle != '' || graphSpeed != '' || graphHr != '' || graphAtemp != '' || graphCad != '') && graphh != "0px")
 		{
 
 			var valLen = graphDist.length;
 		
-			var l_y_arr = [];
 		
 			if (unit=="1")
 			{
@@ -761,8 +774,94 @@ Author URI: http://www.pedemontanadelgrappa.it/
 				
 			// define the options
 			var hoptions = {
-				chart: {
+				type: 'line',
-					renderTo: 'hchart_' + params.targetId,
+				data: {
+					datasets: [],
+				},
+				options: {
+					customLine: {
+						color: 'gray'
+					},
+					scales: {
+						yAxes: [],
+			            xAxes: [{
+			                type: 'linear',
+							ticks: {
+								suggestedMin: 0,
+								max: graphDist[graphDist.length-1],
+								// Include a dollar sign in the ticks
+								callback: function(value, index, values) {
+									var fpt = _formats[0];
+									return Math.round(value, fpt.dec) + fpt.suf;
+								}
+							}
+			            }]
+					},
+					tooltips: {
+						position: 'nearest',
+						mode: 'index',
+						intersect: true,
+						callbacks : {
+							title: function(tooltipItems, data) {
+								//Return value for title
+								var fpt = _formats[0];
+								return Math.round(tooltipItems[0].xLabel, fpt.dec) + fpt.suf;;
+							},
+							label : function(tooltipItem, data) {
+								// format list values
+								var label = data.datasets[tooltipItem.datasetIndex].label || '';
+								var fpt = _formats[tooltipItem.datasetIndex];
+								if (label) {
+									label += ': ';
+								}
+								label += Math.round(tooltipItem.yLabel, fpt.dec) + fpt.suf;
+								return label;
+							},
+							footer : function(tooltipItem){
+								// move the point in map
+								var i = tooltipItem[0].index;
+								if (marker)
+								{
+									var point = getItemFromArray(mapData,i)
+									if (point)
+									{
+										marker.setPosition(new google.maps.LatLng(point[0],point[1]));
+									}
+									marker.setTitle(lng.currentPosition);								
+								}
+							}						
+						}
+					},
+				},
+				
+				plugins: [{
+					beforeEvent: function(chart, e) {
+						if ((e.type === 'mousemove')
+						&& (e.x >= e.chart.chartArea.left)
+						&& (e.x <= e.chart.chartArea.right)
+						) {
+							chart.options.customLine.x = e.x;
+						}
+					},
+					afterDraw: function(chart, easing) {
+						var ctx = chart.chart.ctx;
+						var chartArea = chart.chartArea;
+						var x = chart.options.customLine.x;
+						if (!isNaN(x)) {
+							ctx.save();
+							ctx.strokeStyle = chart.options.customLine.color;
+							ctx.moveTo(chart.options.customLine.x, chartArea.bottom);
+							ctx.lineTo(chart.options.customLine.x, chartArea.top);
+							ctx.stroke();
+							ctx.restore();
+						}
+					}
+				}],
+				
+				labels : graphDist,
+				
+				oldchart: {
+					renderTo: 'myChart_' + params.targetId,
 					type: 'area',
 					events: {
 						selection: function(event) {
@@ -816,107 +915,23 @@ Author URI: http://www.pedemontanadelgrappa.it/
 					},
 					zoomType: 'x'
 				},
-				title: {
-					text: null
-				},
-				xAxis: {
-					type: 'integer',
-					//gridLineWidth: 1,
-					//tickInterval: 1000,
-					labels: {
-						formatter: function() {
-							return Highcharts.numberFormat(this.value, l_x.dec,decPoint,thousandsSep) + l_x.suf;
-						}
-					}
-				},
-				yAxis: [],
-				legend: {
-					align: 'center',
-					verticalAlign: 'top',
-					y: -5,
-					floating: true,
-					borderWidth: 0
-				},
-				tooltip: {
-					shared: true,
-					crosshairs: true,
-					formatter: function() {
-						if (marker)
-						{
-							var hchart_xserie = hchart.xAxis[0].series[0].data;
-							for(var i=0; i<hchart_xserie.length;i++){
-								var item = hchart_xserie[i];
-								if(item.x == this.x)
-								{
-									var point = getItemFromArray(mapData,i)
-									if (point)
-									{
-										marker.setPosition(new google.maps.LatLng(point[0],point[1]));
-									}
-									marker.setTitle(lng.currentPosition);
-									i+=10000000;
-								}
-							}			
-						}
-						var tooltip = "<b>" + Highcharts.numberFormat(this.x, l_x.dec,decPoint,thousandsSep) + l_x.suf + "</b><br />"; 
-						for (i=0; i < this.points.length; i++)
-						{
-							tooltip += this.points[i].series.name + ": " + Highcharts.numberFormat(this.points[i].y, l_y_arr[i].dec,decPoint,thousandsSep) + l_y_arr[i].suf + "<br />"; 					
-						}
-						return tooltip;
-					}
-				},
-				plotOptions: {
-					area: {
-						fillOpacity: 0.1,
-						connectNulls : true,
-						marker: {
-							enabled: false,
-							symbol: 'circle',
-							radius: 2,
-							states: {
-								hover: {
-									enabled: true
-								}
-							}
-						}					
-					}
-				},
-				credits: {
-					enabled: false
-				},	
-				series: []
 			};
 		
 			if (graphEle != '')
 			{
 				
-				var eleData = [];
+				var myData = mergeArrayForChart(graphDist, graphEle);
-				var myelemin = 99999;
-				var myelemax = -99999;
-		
-				for (i=0; i<valLen; i++) 
-				{
-					if (graphDist[i] != null)
-					{
-						var _graphEle = graphEle[i];
-						eleData.push([graphDist[i],_graphEle]);
-						if (_graphEle > myelemax) 
-							myelemax = _graphEle; 
-						if (_graphEle < myelemin) 
-							myelemin = _graphEle;
-					}
-				}
 
 				var yaxe = {
-					title: { text: null },
+					type: 'linear',
-					labels: {
+					ticks: {
-						align: 'left',
+						// Include a dollar sign in the ticks
-						formatter: function() {
+						callback: function(value, index, values) {
-							return Highcharts.numberFormat(this.value, l_y.dec,decPoint,thousandsSep) + l_y.suf;
+							return Math.round(value, l_y.dec) + l_y.suf;
 						}
-					}
+					},
-				}
+					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
+				};
 		
 				if ( chartFrom1 != '' )
 				{
@@ -924,7 +939,7 @@ Author URI: http://www.pedemontanadelgrappa.it/
 					yaxe.startOnTick = false;
 				}
 				else { 
-					yaxe.min = myelemin; 
+					yaxe.min = myData.Min; 
 				}
 				
 				if ( chartTo1 != '' )
@@ -933,24 +948,19 @@ Author URI: http://www.pedemontanadelgrappa.it/
 					yaxe.endOnTick = false;
 				}
 				else { 
-					yaxe.max = myelemax; 
+					yaxe.max = myData.Max; 
 				}
+				_formats.push(l_y)
+				hoptions.options.scales.yAxes.push(yaxe);
+				hoptions.data.datasets.push( getDataset(lng.altitude, myData.Items, color2, yaxe.id ));		
 
-				hoptions.yAxis.push(yaxe);
-				hoptions.series.push({
-										name: lng.altitude,
-										lineWidth: 1,
-										marker: { radius: 0 },
-										data : eleData,
-										color: color2,
-										yAxis: hoptions.series.length
-									});			
-				
-				l_y_arr.push(l_y);
 			}
 			
-			if (graphSpeed != '')			{
+			if (graphSpeed != '') {
-				if (unitspeed == '6') /* min/100m */				{					l_s = { suf : "min/100m", dec : 2 };				} 
+				if (unitspeed == '6') /* min/100m */				
+				{					
+					l_s = { suf : "min/100m", dec : 2 };				
+				} 
 				else if (unitspeed == '5') /* knots */
 				{
 					l_s = { suf : "knots", dec : 2 };
@@ -976,222 +986,221 @@ Author URI: http://www.pedemontanadelgrappa.it/
 					l_s = { suf : "m/s", dec : 0 };
 				}
 				
-				var speedData = [];
+				var myData = mergeArrayForChart(graphDist, graphSpeed);
-			
-				for (i=0; i<valLen; i++) 
-				{
-					if (graphDist[i] != null)
-						speedData.push([graphDist[i],graphSpeed[i]]);
-				}
 
 				var yaxe = { 
-					title: { text: null },
+					type: 'linear',
-					labels: {
+					ticks: {
-						//align: 'right',
+						// Include a dollar sign in the ticks
-						formatter: function() {
+						callback: function(value, index, values) {
-							return Highcharts.numberFormat(this.value, l_s.dec,decPoint,thousandsSep) + l_s.suf;
+							return Math.round(value, l_s.dec) + l_s.suf;
 						}
 					},
-					opposite: true
+					position: 'right',
-				}
+					scalePositionLeft: false,
+					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
+				};
 							
 				if ( chartFrom2 != '' )
 				{
 					yaxe.min = chartFrom2;
 					yaxe.startOnTick = false;				
 				}
+				else { 
+					yaxe.min = myData.Min; 
+				}
 				
 				if ( chartTo2 != '' )
 				{
 					yaxe.max = chartTo2;
 					yaxe.endOnTick = false;				
 				}
+				else { 
+					yaxe.max = myData.Max; 
+				}
 
-				hoptions.yAxis.push(yaxe);
-				hoptions.series.push({
-										name: lng.speed,
-										lineWidth: 1,
-										marker: { radius: 0 },
-										data : speedData,
-										color: color3,
-										yAxis: hoptions.series.length
-									});			
 				
-				l_y_arr.push(l_s);
+				_formats.push(l_s);
+				hoptions.options.scales.yAxes.push(yaxe);
+				hoptions.data.datasets.push( getDataset(lng.speed, myData.Items, color3, yaxe.id ) );			
+
 			}
 			
 			if (graphHr != '')
 			{
 				
-				var hrData = [];
+				var myData = mergeArrayForChart(graphDist, graphHr);
-			
-				for (i=0; i<valLen; i++) 
-				{
-					if (graphDist[i] != null)
-					{
-						var c = graphHr[i];
-						if (c==0)
-							c = null;
-						hrData.push([graphDist[i],c]);				
-					}
-				}
 
 				var yaxe = {
-					title: { text: null },
+					type: 'linear',					
-					labels: {
+					ticks: {
-						//align: 'right',
+						// Include a dollar sign in the ticks
-						formatter: function() {
+						callback: function(value, index, values) {
-							return Highcharts.numberFormat(this.value, l_hr.dec,decPoint,thousandsSep) + l_hr.suf;
+							return Math.round(value, l_hr.dec) + l_hr.suf;
 						}
 					},
-					opposite: true
+					position: 'right',
-				}
+					scalePositionLeft: false,
+					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
+				};
 
-				hoptions.yAxis.push(yaxe);
+				hoptions.options.scales.yAxes.push(yaxe);
-				hoptions.series.push({
+				hoptions.data.datasets.push( getDataset(lng.heartRate, myData.Items, color4, yaxe.id ) );			
-										name: lng.heartRate,
+				_formats.push(l_hr);
-										lineWidth: 1,
-										marker: { radius: 0 },
-										data : hrData,
-										color: color4,
-										yAxis: hoptions.series.length
-									});			
-				
-				l_y_arr.push(l_hr);
 			}
 			
 			
 			if (graphAtemp != '')
 			{
 				
-				var atempData = [];
+				var myData = mergeArrayForChart(graphDist, graphAtemp);
-			
-				for (i=0; i<valLen; i++) 
-				{
-					if (graphDist[i] != null)
-					{
-						var c = graphAtemp[i];
-						if (c==0)
-							c = null;
-						atempData.push([graphDist[i],c]);				
-					}
-				}
 
 				var yaxe = {
-					title: { text: null },
+					type: 'linear',
-					labels: {
+					ticks: {
-						//align: 'right',
+						// Include a dollar sign in the ticks
-						formatter: function() {
+						callback: function(value, index, values) {
-							return Highcharts.numberFormat(this.value, 1, decPoint,thousandsSep) + " °C";
+							return Math.round(value, 1) + "°C";
 						}
 					},
-					opposite: true
+					position: 'right',
-				}
+					scalePositionLeft: false,
+					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
+				};
 				
-				hoptions.yAxis.push(yaxe);
+				hoptions.options.scales.yAxes.push(yaxe);
-				hoptions.series.push({
+				hoptions.data.datasets.push( getDataset(lng.atemp, myData,Items, color7, yaxe.id ) );			
-										name: lng.atemp,
+				_formats.push({ suf : "°C", dec : 1 });
-										lineWidth: 1,
-										marker: { radius: 0 },
-										data : atempData,
-										color: color7,
-										yAxis: hoptions.series.length
-									});			
 				
-				l_y_arr.push({ suf : "°C", dec : 1 });
 			}
 			
 			
 			if (graphCad != '')
 			{
 				
-				var cadData = [];
+				var myData = mergeArrayForChart(graphDist, graphCad, true);
-			
-				for (i=0; i<valLen; i++) 
-				{
-					if (graphDist[i] != null)
-					{
-						var c = graphCad[i];
-						if (c==0)
-							c = null;
-						cadData.push([graphDist[i],c]);
-					}
-				}
 				
 				var yaxe = {
-					title: { text: null },
+					type: 'linear',
-					labels: {
+					ticks: {
-						//align: 'right',
+						// Include a dollar sign in the ticks
-						formatter: function() {
+						callback: function(value, index, values) {
-							return Highcharts.numberFormat(this.value, l_cad.dec,decPoint,thousandsSep) + l_cad.suf;
+							return Math.round(value, l_cad.dec) + l_cad.suf;
 						}
 					},
-					opposite: true
+					position: 'right',
-				}
+					scalePositionLeft: false,
+					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
+				};
 									
-				hoptions.yAxis.push(yaxe);
+				hoptions.options.scales.yAxes.push(yaxe);
-				hoptions.series.push({
+				hoptions.data.datasets.push( getDataset(lng.cadence, myData.Items, color5, yaxe.id) );
-										name: lng.cadence,
+				_formats.push(l_cad);
-										lineWidth: 1,
-										marker: { radius: 0 },
-										data : cadData,
-										color: color5,
-										yAxis: hoptions.series.length
-									});			
 				
-				l_y_arr.push(l_cad);
 			}
 
 			if (graphGrade != '')
 			{
 				
-				var cadData = [];
+				var myData = mergeArrayForChart(graphDist, graphGrade);
-			
-				for (i=0; i<valLen; i++) 
-				{
-					if (graphDist[i] != null)
-					{
-						var c = graphGrade[i];
-						if (c==0)
-							c = null;
-						cadData.push([graphDist[i],c]);
-					}
-				}
 
 				var yaxe = {
-					title: { text: null },
+					type: 'linear',					
-					labels: {
+					ticks: {
-						//align: 'right',
+						// Include a dollar sign in the ticks
-						formatter: function() {
+						callback: function(value, index, values) {
-							return Highcharts.numberFormat(this.value, l_grade.dec,decPoint,thousandsSep) + l_grade.suf;
+							return Math.round(value, l_grade.dec) + l_grade.suf;
 						}
 					},
-					opposite: true
+					position: 'right',
-				}
+					scalePositionLeft: false,
+					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
+				};
 				
-				hoptions.yAxis.push(yaxe);
+				_formats.push(l_grade);
-				hoptions.series.push({
+				hoptions.options.scales.yAxes.push(yaxe);
-										name: lng.grade,
+				hoptions.data.datasets.push( getDataset(lng.grade, myData.Items, color6, yaxe.id ) );			
-										lineWidth: 1,
-										marker: { radius: 0 },
-										data : cadData,
-										color: color6,
-										yAxis: hoptions.series.length
-									});			
 				
-				l_y_arr.push(l_grade);
 			}
 			
-			var hchart = new Highcharts.Chart(hoptions);
+			var ctx = document.getElementById("myChart_" + params.targetId).getContext('2d');
+
+			var myChart = new Chart(ctx, hoptions);
+
 		
 		}
 		else  {
-			jQuery("#hchart_" + params.targetId).css("display","none");
+			jQuery("#myChart_" + params.targetId).css("display","none");
 		}
 	
         return this;
     };
 	
+	function mergeArrayForChart(distArr, dataArr, setZerosAsNull)
+	{
+		var l = distArr.length;
+		
+		var items = new Array(l);
+		var min=10000;
+		var max=-10000;
+		
+		for (i=0; i<l; i++) 
+		{
+			if (distArr[i] != null)
+			{
+				var _item = dataArr[i];
+				
+				if (setZerosAsNull === true && _item === 0)
+				{
+					_item = null;					
+				}
+				
+				items[i] = {
+								x: distArr[i], 
+								y:_item
+							};
+				if (_item > max) 
+					max = _item; 
+				if (_item < min) 
+					min = _item;
+			}
+		}
+		
+		return {
+			Items : items,
+			Min : min,
+			Max : max,			
+		}
+		
+	}
+	
+	function getDataset(name,data,color, id) {
+		return {
+			label: name,
+			data : data,
+			borderColor: color,
+			backgroundColor: hexToRgbA(color, .3),
+			pointRadius: 0,
+			borderWidth: 0,
+			pointHoverRadius: 1,
+			yAxisID: id,
+		}
+	}
+	
+	function hexToRgbA(hex,a){
+		var c;
+		if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
+			c= hex.substring(1).split('');
+			if(c.length== 3){
+				c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+			}
+			c= '0x'+c.join('');
+			return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + a +')';
+		}
+		throw new Error('Bad Hex');
+	}
+		
+	
 	function addWayPoint(map, image, shadow, lat, lon, title, descr)
 	{
 		var p = new google.maps.LatLng(lat, lon);

readme.txt

@@ -4,8 +4,8 @@ Contributors: bastianonm, Stephan Klein, Michel Selerin
 Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8VHWLRW6JBTML
 Tags: maps, gpx, gps, graph, chart, google maps, track, garmin, image, nextgen-gallery, nextgen, exif, OpenStreetMap, OpenCycleMap, Hike&Bike, heart rate, heartrate, cadence
 Requires at least: 2.0.0
-Tested up to: 4.8.2
+Tested up to: 4.9.4
-Stable tag: 1.3.16
+Stable tag: 1.5.00
 
 Draws a gpx track with altitude graph. You can also display your nextgen gallery images in the map.
 
@@ -35,8 +35,6 @@ NextGen Gallery Integration:
 Display your NextGen Gallery images inside the map! 
 Even if you don't have a gps camera, this plugin can retrive the image position starting from the image date and you gpx file. 
 
-Old NGGallery Images (without gps data) and gpx: <a href="http://www.pedemontanadelgrappa.it/mappe/itinerario-3-alta-via-degli-eroi/">http://www.pedemontanadelgrappa.it/mappe/itinerario-3-alta-via-degli-eroi/</a>
-
 Post Attachments Integration:
 
 This version is extended by Stephan Klein (https://klein-gedruckt.de/2015/03/wordpress-plugin-wp-gpx-maps/) and supports displaying all images attached to a post without using NGG.
@@ -66,7 +64,7 @@ Translated into 14 languages:
 
 - iphone/ipad/ipod Compatible
 
-Try this plugin: <a href="http://www.pedemontanadelgrappa.it/category/mappe/">http://www.pedemontanadelgrappa.it/category/mappe/</a>
+Try this plugin: <a href="https://devfarm.it/wp-gpx-maps-demo/">https://devfarm.it/wp-gpx-maps-demo/</a>
 
 <a href="http://www.devfarm.it/forums/forum/wp-gpx-maps/">Support Forum</a>
 
@@ -80,9 +78,7 @@ Supported gpx namespaces are:
 
 1. http://www.garmin.com/xmlschemas/TrackPointExtension/v1
 
-Thanks to: <a href="http://www.securcube.net/">www.securcube.net</a>, <a href="http://www.devfarm.it/">www.devfarm.it</a>, <a href="http://www.pedemontanadelgrappa.it/">www.pedemontanadelgrappa.it</a>
+Thanks to: <a href="http://www.securcube.net/">www.securcube.net</a>, <a href="http://www.devfarm.it/">www.devfarm.it</a>
-
-Up to version 1.1.15 [Highcharts-API](http://www.highcharts.com/) is the only available rendering engine. Please respect their license and pricing (only Free for Non-Commercial usage).
 
 == Installation ==
 
@@ -157,6 +153,8 @@ Yes!
 1. Altitude & Speed & Hearth rate
 
 == Changelog ==
+= 1.5.00 =
+* replaced highcharts with chartjs. This is a forced choice due highcharts license issue, view:  https://devfarm.it/wordpress-plugin/wordpress-plugin-directory-notice-wp-gpx-maps-temporarily-disabled/
 = 1.3.16 =
 * Added Norwegian nb_NO translation (thanks to thordivel) 
 * Added Japanese ja_JP translation (thanks to dentos) 

wp-gpx-maps.php

@@ -3,9 +3,9 @@
 Plugin Name: WP-GPX-Maps
 Plugin URI: http://www.devfarm.it/
 Description: Draws a GPX track with altitude chart
-Version: 1.3.16
+Version: 1.5.00
 Author: Bastianon Massimo
-Author URI: http://www.pedemontanadelgrappa.it/
+Author URI: http://www.devfarm.it/
 */
 
 //error_reporting (E_ALL);
@@ -47,16 +47,23 @@ function WP_GPX_Maps_action_links($links, $file) {
 }
 
 function enqueue_WP_GPX_Maps_scripts()
-{		$wpgpxmaps_googlemapsv3_apikey = get_option('wpgpxmaps_googlemapsv3_apikey');
+{		
-	wp_enqueue_script( 'jquery' );	if ($wpgpxmaps_googlemapsv3_apikey)	{		wp_enqueue_script( 'googlemaps', '//maps.googleapis.com/maps/api/js?key='.$wpgpxmaps_googlemapsv3_apikey, null, null);					}	else	{		wp_enqueue_script( 'googlemaps', '//maps.googleapis.com/maps/api/js', null, null);			}	
+	$wpgpxmaps_googlemapsv3_apikey = get_option('wpgpxmaps_googlemapsv3_apikey');
-
+	wp_enqueue_script( 'jquery' );	
-    wp_enqueue_script( 'highcharts', "//code.highcharts.com/3.0.10/highcharts.js", array('jquery'), "3.0.10", true);
+	if ($wpgpxmaps_googlemapsv3_apikey)	{		
-    wp_enqueue_script( 'WP-GPX-Maps', plugins_url('/WP-GPX-Maps.js', __FILE__), array('jquery','googlemaps','highcharts'), "1.3.15");
+		wp_enqueue_script( 'googlemaps', '//maps.googleapis.com/maps/api/js?key='.$wpgpxmaps_googlemapsv3_apikey, null, null);					
+	}	
+	else {		
+		wp_enqueue_script( 'googlemaps', '//maps.googleapis.com/maps/api/js', null, null);
+	}	
+	wp_enqueue_script( 'chartjs', '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js', array(), "2.7.2" ); 
+    wp_enqueue_script( 'WP-GPX-Maps', plugins_url('/WP-GPX-Maps.js', __FILE__), array('jquery','googlemaps','chartjs'), "1.5.00");
 }
 
 function print_WP_GPX_Maps_styles()
 {
 ?>
+
 <style type="text/css">
 	.wpgpxmaps { clear:both; }
 	#content .wpgpxmaps img,
@@ -627,13 +634,15 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 				<div id="map_'.$r.'" style="width:'.$w.'; height:'.$mh.'"></div>
 				<div id="wpgpxmaps_'.$r.'_osm_footer" class="wpgpxmaps_osm_footer" style="display:none;"><span> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</span></div>			
 			</div>
-			<div id="hchart_'.$r.'" class="plot" style="width:'.$w.'; height:'.$gh.'"></div>
+			<canvas id="myChart_'.$r.'" class="plot" style="width:'.$w.'; height:'.$gh.'"></canvas>
 			<div id="ngimages_'.$r.'" class="ngimages" style="display:none">'.$ngimgs_data.'</div>
 			<div id="report_'.$r.'" class="report"></div>
 		</div>
 		'. $error .'
 		<script type="text/javascript">
+		
 			jQuery(document).ready(function() {
+
 				jQuery("#wpgpxmaps_'.$r.'").wpgpxmaps({ 
 					targetId    : "'.$r.'",
 					mapType     : "'.$mt.'",
@@ -684,7 +693,9 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 							  backToCenter		    : "'.__("Back to center", "wp-gpx-maps").'"
 							}
 				});				
+				
 			});
+	
 		</script>';	
 
 	// print summary