Skip to content

Instantly share code, notes, and snippets.

@tanyaschlusser

tanyaschlusser/example.html

Created January 7, 2019 02:04
Show Gist options
  • Save tanyaschlusser/81016e282f31cd2117c791ea6c404d97 to your computer and use it in GitHub Desktop.
Save tanyaschlusser/81016e282f31cd2117c791ea6c404d97 to your computer and use it in GitHub Desktop.
Download ZIP
Toggle between a chart and table showing chart data
Raw
example.html
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<button class="img-table-toggler" id="example_png">Show data</button><br/>
<img src="img/example.png"
class="example_png"
alt="Bar chart of group membership. Click 'Show data' button for table."/>
<table class="example_png" style="display:none">
<tr><th>Group</th><th>Count</th></tr>
<tr><td>Group 1</td><td>1</td></tr>
<tr><td>Group 2</td><td>1</td></tr>
<tr><td>Group 3</td><td>2</td></tr>
<tr><td>Group 4</td><td>3</td></tr>
<tr><td>Group 5</td><td>5</td></tr>
</table>
<script src="img-table-toggler.js"></script>
</body>
</html>
Raw
img-table-toggler.js
Array.from(document.getElementsByClassName("img-table-toggler"))
.forEach(function(toggler) {
toggler.onclick = function(event) {
Array.from(document.getElementsByClassName(event.target.id))
.forEach(function(element) { element.style.display = (element.style.display == "none") ? "inherit" : "none"; });
toggler.innerHTML = (toggler.innerHTML == "Show data") ? "Show chart" : "Show data";
};
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment