Samples: Updated and moved studies/live-data to samples

rikapo · Jun 23, 2020 · 53906a3 · 53906a3
1 parent 59e44fb
commit 53906a3
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 88 deletions.
diff --git a/samples/highcharts/data/livedata-fetch/demo.details b/samples/highcharts/data/livedata-fetch/demo.details
@@ -0,0 +1,8 @@
+---
+ name: Highcharts Demo
+ authors:
+   - Torstein Hønsi
+   - Gøran Slettemark
+ requiresManualTesting: true
+ js_wrap: b
+...
diff --git a/samples/highcharts/data/livedata-fetch/demo.html b/samples/highcharts/data/livedata-fetch/demo.html
@@ -0,0 +1,3 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+
+<div id="container"></div>
diff --git a/samples/highcharts/data/livedata-fetch/demo.js b/samples/highcharts/data/livedata-fetch/demo.js
@@ -0,0 +1,53 @@
+let chart; // global
+
+/**
+ * Request data from the server, add it to the graph and set a timeout to request again
+ */
+async function requestData() {
+    const result = await fetch('https://demo-live-data.highcharts.com/time-rows.json');
+    if (result.ok) {
+        const data = await result.json();
+
+        const [date, value] = data[0];
+        const point = [new Date(date).getTime(), value * 10];
+        const series = chart.series[0],
+            shift = series.data.length > 20; // shift if the series is longer than 20
+
+        // add the point
+        chart.series[0].addPoint(point, true, shift);
+        // call it again after one second
+        setTimeout(requestData, 1000);
+    }
+}
+
+window.addEventListener('load', function () {
+    chart = new Highcharts.Chart({
+        chart: {
+            renderTo: 'container',
+            defaultSeriesType: 'spline',
+            events: {
+                load: requestData
+            }
+        },
+        title: {
+            text: 'Live random data'
+        },
+        xAxis: {
+            type: 'datetime',
+            tickPixelInterval: 150,
+            maxZoom: 20 * 1000
+        },
+        yAxis: {
+            minPadding: 0.2,
+            maxPadding: 0.2,
+            title: {
+                text: 'Value',
+                margin: 80
+            }
+        },
+        series: [{
+            name: 'Random data',
+            data: []
+        }]
+    });
+});
diff --git a/studies/live-server.htm b/studies/live-server.htm
@@ -3,95 +3,8 @@
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 		<title>Highcharts Example</title>
-
-
-		<!-- 1. Add these JavaScript inclusions in the head of your page -->
-		<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>
-		<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
-
-
-		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
-		<script>
-		var chart; // global
-
-		/**
-		 * Request data from the server, add it to the graph and set a timeout to request again
-		 */
-		function requestData() {
-			$.ajax({
-				url: 'live-server-data.php', 
-				success: function(point) {
-					var series = chart.series[0],
-						shift = series.data.length > 20; // shift if the series is longer than 20
-
-					// add the point
-					chart.series[0].addPoint(eval(point), true, shift);
-
-					// call it again after one second
-					setTimeout(requestData, 1000);	
-				},
-				cache: false
-			});
-		}
-
-		$(document).ready(function() {
-			chart = new Highcharts.Chart({
-				chart: {
-					renderTo: 'container',
-					defaultSeriesType: 'spline',
-					events: {
-						load: requestData
-					}
-				},
-				title: {
-					text: 'Live random data'
-				},
-				xAxis: {
-					type: 'datetime',
-					tickPixelInterval: 150,
-					maxZoom: 20 * 1000
-				},
-				yAxis: {
-					minPadding: 0.2,
-					maxPadding: 0.2,
-					title: {
-						text: 'Value',
-						margin: 80
-					}
-				},
-				series: [{
-					name: 'Random data',
-					data: []
-				}]
-			});		
-		});
-		</script>
-
 	</head>
 	<body>
-
-		<!-- 3. Add the container -->
-		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
-
-		<div style="width: 800px; margin: 0 auto">
-			<p>This example shows how to run a live chart with data retrieved from the server
-			each second. Study the source code for details.</p>
-			<p>This is the content of the PHP file, <a href="live-server-data.php">
-				live-server-data.php</a>:</p>
-<pre>&lt;?php 
-// Set the JSON header
-header("Content-type: text/json");
-
-// The x value is the current JavaScript time, which is the Unix time multiplied by 1000.
-$x = time() * 1000;
-// The y value is a random number
-$y = rand(0, 100);
-
-// Create a PHP array and echo it as JSON
-$ret = array($x, $y);
-echo json_encode($ret);
-?&gt;</pre>
-
-		</div>
+		This example has been moved to <a href="https://highcharts.com/samples/highcharts/data/livedata-fetch"></a>
 	</body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<script src="https://code.highcharts.com/highcharts.js"></script>

		<div id="container"></div>