Skip to content

Instantly share code, notes, and snippets.

@Pabloska

Pabloska/index.html

Created March 6, 2017 10:23
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 Pabloska/de731b8797c72384fb4fe9ac348f73f1 to your computer and use it in GitHub Desktop.
Save Pabloska/de731b8797c72384fb4fe9ac348f73f1 to your computer and use it in GitHub Desktop.
Download ZIP
Time series ; Carto'js+highcharts
Raw
index.html
<!doctype html>
<html>
<head>
<!-- include cartodb.js CSS library -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style>
canvas{
}
</style>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
var sql = cartodb.SQL({ user: 'migrantreport' });
sql.execute("SELECT date,SUM (deaths_mis) deaths_mis FROM iom_world_deaths_copy GROUP BY date order BY date asc")
.done(function(data) {
console.log(data)
var date = [];
var deaths_mis = [];
for (i in data.rows){
date.push(data.rows[i].date)
deaths_mis.push(data.rows[i].deaths_mis)
}
console.log(data)
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Migrant Deaths'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Deaths'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Migrant Deaths',
//HOW CAN I USE THE DATA FROM CARTO.JS??? (THE SQL QUERY ABOVE RETURNS DATE AND VALUE)
data: [
[Date.UTC(2013,5,5),0.7638],
[Date.UTC(2013,5,6),0.7549],
[Date.UTC(2013,5,7),0.7562],
[Date.UTC(2013,5,9),0.7574],
[Date.UTC(2013,5,10),0.7543],
[Date.UTC(2013,5,11),0.7510],
[Date.UTC(2013,5,12),0.7498],
[Date.UTC(2013,5,13),0.7477],
[Date.UTC(2013,5,14),0.7492],
[Date.UTC(2013,5,16),0.7487],
]
}]
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment