Skip to content

Instantly share code, notes, and snippets.

@auremoser

auremoser/README.md

Last active August 29, 2015 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save auremoser/9fe84c3f845ea535e7cc to your computer and use it in GitHub Desktop.
Save auremoser/9fe84c3f845ea535e7cc to your computer and use it in GitHub Desktop.
Download ZIP
Dowsing x County Chart
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>% Aqua </title>
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.13/cartodb.js"></script>
<style>
canvas {
height: 500px;
margin: 5px;
width: 900px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var sql = cartodb.SQL({ user: 'aureliamoser' });
sql.execute("SELECT *, ceil(100 * awater / ST_Area(the_geom::geography)) perc_water FROM tl_2014_us_county LIMIT 10")
.done(function(data) {
console.log(data);
var total = [];
var labels = [];
for (i in data.rows) {
total.push(data.rows[i].perc_water);
labels.push(data.rows[i].namelsad);
}
console.log(data);
var lineChartData = {
labels : labels,
datasets : [
{
barDatasetSpacing : 0,
barValueSpacing : 0,
fillColor : "#41b6c4",
strokeColor : "#005824",
tooltipFillColor: "rgba(0,0,0,0.8)",
pointColor : "#005824",
pointStrokeColor : "#fff",
data : total
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment