Highcharts data setting failed due to a technical issue

I am facing an issue while trying to populate my highchart with data using a fetch function. The data is not being displayed or set in the chart element.

Below is the fetch function I am using:

fetch("data.csv")
   .then(response => response.text())
   .then((response) => {
       //console.log("d"+response)

       function csvToArray(str, delimiter = ",") {
    let array = str.split("\n").map(function (line) {
        return line.split(delimiter);
    });

    return array;
}


let array = csvToArray(response);

array.splice(0, 1);
array.splice((array.length-1),1)
let string =JSON.stringify(array);
let stringnew = string.replaceAll("\"","");


//console.log(csvToArray(response));
//console.log(csvToArray(response)[0]);
console.log(stringnew);
chart.series[0].setData(stringnew);

   })
   .catch(err => console.log(err))

Additionally, here is the content of my data.csv file:

time,data
1672683118394,12.00
1672683159084,10.00
1672683199305,9.00

Although I can see the correct output in the console:

[[1672683118394,12.00],[1672683159084,10.00],[1672683199305,9.00]]

It seems to follow the Highcharts documentation as far as I can tell. However, the data is still not loading on the chart. Any assistance would be greatly appreciated :)

Answer №1

stringnew is a string and cannot be treated as a JSON object.

To resolve this problem, you can utilize the following code:

JSON.parse(stringnew)

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

Toast isn't displaying the proper style - Next.js

I am currently implementing the react-toastify library. Within my _app.tsx file: import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; ... return ( <AppStateProvider> < ...

Issue connecting to the MongoDB server at 127.0.0.1:27017: Could not establish a connection

Encountering an Error When Trying to Run "mongo" on macOS: ➜ server git:(master) ✗ mongo MongoDB shell version v4.0.4 connecting to: mongodb://127.0.0.1:27017 2018-12-17T17:14:54.659-0800 E QUERY [js] Error: couldn't connect to server 127.0 ...

Is it possible to pass component props to mapGetters in VueX?

Currently, I am in the process of creating a universal input Vue component. My main goal right now is to fetch the initial value from the store before focusing on manipulating the data within the input. Here's what I have so far: This seems to be wor ...

What is the best method for animating a line in THREE.js using TweenLite?

I've been trying to animate a 3D line using THREE.JS and TweenLite. However, the method that usually works well with the position of an object like a sphere is not yielding the desired results in this case. The reason for this discrepancy eludes me. ...

Supervising the clash of schedules between parents and their children's commitments within

Here is a snippet of code for you to examine: <div onmousedown="alert('onmousedown');"> <div onclick="alert('onclick');"></div> </div> I am curious, is it possible to disable the onmousedown event while the ...

encountering plupload issue during file upload

While utilizing the Plupload solution to upload multiple files simultaneously, an error message appears in the browser console: NS_ERROR_DOM_BAD_URI: Access to restricted URI denied The code halts at this point: new n.DOMException(n.DOMException.INVALID_S ...

What are the steps to set a 404 status code in next.js when utilizing ISR with a fallback of "blocking"?

When a route does not match, what is the best way to redirect to a 404 error page and ensure that the status code is displayed as 404 in the network tab using ISR with fallback: "blocking"? ...

Issues with AJAX Load functionality

As a beginner in jQuery, I am experimenting with an AJAX load function. However, I am encountering difficulties in making it work. Despite trying different approaches and file formats (.php, etc.), I ended up using the first method I attempted. My goal is ...

The issue of JavaScript not displaying JSON data has been encountered

I am delving into the world of JSON for the first time and I have a task at hand to display data from this JSON feed on a webpage that is hosted on a different server. After doing some research, I understood that I need to use JSONP. However, my current ...

Looking for assistance in setting up an auto-suggest feature that displays retrieved or matched data from the database in a list format

I am currently facing an issue with the following problem: I have a form that includes a single search field with autosuggest functionality. I want to be able to type either a name or mobile number in this field. As I type, suggestions should appear base ...

I have chosen Next.js for my frontend development, while our backend developer is crafting the API in Express and MySQL. I am looking for ways to secure and protect the

As a beginner frontend developer learning Next.js, I've been tasked with integrating authentication into our app. The backend developer is working on creating the API using Express and MySQL. After successful login, an accessToken is received. However ...

Why does the Next.js GET index request keep fetching multiple times instead of just once?

Currently, I am encountering an issue while working on a tutorial app with Next.js. One of my components is not rendering due to what seems like multiple executions of a simple GET request for an index page. The problem perplexes me, and I need some assist ...

How can you utilize functions from external files within Angularjs controllers that are not classified as controllers themselves?

I have a unique scenario that I need help with. In my project, I am using a javascript file with three.js to render some models. To combine my frontend WebGL rendering with a backend library, I used Browsefiy to create a single js file named script.js. ...

Tips for fixing CORS error when working with the fetch API

I'm having trouble retrieving data from the metaweather.com API using JavaScript's fetch function. I attempted to include before the API URL, but it has not resolved the issue. I followed a video tutorial on how to fetch data, but I'm stil ...

Creating an interface that accurately infers the correct type based on the context

I have an example below of what I aim to achieve. My goal is to start with an empty list of DbTransactInput and then add objects to the array. I experimented with mapped types to ensure that the "Items" in the "Put" property infer the correct data type, w ...

Executing PHP code and then triggering an Ajax callback

Looking to implement an alert message using the sweetalert plugin. I have a page that displays 10 products on the index page, each with a link (or form) containing data to send to a PHP script. For example: script.php?id=x&b=x&c=z The HTML includ ...

What is the designated color for highlighting an option in Next.js?

This is my first time working on a Next.js project and I see an unfamiliar option. Which selection should I choose? I plan to use JavaScript for the Next.js project, not TypeScript. Just need to figure out which option is currently selected so I can pro ...

Adjust the class based on the model's value in AngularJS

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'} html <div class="variable" ng-repeat="item in items">{{item}} </div> ...

Whenever I click on <a href="whatever.aspx"></a>, I would like the page to be displayed within the current page

This is the code I am working with: <asp:DataList ID="dlGallery" runat="server" RepeatLayout="Flow" Width="100%" CellPadding="4" ForeColor="#333333"> <AlternatingItemStyle BackColor="White" ForeColor="#284775" /> <FooterStyle BackColor ...

fastest-validator: ensure that two fields are not the same

My current validation process involves using fastest-validator. Here is an example of the object being validated: { "_id":"619e00c177f6ea2eccffd09f", "parent_id": "619e00c177f6ea2eccffd09f", } I need to ensu ...