Skip to content

Instantly share code, notes, and snippets.

@auremoser

auremoser/README.md

Last active October 29, 2016 22:44
Show Gist options
  • Save auremoser/a24732244e884e9baf47d79b646bfd8e to your computer and use it in GitHub Desktop.
Save auremoser/a24732244e884e9baf47d79b646bfd8e to your computer and use it in GitHub Desktop.
Download ZIP
Flooding Highcharts
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Flooding Events2016-2045</title>
<!-- Load JQuery -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<h2>Flooding Events in the United States, Present to 2045</h2>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Flooding events in the US: Today and in 2045'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 400,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Washington, DC',
'Atlantic City, NJ',
'Cambridge, MA',
'Philadelphia, PA',
'Miami, FL',
'Kings Poitn, NY',
'Boston, MA'
],
plotBands: [{ // visualize the countries
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Events per year'
}
},
tooltip: {
shared: true,
valueSuffix: ' events'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.7
}
},
series: [{
name: '2045',
data: [400, 250, 240, 165, 180, 140, 70]
}, {
name: 'Present',
data: [50, 45, 30, 25, 20, 30, 18]
}]
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment