// Load the Visualization API and the linechart package.
google.load("visualization", "1", {packages:["corechart"]});

function drawPath() {
  // Create a PathElevationRequest object using marathonCoordinates
  var pathRequest = {
    'path': marathonCoordinates,
    'samples': 22
  }
  // Initiate the path request
  if (elevator) {
    elevator.getElevationAlongPath(pathRequest, plotElevation);
  }
}

function plotElevation(results, status) {
  if (status == google.maps.ElevationStatus.OK) {
    elevations = results;
	
	// Extract the data from which to populate the chart
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Elevation');
	data.addRows(results.length);
    for (var i=0; i<results.length; i++) {
	  // si l'alçada es negativa posa 0
      if (elevations[i].elevation > 0) {
		alt = elevations[i].elevation;
	  } else {
		alt = 0;
	  }
	  data.setCell(i, 0, (i*2)+'');
	  data.setCell(i, 1, alt);
    }
	
    // Draw the chart using the data within its DIV
	var chart = new google.visualization.AreaChart(document.getElementById('elevation_chart'));
    document.getElementById('elevation_chart').style.display = 'block';
    chart.draw(data, {
      width: 665,
      height: 300,
	  title: 'Elevation chart',
	  titleColor: '#FFFFFF',
	  titleFontSize: '11',
	  hAxis: { textColor:'#808080', title:'Distance (km)', titleColor:'#FFFFFF' },
	  vAxis: { textColor:'#808080', title:'Elevation (m)', titleColor:'#FFFFFF', maxValue:'40', minValue:'0', baseline:'0', baselineColor:'#CCCCCC', logScale:false },
	  backgroundColor: '#262626',
	  axisBackgroundColor: '#333333',
	  colors: ['#FF8000'],
	  fontSize: '11',
	  isStacked: false,
	  legend: 'none',
	  legendFontSize: '11',
	  legendTextColor: '#FFFFFF',
	  lineWidth: '1',
	  pointSize: '2',
	  reverseCategories: false,
	  tooltipFontSize: '11'
    });
  }
}