Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Last active January 14, 2024 15:53
Show Gist options
  • Save ramiroaznar/4946cb672b1cd00650b6246b0524e57f to your computer and use it in GitHub Desktop.
Save ramiroaznar/4946cb672b1cd00650b6246b0524e57f to your computer and use it in GitHub Desktop.
CARTO.js + Highchart.js
<!DOCTYPE html>
<html>
<head>
<title>CARTO.js + Highchart.js</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" />
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0
}
#container{
position: absolute;
top: 20px;
left: 20px;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<div id="container"></div>
<div class='cartodb-legend category'>
<div class="legend-title" style="color:#284a59">Partidos</div>
<ul>
<li><div class="bullet" style="background-color:#FF9900"></div>C's</li>
<li><div class="bullet" style="background-color:#FFCC00"></div>DL</li>
<li><div class="bullet" style="background-color:#B2DF8A"></div>EAJ-PNV</li>
<li><div class="bullet" style="background-color:#33A02C"></div>EH Bildu</li>
<li><div class="bullet" style="background-color:#7B00B4"></div>En Comú</li>
<li><div class="bullet" style="background-color:#E31A1C"></div>ERC-CATSI</li>
<li><div class="bullet" style="background-color:#3B007F"></div>Podemos</li>
<li><div class="bullet" style="background-color:#3E7BB6"></div>PP</li>
<li><div class="bullet" style="background-color:#F84F40"></div>PSOE</li>
<li><div class="bullet" style="background-color:#A53ED5"></div>Podemos-Compromís</li>
</ul>
</div>
<script type="text/sql" id="query">
SELECT * FROM elections_2015 WHERE comunidad <> 'Islas Canarias'
</script>
<script type="text/cartocss" id="style">
#layer {
line-color: #FFF;
line-width: 0.25;
line-opacity: 0.5;
polygon-gamma: 0.5;
polygon-fill: #ff9900;
polygon-opacity: ramp([pop_density], (0.5, 1), jenks);
polygon-fill: ramp([partido_ga], (#3e7bb6, #f84f40, #ffcc00, #850200, #7b00b4, #3b007f, #B2DF8A, #33A02C, #a53ed5), category(9));
}
</script>
<!-- include cartodb.js library -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script type="text/javascript">
function main() {
var query = $("#query").text();
style = $("#style").text();
// create map object
var map = L.map('map', {
zoomControl: false,
center: [40, -3],
zoom: 7
});
// add basemap
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">CARTO</a>'}).addTo(map);
// add layer
cartodb.createLayer(map, {
user_name: 'ramirocartodb',
type: 'cartodb',
sublayers: [{
sql: query,
cartocss: style
}]
}).addTo(map)
.done(function(layer){
var sublayer = layer.getSubLayer(0);
sublayer.setInteractivity("nombre, participac, edad_media");
sublayer.setInteraction(true);
// get data from feature selected
sublayer.on('featureClick', function(e, latlng, pos, data) {
var municipio = data.nombre,
participacion = data.participac,
edad = data.edad_media;
// Highcharts section
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Elecciones 2015'
},
subtitle: {
text: 'Source: <a href="http://www.ine.es/">INE</a>'
},
xAxis: {
categories: [municipio],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Porcentaje de votos / Edad Media',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 60,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: "Participación",
data: [participacion]
}, {
name: "Edad media",
data: [edad]
}]
});
});
});
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment