Skip to content

Instantly share code, notes, and snippets.

@hgcummings

hgcummings/results.html

Last active August 29, 2015 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hgcummings/637c20d92abf2cfbaed8 to your computer and use it in GitHub Desktop.
Save hgcummings/637c20d92abf2cfbaed8 to your computer and use it in GitHub Desktop.
Download ZIP
hypermeter graphs with Chart.js
Raw
results.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<style>
body {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
#legend li {
list-style-type: none;
}
#legend li span {
width: 2em;
height: 0.2em;
border-radius: 0.1em;
display: inline-block;
margin-bottom: 0.2em;
margin-right: 0.5em;
}
</style>
</head>
<body>
<canvas id="chart" width="1200" height="640"></canvas>
<div id="legend"></div>
<script type="text/javascript">
var req = new XMLHttpRequest();
req.onload = function() {
var data = JSON.parse(req.responseText);
data.datasets.forEach(function(dataset, index) {
var hue = 360 * (index+0.5) / data.datasets.length;
dataset.strokeColor = dataset.pointColor = "hsl(" + hue + ", 50%, 50%)";
});
var ctx = document.getElementById("chart").getContext("2d");
var lineChart = new Chart(ctx).Line(data, { datasetFill : false });
document.getElementById("legend").innerHTML = lineChart.generateLegend();
}
req.open('GET', '/chart.json', true);
req.send();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment