hey folks, so I'm working on trying to get a chart up and running that just randomly generates live random values (so I can later put my own values in for an experiment).
Download the entire thing as an html file, and then open that file on my browser, and see the exact same thing.
Whenever I do that, it shows the page I want, but the chart is empty and isn't streaming anything.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- Why is this like this? What's it getting from here that's important? -->
<html>
<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="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="http://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><?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);
?></pre>
</div>
</body>
</html>
I figured maybe there was more code that I was missing, so I inspected each of the elements of the first link, and copy and pasted eeeverything.
Still didn't work. It's pretty long (like endless scrolling) which gives the impression I did something wrong.
But I just don't know enough about it to understand what I'm doing. Anyone notice any glaring errors?