Skip to content

Instantly share code, notes, and snippets.

@flunky

flunky/index.html

Created March 24, 2017 23:18
Show Gist options
  • Save flunky/68d6a6fbc320043f36b36457f449178f to your computer and use it in GitHub Desktop.
Save flunky/68d6a6fbc320043f36b36457f449178f to your computer and use it in GitHub Desktop.
Download ZIP
Javascript SVG Bar Chart
Raw
index.html
<!DOCTYPE html>
<style> .chart rect { fill: steelblue } </style>
<html><body>
<p>Here are the magic numbers from Lost: <span id="data"></span></p>
<svg class="chart" width="120" height="500">
<rect id="bar-1"></rect>
<rect id="bar-2"></rect>
<rect id="bar-3"></rect>
<rect id="bar-4"></rect>
<rect id="bar-5"></rect>
</svg>
<script>
var data = [4.8,15,16,23,42];
document.getElementById("data").innerHTML = data;
for (var i=0; i < data.length; i++) {
var id = "bar-" + (i+1);
var rectobj = document.getElementById(id);
rectobj.setAttribute("width",19);
rectobj.setAttribute("height",10*data[i]);
rectobj.setAttribute("x",20*i);
rectobj.setAttribute("y",+420 - rectobj.getAttribute("height"));
}
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment