123 lines
3.5 KiB
HTML
123 lines
3.5 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Stat delay</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.5.0/bootstrap-table.min.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
<script src="http://code.highcharts.com/highcharts.js"></script>
|
|
<script src="http://code.highcharts.com/modules/exporting.js"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
console.log('load');
|
|
var seriesOptions = [];
|
|
var createChart = function(){
|
|
console.log('create');
|
|
$('#container').highcharts({
|
|
chart: {
|
|
type: 'scatter',
|
|
zoomType: 'xy'
|
|
},
|
|
title: {
|
|
text: 'Time to heat or cool vs outside temperature'
|
|
},
|
|
subtitle: {
|
|
text: 'Because science'
|
|
},
|
|
xAxis: {
|
|
title: {
|
|
enabled: true,
|
|
text: 'Minutes per degree change'
|
|
},
|
|
startOnTick: true,
|
|
endOnTick: true,
|
|
showLastLabel: true
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Outside temp'
|
|
}
|
|
},
|
|
legend: {
|
|
layout: 'vertical',
|
|
align: 'left',
|
|
verticalAlign: 'top',
|
|
x: 100,
|
|
y: 70,
|
|
floating: true,
|
|
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
|
|
borderWidth: 1
|
|
},
|
|
plotOptions: {
|
|
scatter: {
|
|
marker: {
|
|
radius: 5,
|
|
states: {
|
|
hover: {
|
|
enabled: true,
|
|
lineColor: 'rgb(100,100,100)'
|
|
}
|
|
}
|
|
},
|
|
states: {
|
|
hover: {
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
headerFormat: '<b>{series.name}</b><br>',
|
|
pointFormat: '{point.x} min per degree, {point.y} degrees'
|
|
}
|
|
}
|
|
},
|
|
series: seriesOptions,
|
|
|
|
});
|
|
}
|
|
$.getJSON('delay.php', function (data) {
|
|
console.log("data");
|
|
seriesOptions[0] = {
|
|
name: "Heat, Heating",
|
|
data: data[0]
|
|
};
|
|
seriesOptions[1] = {
|
|
name: "Heat, down",
|
|
data: data[1]
|
|
};
|
|
|
|
createChart();
|
|
|
|
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
<body>
|
|
<!-- Fixed navbar -->
|
|
<nav class="navbar navbar-inverse">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<a class="navbar-brand" href="#">Stat stats</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="graph.html">Graph</a></li>
|
|
<li class="active"><a href="delay.html">Delay</a></li>
|
|
</ul>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</nav>
|
|
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
|
|
|
|
|
|
|
|
</body></html> |