ernesmb/index.html

## index.html
<!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="http://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="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  -->
  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />

</head>
<body>
  <!--
  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  -->
  <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>

  <div id="map"></div>
  <div id="bar">
    <canvas id="alt"></canvas>
  </div>

  <script type="cartocss/text" id="cartocss">
  /** torque visualization */
  Map {
    -torque-frame-count:1000;
    -torque-animation-duration:45;
    -torque-time-attribute:"times";
    -torque-aggregation-function:"count(cartodb_id)";
    -torque-resolution:2;
    -torque-data-aggregation:linear;
  }

  #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>

  <!-- Drop your code between the script tags below! -->
  <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('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://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>
	<!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="http://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="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	-->
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />

	</head>
	<body>
	<!--
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
	-->
	<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>

	<div id="map"></div>
	<div id="bar">
	<canvas id="alt"></canvas>
	</div>

	<script type="cartocss/text" id="cartocss">
	/** torque visualization */
	Map {
	-torque-frame-count:1000;
	-torque-animation-duration:45;
	-torque-time-attribute:"times";
	-torque-aggregation-function:"count(cartodb_id)";
	-torque-resolution:2;
	-torque-data-aggregation:linear;
	}

	#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>

	<!-- Drop your code between the script tags below! -->
	<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('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://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>