Send values from arduino to Highcharts
Question
I am trying to send data from my arduino to Highcharts via ethernet following this two tutorials: 1. http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/SD-card-gauge/ 2. Highcharts live data
As I am very new to javascript could someone explain to me what this code does:
var series = chart.series[0] //(what is series[0]??? What is the "[0]" for?)
Here I am sending also 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 is
// longer than 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 just a value eg 22. The result is that Highcharts behave erratically with no values displayed on it . (although the chart is rolling with time passing by on x-axis).
What could be wrong on this code?
Any help would be much appreciated!
Thank you in advance!
2 answers
solution1
1 ACCPTED 2013-12-03 09:59:43
Most probably you have in console some information from Highcharts, and this looks like you are passing strings to data, while only numbers are expected. Try this:
var analog = parseFloat(this.responseText); //or parseInt(this.responseText, 10) for integers
solution2
0 2013-12-02 19:16:52
First off -- you call the GetArduinoInputs on loads TWICE. Notice, you have an onload in the body tag as well as a load event in highcharts. Choose one or the other (the highcharts load event is preferable. just remove the onload from your body tag). This might just fix your problem.
If not......
Have you verified the arduino is actually responding with a value?
Add console.log(analog)
After
if (this.responseText != null) {
var analog = this.responseText;
Then open your browsers console (f12 on most browsers) and watch the console. You should get the value from the arduino spit out every second.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.