GPS track with altimeter

<!DOCTYPE html>
<html>
<head>
  <title>CartoDB with Chart.js altimeter | CartoDB</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" />
  
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
      position:relative;
    }
    #bar{
      height: 60%;
      width:40px;
      padding: 4px;
      margin:6px;
      background-color: rgba(255,255,255,0.9);
      position:absolute;
      z-index: 999;
      right:0;
      top: 20%;
    }
    #alt{
      height:100%;
      width:100%;
      margin:0;
      padding:0;
    }
    /*.cartodb-logo{
      display:none!important;
    }*/
  </style>
  
  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  
</head>
<body>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.min.js"></script>  
  <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

#gps_track{
    comp-op: source-over;
    marker-fill-opacity: 1;
    marker-line-color: #109DCD;
    marker-line-width: 0;
    marker-line-opacity: 1;
    marker-type: ellipse;
    marker-width: 5;
    marker-fill: #109DCD;
  }
  </script>   
  
  
  <script>

var features=[];

var torqueLayerSource = {
    type: 'torque',
    options: {
      user_name: 'ernestomb', 
      table_name: 'gps_track',
      cartocss: $("#cartocss").html()
    }
  };

//retrieve geometry from CartoDB
  var sql=new cartodb.SQL({user:'ernestomb', format:'geojson'});
  sql.execute("SELECT * FROM gps_track WHERE cartodb_id%100=0 AND cartodb_id>200 ORDER BY cartodb_id").done(function(geojson){
    features=geojson.features;
    //console.log(features.length);
  });

map= new L.Map('map', {
    zoom:11,
    center:[40.7464,-73.9749]
  });

L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
  }).addTo(map);

cartodb.createLayer(map, torqueLayerSource,{
    //options
    https:true
  }).addTo(map)
  .done(function(layer){
      //do stuff
    layer.pause();
    layer.on('change:time', function(changes){
      psqlTime=layer.getTime().toISOString();
      //console.log(psqlTime);
      for (var i=features.length-1;i>=0;i--) {
        if (features[i].properties.times<=psqlTime) {
          altimeter.datasets[0].bars[0].value=features[i].properties.ele;
          altimeter.update();
          i=-1;
        }
      }
      //loop prevention
      if (changes.step === layer.provider.getSteps() - 1) {
        layer.pause();
      }
    });
  });

var data ={
    labels: ["alt"],
    datasets: [
      {
        label: "My First dataset",
        fillColor: "rgba(0,220,0,0.5)",
        strokeColor: "rgba(0,220,0,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [0]
      }]
  };

var ctx=document.getElementById("alt").getContext("2d");
  var altimeter=new Chart(ctx).Bar(data,{
    //options
    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 5,
    scaleStartValue: 0,
    barStrokeWidth:4
  });
  
  </script>

</body>
</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js to a secure url

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js to https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.min.js

https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js

https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js