* Added Chart zoom feature

* Some small bug fixes

WP-GPX-Maps.js

@@ -160,9 +160,18 @@ function _wpgpxmaps(params)
 	var lng = params.langs;
 	var pluginUrl = params.pluginUrl;
 	
+	// Unit of measure settings
+	var l_s;
+	var l_x;
+	var l_y;
+	var l_grade = { suf : "%", dec : 1 };
+	var l_hr = { suf : "", dec : 0 };
+	var l_cad = { suf : "", dec : 0 };
+	
 	var el = document.getElementById("wpgpxmaps_" + targetId);
 	var el_map = document.getElementById("map_" + targetId);
 	var el_chart = document.getElementById("chart_" + targetId);
+	var el_report = document.getElementById("report_" + targetId);
 	
 	var mapWidth = el_map.style.width;
 	
@@ -600,8 +609,6 @@ function _wpgpxmaps(params)
 
 		var valLen = graphDist.length;
 	
-		var l_x;
-		var l_y;
 		var l_y_arr = [];
 		
 		if (unit=="1")
@@ -636,7 +643,62 @@ function _wpgpxmaps(params)
 		var hoptions = {
 			chart: {
 				renderTo: 'hchart_' + params.targetId,
-				type: 'area'
+				type: 'area',
+				events: {
+					selection: function(event) {
+
+						if (event.xAxis) {
+						
+							el_report.innerHTML = 'Zoom: '+ (event.xAxis[0].min).toFixed(l_x.dec) + ' ' + l_x.suf + ' -> '+ (event.xAxis[0].max).toFixed(decPoint) + ' ' + l_x.suf + '<br />';						
+						
+							var seriesLength = event.currentTarget.series.length;
+						
+							for (var i = 0; i < seriesLength; i++) {
+							
+								var dataX = {value: 0, count: 0};
+								
+								var serie = event.currentTarget.series[i];
+								var points = serie.points;
+								var min = event.xAxis[0].min, max = event.xAxis[0].max;
+								
+								for (var j = 0; j < points.length; j++) {
+									if (points[j].x >= min && points[j].x <= max) {
+										dataX.value += points[j].y;
+										dataX.count +=1;
+									}
+								}
+								
+								var name = serie.name;
+								
+								if (name == lng.altitude) {
+									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_y.dec) + " " + l_y.suf + "<br />";
+								} else if (name == lng.speed) {
+									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_s.dec) + " " + l_s.suf + "<br />";
+								} else if (name == lng.grade) {
+									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_grade.dec) + " " + l_grade.suf + "<br />";
+								} else if (name == lng.cadence) {
+									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_cad.dec) + " " + l_cad.suf + "<br />";
+								} else if (name == lng.heartRate) {
+									el_report.innerHTML += name + ' avg: ' + (dataX.value / dataX.count).toFixed(l_hr.dec) + " " + l_hr.suf + "<br />";
+								} else
+								{
+									el_report.innerHTML += serie.name + ' avg: ' + dataX.value / dataX.count + "<br />";
+								}
+								
+								
+								
+								
+							
+							}
+
+							el_report.innerHTML += "<br />"
+							
+						} else {
+							el_report.innerHTML = '';
+						}
+					}
+				},
+				zoomType: 'x'
 			},
 			title: {
 				text: null
@@ -665,7 +727,7 @@ function _wpgpxmaps(params)
 				formatter: function() {
 					if (marker)
 					{
-						var hchart_xserie = hchart.xAxis[0].series[0].data;				
+						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)
@@ -673,7 +735,7 @@ function _wpgpxmaps(params)
 								var point = getItemFromArray(mapData,i)
 								if (point)
 								{
-									marker.setPosition(new google.maps.LatLng(point[0],point[1]));									
+									marker.setPosition(new google.maps.LatLng(point[0],point[1]));
 								}
 								marker.setTitle(lng.currentPosition);
 								i+=10000000;
@@ -774,7 +836,7 @@ function _wpgpxmaps(params)
 		if (graphSpeed != '')
 		{
 			
-			var l_s;
+
 			
 			if (unitspeed == '5') // knos
 			{
@@ -848,8 +910,6 @@ function _wpgpxmaps(params)
 		if (graphHr != '')
 		{
 			
-			var l_hr = { suf : "", dec : 0 };
-			
 			var hrData = [];
 		
 			for (i=0; i<valLen; i++) 
@@ -873,7 +933,7 @@ function _wpgpxmaps(params)
 				},
 				opposite: true
 			}
-								
+
 			hoptions.yAxis.push(yaxe);
 			hoptions.series.push({
 									name: lng.heartRate,
@@ -890,8 +950,6 @@ function _wpgpxmaps(params)
 		if (graphCad != '')
 		{
 			
-			var l_cad = { suf : "", dec : 0 };
-			
 			var cadData = [];
 		
 			for (i=0; i<valLen; i++) 
@@ -932,8 +990,6 @@ function _wpgpxmaps(params)
 		if (graphGrade != '')
 		{
 			
-			var l_grade = { suf : "%", dec : 1 };
-			
 			var cadData = [];
 		
 			for (i=0; i<valLen; i++) 

readme.txt

@@ -5,7 +5,7 @@ Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_i
 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: 3.5
-Stable tag: 1.1.43
+Stable tag: 1.1.44
 
 Draws a gpx track with altitude graph. You can also display your nextgen gallery images in the map.
 
@@ -181,6 +181,9 @@ Yes!
 1. Altitude & Speed & Hearth rate
 
 == Changelog ==
+= 1.1.44 =
+* Added Chart zoom feature
+* Some small bug fixes
 = 1.1.43 =
 * Added Portuguese (Brazilian) translation, thanks to André Ramos
 * new map: Open Cycle Map - Transport

wp-gpx-maps.php

@@ -3,7 +3,7 @@
 Plugin Name: WP-GPX-Maps
 Plugin URI: http://www.devfarm.it/
 Description: Draws a gpx track with altitude graph
-Version: 1.1.43
+Version: 1.1.44
 Author: Bastianon Massimo
 Author URI: http://www.pedemontanadelgrappa.it/
 */
@@ -59,7 +59,7 @@ function enqueue_WP_GPX_Maps_scripts()
     wp_enqueue_script( 'highcharts' );
 
     wp_deregister_script( 'WP-GPX-Maps' );
-    wp_register_script( 'WP-GPX-Maps', plugins_url('/WP-GPX-Maps.js', __FILE__), array('jquery','googlemaps','highcharts'), "1.1.43");
+    wp_register_script( 'WP-GPX-Maps', plugins_url('/WP-GPX-Maps.js', __FILE__), array('jquery','googlemaps','highcharts'), "1.1.44");
     wp_enqueue_script( 'WP-GPX-Maps' );
 
 }
@@ -76,6 +76,7 @@ function print_WP_GPX_Maps_scripts()
 	.wpgpxmaps .myngimages { border:1px solid #fff;position:absolute;cursor:pointer;margin:0;z-index:1; }
 	.wpgpxmaps_summary .summarylabel { }
 	.wpgpxmaps_summary .summaryvalue { font-weight: bold; }
+	.wpgpxmaps .report { line-height:120%; }
 </style>
 <?php
 }
@@ -461,6 +462,7 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 			<div id="map_'.$r.'" style="width:'.$w.'; height:'.$mh.'"></div>
 			<div id="hchart_'.$r.'" class="plot" style="width:'.$w.'; height:'.$gh.'"></div>
 			<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">

wp-gpx-maps_admin_settings.php

@@ -190,8 +190,8 @@
 				<input type="radio" name="wpgpxmaps_map_type" value="TERRAIN" <?php if ($t == 'TERRAIN') echo 'checked'; ?>> TERRAIN: maps with physical features such as terrain and vegetation.<br />
 				<input type="radio" name="wpgpxmaps_map_type" value="OSM1" <?php if ($t == 'OSM1') echo 'checked'; ?>> Open Street Map<br />
 				<input type="radio" name="wpgpxmaps_map_type" value="OSM2" <?php if ($t == 'OSM2') echo 'checked'; ?>> Open Cycle Map<br />
-				<input type="radio" name="wpgpxmaps_map_type" value="OSM2" <?php if ($t == 'OSM4') echo 'checked'; ?>> Open Cycle Map - Transport<br />
+				<input type="radio" name="wpgpxmaps_map_type" value="OSM4" <?php if ($t == 'OSM4') echo 'checked'; ?>> Open Cycle Map - Transport<br />
-				<input type="radio" name="wpgpxmaps_map_type" value="OSM2" <?php if ($t == 'OSM5') echo 'checked'; ?>> Open Cycle Map - Landscape<br />
+				<input type="radio" name="wpgpxmaps_map_type" value="OSM5" <?php if ($t == 'OSM5') echo 'checked'; ?>> Open Cycle Map - Landscape<br />
 				<input type="radio" name="wpgpxmaps_map_type" value="OSM3" <?php if ($t == 'OSM3') echo 'checked'; ?>> Hike & Bike<br />
 			</td>
 		</tr>