Via een tutorial maakte ik een webpagina aan waarbij de temperatuur in de woonkamer uitgetekend wordt (Via Raspberry Pi). Dit werkt zoals het hoort.
In de originel tutorial zie het er als volgt uit: http://warlord.no-ip.com/index.html
Wat dien in ik mijn HTML code aan te passen zodat mijn Highchart ook naast het menu komt te staan, en niet er onder? Ik kan het maar niet vinden...
Dit is mijn originele HTML code van de pagina:
Code: Selecteer alles
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home Temperatures With RaspberryPi</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="300">
<!-- Le styles -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="index.html">Home Temperatures</a>
<div class="nav-collapse collapse">
<ul class="nav">
<!-- <li class="active"><a href="index.htm">Home</a></li> -->
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Temperature</li>
<li><a href="index.html?3h">Last 3h</a></li>
<li><a href="index.html">Last 24h</a></li>
<li><a href="index.html?48h">Last 2 Days</a></li>
<li><a href="index.html?1w">Last Week</a></li>
<li><a href="index.html?1m">Last Month</a></li>
<li><a href="index.html?3m">Last 3 Month</a></li>
<li><a href="index.html?1y">Last Year</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span10">
<div id="content"></div>
<hr>
<div id="weather" style="margin-left: 20px;"></div>
</div><!--/span-->
</div><!--/row-->
<hr>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.1/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data/temps24h.xml",
dataType: "xml",
success: function(xml) {
Highcharts.setOptions({global:{useUTC:false}});
options={chart:{renderTo:"containerxxx",type:"spline"},title:{text:""},subtitle:{text:""},xAxis:{type:"datetime",dateTimeLabelFormats:{hour:"%H. %M"}},yAxis:{title:{text:"T (°C)"}},tooltip:{formatter:function(){return"<b>"+this.series.name+"</b><br/>"+Highcharts.dateFormat("%H:%M",this.x)+": "+this.y.toFixed(1)+"°C"}},plotOptions:{series:{marker:{radius:2}}},lineWidth:1,series:[]}
var series = []
//alert('start');
//define series
$(xml).find("entry").each(function() {
var seriesOptions = {
name: $(this).text(),
data: []
};
options.series.push(seriesOptions);
});
//alert('finish part 1');
//populate with data
$(xml).find("row").each(function() {
var t = parseInt($(this).find("t").text()) * 1000
$(this).find("v").each(function(index) {
var v = parseFloat($(this).text())
v = v || null
if (v != null) {
//alert('index = ' + index + 'time=' + t + 'v=' + v);
options.series[index].data.push([t, v])
};
});
});
//alert('finish part 2');
options.title.text = "Temperatures of the last 24h"
$.each(series, function(index) {
options.series.push(series[index]);
});
//alert('finish part 3');
chart = new Highcharts.Chart(options);
}
});
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />
<div id="containerxxx" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
