Skip to content

Instantly share code, notes, and snippets.

@alex-hofsteede

alex-hofsteede/sparkline.html

Created January 13, 2015 19:54
Show Gist options
  • Save alex-hofsteede/d87f1575709d43b7ff9f to your computer and use it in GitHub Desktop.
Save alex-hofsteede/d87f1575709d43b7ff9f to your computer and use it in GitHub Desktop.
Download ZIP
Simple Sparkline
Raw
sparkline.html
<html>
<head>
<style>
path.sparkfill {
fill:#c0d0f0;
}
path.sparkstroke {
stroke:#0000f0;
stroke-width:1px;
fill:none;
}
</style>
</head>
<body>
<svg id="sparkline" width="100px" height="20px">
<path class="sparkfill"/>
<path class="sparkstroke"/>
</svg>
</body>
<script>
function sparkline(values) {
var sparkline = document.getElementById("sparkline");
var limits = [Math.max(0, Math.min.apply(this, values) - 1), Math.max.apply(this, values) + 1];
var scale = Math.pow(10, Math.floor(Math.log10(limits[1] - limits[0])));
var domain = [Math.floor(limits[0] / scale) * scale, Math.ceil(limits[1] / scale) * scale];
var range = [sparkline.clientHeight, 0];
var step = sparkline.clientWidth / Math.max(values.length - 1, 1)
path = values.map(function (v, i) { return "L" + (i * step) + "," + (((v - domain[0]) / (domain[1] - domain[0]) * (range[1] - range[0])) + range[0]) ;}).join()
sparkline.getElementsByTagName('path')[1].setAttribute("d", "M" + path.substring(1));
path = "M0," + range[0] + path + "L" + sparkline.clientWidth + "," + range[0] + "L0," + range[0]
sparkline.getElementsByTagName('path')[0].setAttribute("d", path);
}
sparkline([10,2,1,6,3,10,5,2,8,20,0,0,1,0]);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment