From 82fee97250a1db42969ec3cd17630a72ab5010f0 Mon Sep 17 00:00:00 2001
From: Findus23 <Findus23@users.noreply.github.com>
Date: Sat, 18 Jan 2014 22:35:18 +0100
Subject: [PATCH] Highcharts

---
 Webinterface/highcharts.html | 104 +++++++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 Webinterface/highcharts.html
diff --git a/Webinterface/highcharts.html b/Webinterface/highcharts.html
new file mode 100644
index 0000000..0824beb
--- /dev/null
+++ b/Webinterface/highcharts.html
@@ -0,0 +1,104 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Liniendiagramm</title>
+
+
+		<!-- 1. Add these JavaScript inclusions in the head of your page -->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+		<script type="text/javascript" src="./highcharts.js"></script>
+		<script type="text/javascript" src="./exporting.js"></script>
+
+		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
+		<script type="text/javascript">
+		$(document).ready(function() {
+
+
+			var options = {
+				chart: {
+					renderTo: 'container',
+					type: 'line',
+					zoomType: 'x'
+				},
+				title: {
+					text: 'Überschrift'
+				},
+				xAxis: {
+					categories: [],
+			labels: {
+rotation:90
+}
+},
+				yAxis: {
+					title: {
+						text: 'LOAD'
+					}
+				},
+				tooltip: {
+    				formatter: function() {
+        				return 'Zeit: <b>' + this.x + '</b> <br>Wert: <b>' + this.y + '</b>';
+				    }
+				},
+				series: []
+			};
+
+			/*
+			 Load the data from the CSV file. This is the contents of the file:
+			 
+				Apples,Pears,Oranges,Bananas,Plums
+				John,8,4,6,5
+				Jane,3,4,2,3
+				Joe,86,76,79,77
+				Janet,3,16,13,15
+				
+			 */ 
+			$.get('daten_transformiert.txt', function(data) {
+				// Split the lines
+				var lines = data.split('\n');
+				$.each(lines, function(lineNo, line) {
+					var items = line.split(' ');
+
+					// header line containes categories
+					if (lineNo == 0) {
+						$.each(items, function(itemNo, item) {
+							if (itemNo > 0) options.xAxis.categories.push(item);
+						});
+					}
+
+					// the rest of the lines contain data with their name in the first position
+					else {
+						var series = { 
+							data: []
+						};
+						$.each(items, function(itemNo, item) {
+							if (itemNo == 0) {
+								series.name = item;
+							} else {
+								series.data.push(parseFloat(item));
+							}
+						});
+
+						options.series.push(series);
+
+					}
+
+				});
+
+				var chart = new Highcharts.Chart(options);
+			});
+
+
+		});
+		</script>
+
+	</head>
+	<body>
+
+		<!-- 3. Add the container -->
+
+<div id="container" style="width: 1024px; height: 768px; margin: 0 auto"></div>
+
+
+	</body>
+</html>
