Index: ow/static/js/ow.js
===================================================================
--- ow/static/js/ow.js	(revision 5cf5787d1c21f5eedd38c23d588cc1906e4bef1d)
+++ ow/static/js/ow.js	(revision 688fb7d6e0fe67097d4a02976a45cf0c07c4c449)
@@ -35,5 +35,4 @@
     var gpx;
     var elevation;
-    var ow_charts;
 
     var create_map = function create_map(latitude, longitude, zoom) {
@@ -52,30 +51,30 @@
            This has to be called *after* create_map and *before* load_gpx.
         */
+
         elevation = L.control.elevation({
             position: "bottomright",
-            theme: "steelblue-theme", //default: lime-theme
-            width: 600,
-            height: 125,
-            margins: {
-                top: 10,
-                right: 20,
-                bottom: 30,
-                left: 50
-            },
+            theme: "openworkouts-theme",
             useHeightIndicator: true, //if false a marker is drawn at map position
-            interpolation: "linear", //see https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area_interpolate
-            hoverNumber: {
-                decimalsX: 3, //decimals on distance (always in km)
-                decimalsY: 0, //deciamls on height (always in m)
-                formatter: undefined //custom formatter function may be injected
-            },
-            xTicks: undefined, //number of ticks in x axis, calculated by default according to width
-            yTicks: undefined, //number of ticks on y axis, calculated by default according to height
-            collapsed: false    //collapsed mode, show chart on click or mouseover
-        });
-
-        var ele_container = elevation.addTo(map);
-        /* document.getElementById('ow-analysis').appendChild(
-            ele_container._container); */
+            interpolation: d3.curveLinear,
+            elevationDiv: "#elevation",
+            detachedView: true,
+            responsiveView: true,
+            gpxOptions: {
+		async: true,
+		marker_options: {
+		    startIconUrl: null,
+		    endIconUrl: null,
+		    shadowUrl: null,
+		},
+		polyline_options: {
+		    color: '#EE4056',
+		    opacity: 0.75,
+		    weight: 5,
+		    lineCap: 'round'
+		},
+	    },
+        });
+        elevation.loadGPX(map, gpx_url);
+        // var ele_container = elevation.addTo(map);
     };
 
@@ -92,4 +91,10 @@
                 shadowUrl: shadow,
             },
+	    polyline_options: {
+		color: '#EE4056',
+		opacity: 0.75,
+		weight: 5,
+		lineCap: 'round'
+	    },
         });
 
@@ -101,5 +106,4 @@
             gpx.on("addline",function(e){
                 elevation.addData(e.line);
-                // ow_charts.addData(e.line);
             });
         };
@@ -109,11 +113,13 @@
 
     var render = function render() {
-        // create the map, add elevation, load gpx
+        // create the map, add elevation, load gpx (only if needed, as the
+        // elevation plugin already loads the gpx data)
         create_map(latitude, longitude, zoom);
         if (elevation) {
             add_elevation_chart();
         }
-        // add_ow_charts();
-        load_gpx(gpx_url);
+        else {
+            load_gpx(gpx_url);
+        }
     };
 
@@ -148,5 +154,6 @@
          */
         var chart = d3.select(chart_selector),
-            margin = {top: 20, right: 20, bottom: 30, left: 50},
+            margin = {top: 17, right: 0, bottom: 20, left: 0},
+
             width = +chart.attr("width") - margin.left - margin.right,
             height = +chart.attr("height") - margin.top - margin.bottom,
@@ -211,6 +218,13 @@
 	        })
 	        .attr("y", function (d) {
-                    return y(Number(d.distance) + 5);
-	        })
+                    /*
+                      Get the value for the current bar, then get the maximum
+                      value to be displayed in the bar, which is used to
+                      calculate the proper position of the label for this bar,
+                      relatively to its height (1% above the bar)
+                     */
+                    var max = y.domain()[1];
+                    return y(d.distance + y.domain()[1] * 0.02);
+            })
                 .text(function(d) {
                     if (Number(d.distance) > 0) {
