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 e.g 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!

chart.series[0] is the first element in the series array. If you have only one series of data in the chart, this would be it. If you have multiple series of data they would be chart.series[0], chart.series[1], etc. — John Chrysostom
– John Chrysostom, Commented Dec 2, 2013 at 19:02

Paweł Fus · Accepted Answer · 2013-12-03 09:59:43Z

1

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

answered Dec 3, 2013 at 9:59

Paweł Fus

45.1k3 gold badges65 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jordan C. · Accepted Answer · 2013-12-02 19:16:52Z

0

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.

answered Dec 2, 2013 at 19:16

Jordan C.

547 bronze badges

4 Comments

atomtm Over a year ago

Ok I will try console.log(analog) as soon I get home.Thank you!

Paweł Fus Over a year ago

What is wrong with calling two loads on document? As I know, it's not a problem, as long as it's expected. Note, he is calling two different functions in loads. Any reference for that?

Jordan C. Over a year ago

Pawel Fus' answer is most likely your problem. He is correct — a point expects a number as second value not a string. see this fiddle for example: jsfiddle.net/Kd29H

atomtm Over a year ago

I just tried it out and worked.var analog=parseInt(this.responseText,10) was the solution.Thank you all! Great Help!

Collectives™ on Stack Overflow

Send values from arduino to Highcharts

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related