Skip to content

Instantly share code, notes, and snippets.

@jashcny

jashcny/index.html

Last active October 14, 2016 15:56
Show Gist options
  • Save jashcny/9fbd9828d36745fcb7c0 to your computer and use it in GitHub Desktop.
Save jashcny/9fbd9828d36745fcb7c0 to your computer and use it in GitHub Desktop.
Download ZIP
Week 2: Toggle
Raw
index.html
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Toggle</title>
<!-- Code example for class extracted from http://datatools.urban.org/Features/wealth-inequality-charts/ with code from Tim Meko and Ben Chartoff -->
<style>
body {
font: 16px/24px'Lato', Helvetica, Helvetica Neue, Arial;
width: 90%;
}
.aside-content {
background: #f9f9f9;
margin: 20px;
width: 800px;
}
.btn {
display: inline;
font-size: 14px;
padding: 14px;
cursor: pointer;
border: none;
color: white;
background-color: #1696d2;
display: block;
line-height: 12px;
text-transform: uppercase;
text-align: center;
float: right;
margin: 5px;
}
.chart {
margin: 0 auto;
margin-top: 0px;
position: relative;
width: 800px;
height: 70%;
}
.btn:hover {
background-color: #000;
}
.clearfix:before,
.clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.hide {
display: none;
}
.show {
display: block;
}
a {
color: rgb(103, 103, 103);
}
a:hover {
color: rgb(233, 42, 58);
}
b {
color:rgb(103, 103, 103);
}
</style>
</head>
<body>
<div class='aside-content'>
<div class='btn-group clearfix'>
<button id='racegap' class='btn autocompare'>Show Total Consumption</button>
</div>
<!-- both of the charts are here - we use show/hide to toggle which is visible. -->
<div id='total-meat-consumption' class='chart show'></div>
<div id='per-capital-consumption' class='chart hide'></div>
<p class='chart-notes'><b>Source:</b><a href="http://www.fapri.iastate.edu/tools/outlook.aspx"> Food and Agricultural Policy Research Institute (2010).</a></p>
</div>
</body>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.min.js'></script>
<script type='text/javascript' src='https://code.highcharts.com/highcharts.js'></script>
<script type='text/javascript'>
// style theme
Highcharts.theme = {
colors: ['#0096d2', '#00578b', '#fcb918', '#f47d20', '#6d6d6d', '#c6c6c6', '#ec008c',
'#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
chart: {
backgroundColor: null,
style: {
fontFamily: 'Lato, sans-serif'
},
marginTop: 0,
marginBottom: 40
},
title: {
style: {
fontSize: '18px',
color: '#5a5a5a'
},
align: 'left'
},
tooltip: {
backgroundColor: '#000000',
borderWidth: 0,
shape: 'square',
style: {
color: '#ffffff',
fontWeight: 'bold'
}
},
subtitle: {
align: 'left'
},
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
gridLineWidth: 0,
gridLineColor: 'rgba(219,219,216,0.5)',
labels: {
style: {
fontSize: '12px'
}
},
tickmarkPlacement: 'on'
},
yAxis: {
minorTickInterval: 'none',
gridLineColor: 'rgba(219,219,216,0.5)',
title: {
},
labels: {
style: {
fontSize: '12px'
}
}
},
plotOptions: {
candlestick: {
lineColor: '#404048'
},
area: {
fillOpacity: 0.5
},
series: {
marker: {
enabled: false,
radius: 3,
lineWidth: 2,
symbol: 'circle',
fillColor: '#ffffff',
lineColor: null
},
connectNulls: true
}
},
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
$(function() {
// 2 charts created
//chart5-mean
$('#total-meat-consumption').highcharts({
chart: {
marginTop: 100,
marginBottom: 40
},
plotOptions: {
series: {
marker: {
enabled: true
},
dataLabels: {
enabled: false,
align: 'right',
x: 0,
y: -5,
formatter: function () {
if ((this.point.x == this.series.data.length - 1) || (this.point.x == 0)) {
return '$' + Highcharts.numberFormat(this.y, 0, ',');
} else {
return null;
}
}
}
}
},
title: {
text: 'Total meat consumption in 2010'
},
subtitle: {
text: '',
x: 0,
y: 35
},
xAxis: {
gridLineWidth: '0',
lineWidth: 2,
tickInterval: 0,
categories: ['United States','China', 'Russia', 'Mexico','Europe Union','Japan','South Korea','Brazil'],
plotLines: [{
value: 0,
width: 0
}],
labels: {
step: 0,
x: 0,
y: 20
}
},
yAxis: {
title: {
text: '(Thousand Metric Tons)'
},
min: 0,
startOnTick: false,
},
tooltip: {
shared: true,
formatter: function () {
var s = '';
$.each(this.points, function () {
s += '<b>' + this.series.name + ':</b> ' +
Highcharts.numberFormat(this.y, 0, ',') + ' '+'(Thousand Metric Tons)'+ '<br>';
});
return s;
}
},
credits: {
enabled: false,
text: '',
href: 'http://www.neighborhoodinfodc.org'
},
legend: {
enabled: true,
floating: 'true',
align: 'center',
verticalAlign: 'left',
layout: 'horizontal',
borderWidth: 0,
itemDistance: 9,
y: 40
},
series: [
{
name: 'Beef and veal',
data: [11865,5528,2235,2006,8200,1207,625,8008],
},
{
name: 'Pork',
color: '#ec008c',
data: [13631,8464,2110,2717,8102,1364,836,11395],
}]
}); //end chart racial weawlth gap
// this one is hidden by default:
//chart5-median
$('#per-capital-consumption').highcharts({
chart: {
marginTop: 100,
marginBottom: 40
},
plotOptions: {
series: {
marker: {
enabled: true
},
dataLabels: {
enabled: false,
align: 'right',
x: 0,
y: -5,
formatter: function () {
if ((this.point.x == this.series.data.length - 1) || (this.point.x == 0)) {
return '$' + Highcharts.numberFormat(this.y, 0, ',');
} else {
return null;
}
}
}
}
},
title: {
text: 'Per capita meat consumption in 2010'
},
subtitle: {
text: '',
x: 0,
y: 35
},
xAxis: {
gridLineWidth: '0',
lineWidth: 2,
tickInterval: 0,
categories: ['United States', 'China', 'Russia', 'Mexico','Europe Union','Japan','South Korea','Brazil'],
plotLines: [{
value: 0,
width: 0
}],
labels: {
step: 0,
x: 0,
y: 20
}
},
yAxis: {
title: {
text: '(Kilograms)'
},
min: 0,
startOnTick: false,
},
tooltip: {
shared: true,
formatter: function () {
var s = '';
$.each(this.points, function () {
s += '<b>' + this.series.name + ':</b> ' +
Highcharts.numberFormat(this.y, 0, ',')+' '+'(Kilograms)' + '<br>';
});
return s;
}
},
credits: {
enabled: false,
text: '',
href: 'http://www.neighborhoodinfodc.org'
},
legend: {
enabled: true,
floating: 'true',
align: 'center',
verticalAlign: 'left',
layout: 'horizontal',
borderWidth: 0,
itemDistance: 9,
y: 40
},
series: [
{
name: 'Beef and veal',
data: [38.2,4.2,16,17.8,16.4,9.5,12.9,39.8],
},
{
name: 'Pork',
color: '#ec008c',
data: [27.4,37.6,22.4,15.7,41.2,19.2,31.3,13.3],
}]
}); //end chart racial weawlth gap
// Handle the toggle button with class setting:
document.getElementById( 'per-capital-consumption').className = 'chart hide';
$('#racegap').click(function () {
var racegap = document.getElementById('total-meat-consumption');
if (racegap.className === 'chart show') {
document.getElementById('total-meat-consumption').className = 'chart hide';
document.getElementById('per-capital-consumption').className = 'chart show';
document.getElementById('racegap').innerHTML = 'Show Total Consumption'
} else {
document.getElementById('racegap').innerHTML = 'Show Per Capital consumption'
document.getElementById('per-capital-consumption').className = 'chart hide';
document.getElementById('total-meat-consumption').className = 'chart show';
}
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment