I've been attempting to transfer data from my Arduino to Highcharts via Ethernet by following these two tutorials: 1. Arduino Ethernet Shield Web Server Tutorial 2. Highcharts Live Data Tutorial
Since I'm fairly new to JavaScript, can someone explain what this code snippet does:
var series = chart.series[0] //(What does series[0] represent? What is the "[0]" for?)
Additionally, here's my modified index file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Arduino SD Card Web Page using Ajax</title>
<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>
<script>
var chart;
function GetArduinoInputs()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseText != null) {
var analog = this.responseText;
var d = new Date();
var date = d.getTime();
var point = [date, analog];
var series = chart.series[0],
shift = series.data.length > 20; // Shift if the series length exceeds 20
// Add the point
chart.series[0].addPoint(point, true, shift);
}
}
}
}
request.open("GET", "ajax_inputs" + nocache, true);
request.send(null);
setTimeout('GetArduinoInputs()', 1000);
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: GetArduinoInputs
}
},
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 onload="GetArduinoInputs()">
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
<div style="width: 800px; margin: 0 auto"></div>
</body>
</html>
My Arduino is sending a single value, e.g., 22. However, the issue arises as Highcharts seems to behave erratically with no values displayed on it (though the chart continues rolling with time on the x-axis).
Any insights on what might be wrong with this code?
Your help would be greatly appreciated!
Thank you in advance!