Transmit data from an Arduino board to Highcharts for visualization

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!

Answer №1

Chances are, you may be seeing data related to Highcharts in the console, and it seems like you're providing strings instead of numbers for the data when only numbers should be used. You can try the following solution:

let value = parseFloat(this.responseText); //or parseInt(this.responseText, 10) for whole numbers

Answer №2

Firstly, it appears that the GetArduinoInputs function is being called twice upon loading. You have an onload in the body tag and a load event in highcharts. It is recommended to choose one method (preferably the highcharts load event) and remove the onload from the body tag. This could potentially resolve your issue.

If not resolved...

Have you confirmed that the Arduino is indeed sending a response?

Try adding console.log(analog)

After

if (this.responseText != null) {
var analog = this.responseText;

Then open the browser console (usually accessed by pressing f12) and monitor the output. The value from the Arduino should be displayed every second.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the relationship between two collections in Meteor, specifically using MongoDB for querying by value

Currently, I am developing a social media platform similar to Twitter but have encountered an issue with sorting. Below are the collections I am working with: Tweets: createdAt: Date body: String userId: String Events: createdAt: Date ...

Replacing an existing pie chart with a new one using JavaScript

I created pie charts using chartjs V2.6.0, and everything was working fine until I encountered an issue. Whenever I input new data into the same chart, it keeps displaying the previous data when hovering over. I attempted to fix this by using the $('# ...

JavaScript, the art of escaping strings

I am dealing with the following string: 'You've just created' When I store this string in a JavaScript variable, it is seen as 2 separate strings due to the presence of a ' character. Is there a way to properly escape it? ...

Experimenting with HttpClient request using callFake() method

I am currently facing a challenge while trying to devise a spec for testing a method within my Angular service that initiates a GET request. The main issue I'm encountering is how to simulate the method returning an error instead of the expected respo ...

Transforming a cURL command into an HTTP POST request in Angular 2

I am struggling to convert this cURL command into an angular 2 post request curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic cGJob2xlOmlJelVNR3o4" -H "Origin: http://localhost:4200/form" -H "Postman-Token: fbf7ed ...

DataGrid Component: Implementing a Button for Deleting Rows

I am currently developing a React component with MaterialUI, incorporating a Datagrid to manage a queue of files. The layout resembles this: https://i.sstatic.net/oh0GH.png One functionality I'm focusing on is when the user clicks on the three dots a ...

Disable infinite scrolling when a checkbox is clicked

Currently, I have implemented infinite scrolling on a table and it is functioning properly. <tbody infinite-scroll-disabled="myModule.isScrollingDisabled()" infinite-scroll="myModule.nextPage()" infinate-scroll-immediate-check="false" infinite-scroll-d ...

Troubleshooting Django Templateview: Incorporating Bootstrap Popovers into HTML tables not functioning properly

https://i.stack.imgur.com/LXHJF.pngWhen loading this template, the HTML renders correctly and the table loads successfully. However, certain cells have special pop-over attributes that do not work after the HTML is loaded via an AJAX request on the same pa ...

saving user information with asynchronous HTTP calls

I am encountering an issue while trying to save my form data using AJAX. When I submit the form data in a JavaScript file that calls another PHP file to perform an insertion operation, an error occurs. Here is the code snippet: <button id="submit" cl ...

Breaking the link

My tabulator column contains text with line breaks that are displayed properly. However, when I use the built-in URL formatter, the line breaks disappear. {title:"Title", field:"title", formatter:"textarea"}, https://i.sstatic.net/N8XZP.png I attempted ...

Combine 2 columns in a Google Sheets document

I have a task to combine columns A and B in my spreadsheet Column A contains all the dates of the year While column B lists names of different countries Essentially, I am looking for a formula that would pair each country with each date throughout the y ...

Tips for controlling a "collapsed" state for every intricately nested node within a tree

My data structure is complex and dynamic, illustrated here: const tree = [ { name: "Root Node", collapsed: true, nodes: [ { name: "Node 1", collapsed: true, nodes: [ { name: "Sub node" ...

Discovering the function invoker when in strict mode

I am facing a challenge in my Angular controller where I have a function called getGames() that can be triggered by both the init() and update() functions. The issue is, I need to handle these two scenarios differently based on which function called getGam ...

Elevating State in React Architecture

Recently, I delved into the React documentation on lifting state up and found this helpful resource. In one of my projects, I encountered a similar issue with a slight twist. Instead of dealing with <TemperatureInput />, I had to work with <Senso ...

What is the best way to trigger a mongoose post hook from a separate JavaScript file or function?

I've been working with a location.model.js file that looks like this: 'use strict'; var mongoose = require('mongoose'), Schema = mongoose.Schema; var LocationsSchema = new Schema({ name: String, description: String, country_i ...

The $digest method is refreshing the main $rootScope parent

I'm having trouble grasping the concept of how $digest functions. I came across a response on Angular $scope.$digest vs $scope.$apply that explains it as follows: " $digest() will update the current scope and any child scopes. $apply() will update ev ...

Prevent users from selecting elements on the mobile site

Hey there! I'm currently working on preventing users from selecting items on my mobile site. While I've been successful in doing so on a regular website using the CSS class below .unselectable { -moz-user-select: -moz-none; -khtml-user-s ...

Tips on extracting code differences from code inspector

Utilizing the Chrome code inspector is extremely valuable, but I often find it challenging to track the modifications made to CSS and HTML live. This becomes particularly cumbersome when there are multiple tags being modified. Are there any Chromium exten ...

The architecture of Angular controllers

Being a novice in AngularJs, I have a query regarding the controller structure. This particular file is my employeeController.js (function() { angular.module('employeeApp').controller('employeeController', employeeCont ...

Separate a tab delimited text file and store it into an array using JavaScript

Looking to parse a text file with tab-separated values in JavaScript and add them to an array? Here's how you can achieve this while excluding the header: Id Symbol 1 A 2 B 3 C 4 D 5 E 6 F 7 G This is what I have attempted so far: va ...