diogok/index.html

## index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contador de Downloads de recurso do GBIF</title>
</head>
<body>

  <canvas id="myChart" width="700" height="300"></canvas>

  <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <script src="//cdn.jsdelivr.net/chart.js/1.0.2/Chart.min.js" type="text/javascript"></script>

  <script type="text/javascript">
  // biblioteca de gráficos
  // http://www.chartjs.org/docs/#line-chart-introduction
  (function(){
   //Carregar os dados crus
   $.getJSON('http://api.gbif.org/v1/occurrence/download/dataset/4300f8d5-1ae5-49e5-a101-63894b005868?limit=200&callback=?',function(response){

     // contador por dia
     var contador ={};

     // para cada resultado
     for(var i=0;i<response.results.length;i++) {
      // os dados do download
      var download = response.results[i].download;
      var data = new Date(download.created); // data do download
      var dataSimples = data.getFullYear()+"-"+("0"+ data.getMonth() ).slice(-2)+"-"+("0"+ data.getDate() ).slice(-2); // data formatada

      // inicia o contador para a data caso não exista
      if(typeof contador[dataSimples] != 'number') contador[dataSimples] = 0;

      // incrementa o contador
      contador[dataSimples]++;
     }

     // Elemento Canvas a Desenhar
     var ctx = document.getElementById("myChart").getContext("2d");

     // separa os dias
     var dias = [];
     for(var dia in contador) {
       console.log(dia);
       dias.push(dia);
       if(dias.length==8) break; // oito dias
     }
     dias.sort()

     // separa contagens, na mesma ordem da lista de dias
     var contagens = []
     for(var i=0;i<dias.length;i++) {
       contagens.push(contador[dias[i]]);
     }

     var data = {
      labels: dias,// dias como eixo X
      datasets:[
        {
          label:"Número de downloads",
          data: contagens, // contagens como eixo Y
          // formatação abaixo
          fillColor: "rgba(151,187,205,0.2)",
          strokeColor: "rgba(151,187,205,1)",
          pointColor: "rgba(151,187,205,1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)"
        }
      ]
     };

     // outras opções de charting
     var options= {
     };

     var chart = new Chart(ctx).Line(data,options);
   });
  })();
  </script>

</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Contador de Downloads de recurso do GBIF</title>
	</head>
	<body>

	<canvas id="myChart" width="700" height="300"></canvas>

	<script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
	<script src="//cdn.jsdelivr.net/chart.js/1.0.2/Chart.min.js" type="text/javascript"></script>

	<script type="text/javascript">
	// biblioteca de gráficos
	// http://www.chartjs.org/docs/#line-chart-introduction
	(function(){
	//Carregar os dados crus
	$.getJSON('http://api.gbif.org/v1/occurrence/download/dataset/4300f8d5-1ae5-49e5-a101-63894b005868?limit=200&callback=?',function(response){

	// contador por dia
	var contador ={};

	// para cada resultado
	for(var i=0;i<response.results.length;i++) {
	// os dados do download
	var download = response.results[i].download;
	var data = new Date(download.created); // data do download
	var dataSimples = data.getFullYear()+"-"+("0"+ data.getMonth() ).slice(-2)+"-"+("0"+ data.getDate() ).slice(-2); // data formatada

	// inicia o contador para a data caso não exista
	if(typeof contador[dataSimples] != 'number') contador[dataSimples] = 0;

	// incrementa o contador
	contador[dataSimples]++;
	}

	// Elemento Canvas a Desenhar
	var ctx = document.getElementById("myChart").getContext("2d");

	// separa os dias
	var dias = [];
	for(var dia in contador) {
	console.log(dia);
	dias.push(dia);
	if(dias.length==8) break; // oito dias
	}
	dias.sort()

	// separa contagens, na mesma ordem da lista de dias
	var contagens = []
	for(var i=0;i<dias.length;i++) {
	contagens.push(contador[dias[i]]);
	}

	var data = {
	labels: dias,// dias como eixo X
	datasets:[
	{
	label:"Número de downloads",
	data: contagens, // contagens como eixo Y
	// formatação abaixo
	fillColor: "rgba(151,187,205,0.2)",
	strokeColor: "rgba(151,187,205,1)",
	pointColor: "rgba(151,187,205,1)",
	pointStrokeColor: "#fff",
	pointHighlightFill: "#fff",
	pointHighlightStroke: "rgba(151,187,205,1)"
	}
	]
	};

	// outras opções de charting
	var options= {
	};

	var chart = new Chart(ctx).Line(data,options);
	});
	})();
	</script>

	</body>
	</html>