RobinHerbots · June 14, 2024 15:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- This is where we are going to put the graph -->
                    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <!-- This is where we are going to put the map -->
                    <div id="map-canvas" style="height: 500px; margin: 0 auto; padding: 0;"></div>
                </div>
            </div>
        </div>
        <!-- Call the Google Maps JavaScript API using your API key -->
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <script src="running_data.js"></script>
    </body>
 </html>
diff --git a/running_data.js b/running_data.js
 $(function () {
    
    var position = data.time_series.position;
    //the position data needs to be tweaked a little to use with highcharts...
    //basically the data needs to be reformatted from [[a,{b,c,d}],[a,{b,c,d}]] to [[a,d],[a,d]]
    var elevationArray = [];
    $.each(position, function() {
        elevationArray.push(new Array(this[0], this[1].elevation));
    });
    
    //for the map, the position data needs to be converted to an array of google map points
    var runningPathCoordinates = [];
    $.each(position, function() {
        runningPathCoordinates.push(new google.maps.LatLng(this[1].lat, this[1].lng));
    });

    //this method creates the map and plots the position coordinates
    function initializeMap() {
          //here we set the map options
          var mapOptions = {
            //zoomed all the way in
            zoom: 15,
            //center the map on some coordinates pulled from the postion data
            center: new google.maps.LatLng(33.390017024, -86.7248872439),
            //set the map type
            mapTypeId: google.maps.MapTypeId.TERRAIN
          };
          
          //create the map  
          var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
            
          //draw the running path
          var runningPath = new google.maps.Polyline({
            //pass in the arra of coordinates created above
            path: runningPathCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
          });
          //add the running path to the map 
          runningPath.setMap(map);
        }
    
    //create the map once the page is loaded
    google.maps.event.addDomListener(window, 'load', initializeMap);

    //initialize the highcharts graph
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'Speed'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
        },
        //define formatting for the x axis
        xAxis: {
            type:'datetime',
            minPadding: 0.05,
            maxPadding: 0.05,
            min: 0,
            dateTimeLabelFormats: {
                day: '%M:%S'
            },
            title: {
                text: 'Elapsed Time (ms)'
            }
        },
        //define formatting for the y axis
        yAxis: [{
            title: {
                text: 'Speed (m/s)'
            },
            min: 0
        },
        {
            gridLineWidth: 0,
            title: {
                text: 'Elevation (m)'
            },
            min: 0,
            opposite:true
        }],
        legend: {
            enabled: true
        },
        //pass in the data sets
        series: [{
            type: 'spline',
            name: 'speed',
            yAxis: 0,
            pointStart: 0,
            data: data.time_series.speed
        },
        {
            type: 'spline',
            name: 'elevation',
            yAxis: 1,
            pointStart: 0,
            data: elevationArray
        }]
    });
 });

 //this is the raw data pasted directly from the API
 var data = {
    "start_datetime": "2014-10-06T22:32:35+00:00",
    "name": "Ran 3.39 mi on 10\/6\/14",
    "updated_datetime": "2014-10-06T23:03:07+00:00",
    "created_datetime": "2014-10-06T23:03:07+00:00",
    "notes": "",
    "time_series": {
        "position": [
            [1.14092425, {
                "lat": 33.389053708,
                "lng": -86.7298983783,
                "elevation": 156.62
            }],
            [1.2218575833, {
                "lat": 33.3890589041,
                "lng": -86.7299213197,
                "elevation": 156.7
            }],
            //SNIP
            //...
            [1822.287538, {
                "lat": 33.390650422,
                "lng": -86.7248309425,
                "elevation": 158.27
            }]
        ],
        "speed": [
            [1.14092425, 0.0],
            [1.2218575833, 2.2833796919],
            //SNIP
            //...
            [1822.287538, 3.8601047625]
        ],
        "distance": [
            [1.14092425, 0.0],
            [1.2218575833, 2.2093817552],
            //SNIP
            //...
            [1822.287538, 5465.6629414324]
        ]
    },
    "start_locale_timezone": "America\/Chicago",
    "source": "MapMyRun+ iPhone",
    "_links": {
        "privacy": [{
            "href": "\/v7.0\/privacy_option\/0\/",
            "id": "0"
        }],
        "self": [{
            "href": "\/v7.0\/workout\/757447819\/?field_set=time_series",
            "id": "757447819"
        }],
        "documentation": [{
            "href": "https:\/\/www.mapmyapi.com\/docs\/Workout"
        }],
        "route": [{
            "href": "\/v7.0\/route\/553332772\/",
            "id": "553332772"
        }],
        "activity_type": [{
            "href": "\/v7.0\/activity_type\/16\/",
            "id": "16"
        }]
    },
    "reference_key": "668752945",
    "has_time_series": true,
    "is_verified": true,
    "aggregates": {
        "active_time_total": 1823.0,
        "distance_total": 5457.33378432,
        "speed_max": 5.437481632,
        "speed_avg": 2.9932054944,
        "elapsed_time_total": 1825.0,
        "metabolic_energy_total": 2284464.0
    }
 }
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-lg-12">
	<!-- This is where we are going to put the graph -->
	<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</div>
	</div>
	<div class="row">
	<div class="col-lg-12">
	<!-- This is where we are going to put the map -->
	<div id="map-canvas" style="height: 500px; margin: 0 auto; padding: 0;"></div>
	</div>
	</div>
	</div>
	<!-- Call the Google Maps JavaScript API using your API key -->
	<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	<script src="running_data.js"></script>
	</body>
	</html>
	$(function () {

	var position = data.time_series.position;
	//the position data needs to be tweaked a little to use with highcharts...
	//basically the data needs to be reformatted from [[a,{b,c,d}],[a,{b,c,d}]] to [[a,d],[a,d]]
	var elevationArray = [];
	$.each(position, function() {
	elevationArray.push(new Array(this[0], this[1].elevation));
	});

	//for the map, the position data needs to be converted to an array of google map points
	var runningPathCoordinates = [];
	$.each(position, function() {
	runningPathCoordinates.push(new google.maps.LatLng(this[1].lat, this[1].lng));
	});

	//this method creates the map and plots the position coordinates
	function initializeMap() {
	//here we set the map options
	var mapOptions = {
	//zoomed all the way in
	zoom: 15,
	//center the map on some coordinates pulled from the postion data
	center: new google.maps.LatLng(33.390017024, -86.7248872439),
	//set the map type
	mapTypeId: google.maps.MapTypeId.TERRAIN
	};

	//create the map
	var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

	//draw the running path
	var runningPath = new google.maps.Polyline({
	//pass in the arra of coordinates created above
	path: runningPathCoordinates,
	geodesic: true,
	strokeColor: '#FF0000',
	strokeOpacity: 1.0,
	strokeWeight: 2
	});
	//add the running path to the map
	runningPath.setMap(map);
	}

	//create the map once the page is loaded
	google.maps.event.addDomListener(window, 'load', initializeMap);

	//initialize the highcharts graph
	$('#container').highcharts({
	chart: {
	zoomType: 'x'
	},
	title: {
	text: 'Speed'
	},
	subtitle: {
	text: document.ontouchstart === undefined ?
	'Click and drag in the plot area to zoom in' :
	'Pinch the chart to zoom in'
	},
	//define formatting for the x axis
	xAxis: {
	type:'datetime',
	minPadding: 0.05,
	maxPadding: 0.05,
	min: 0,
	dateTimeLabelFormats: {
	day: '%M:%S'
	},
	title: {
	text: 'Elapsed Time (ms)'
	}
	},
	//define formatting for the y axis
	yAxis: [{
	title: {
	text: 'Speed (m/s)'
	},
	min: 0
	},
	{
	gridLineWidth: 0,
	title: {
	text: 'Elevation (m)'
	},
	min: 0,
	opposite:true
	}],
	legend: {
	enabled: true
	},
	//pass in the data sets
	series: [{
	type: 'spline',
	name: 'speed',
	yAxis: 0,
	pointStart: 0,
	data: data.time_series.speed
	},
	{
	type: 'spline',
	name: 'elevation',
	yAxis: 1,
	pointStart: 0,
	data: elevationArray
	}]
	});
	});

	//this is the raw data pasted directly from the API
	var data = {
	"start_datetime": "2014-10-06T22:32:35+00:00",
	"name": "Ran 3.39 mi on 10\/6\/14",
	"updated_datetime": "2014-10-06T23:03:07+00:00",
	"created_datetime": "2014-10-06T23:03:07+00:00",
	"notes": "",
	"time_series": {
	"position": [
	[1.14092425, {
	"lat": 33.389053708,
	"lng": -86.7298983783,
	"elevation": 156.62
	}],
	[1.2218575833, {
	"lat": 33.3890589041,
	"lng": -86.7299213197,
	"elevation": 156.7
	}],
	//SNIP
	//...
	[1822.287538, {
	"lat": 33.390650422,
	"lng": -86.7248309425,
	"elevation": 158.27
	}]
	],
	"speed": [
	[1.14092425, 0.0],
	[1.2218575833, 2.2833796919],
	//SNIP
	//...
	[1822.287538, 3.8601047625]
	],
	"distance": [
	[1.14092425, 0.0],
	[1.2218575833, 2.2093817552],
	//SNIP
	//...
	[1822.287538, 5465.6629414324]
	]
	},
	"start_locale_timezone": "America\/Chicago",
	"source": "MapMyRun+ iPhone",
	"_links": {
	"privacy": [{
	"href": "\/v7.0\/privacy_option\/0\/",
	"id": "0"
	}],
	"self": [{
	"href": "\/v7.0\/workout\/757447819\/?field_set=time_series",
	"id": "757447819"
	}],
	"documentation": [{
	"href": "https:\/\/www.mapmyapi.com\/docs\/Workout"
	}],
	"route": [{
	"href": "\/v7.0\/route\/553332772\/",
	"id": "553332772"
	}],
	"activity_type": [{
	"href": "\/v7.0\/activity_type\/16\/",
	"id": "16"
	}]
	},
	"reference_key": "668752945",
	"has_time_series": true,
	"is_verified": true,
	"aggregates": {
	"active_time_total": 1823.0,
	"distance_total": 5457.33378432,
	"speed_max": 5.437481632,
	"speed_avg": 2.9932054944,
	"elapsed_time_total": 1825.0,
	"metabolic_energy_total": 2284464.0
	}
	}