Sending an array from a JavaScript for loop to the data series of a Highcharts chart

I've generated an array (myData) using a for loop and saved it in a variable, but I'm having trouble displaying the data with highcharts.

For testing purposes, I created another array (arr) with numbers manually and it worked fine when I used that array instead.

Check out the example at http://jsfiddle.net/o22uk7Lb/

HTML

myData<p id="demo"></p>
arr<p id="demo2"></p>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Javascript

var mp = 300;
var yp = (mp * 12);
var year = new Array(12);
var myData = [];
for (var i = 1; i <= year.length; i++){
    myData +=  (i * yp.toFixed(2)) + ",";
};
document.getElementById("demo").innerHTML = myData; 

 var arr = [100,200,300,400,500];
 document.getElementById("demo2").innerHTML = arr; 
 Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        data: myData
    },]
 })

Answer №1

The loop you've written is not filling an array, it's actually generating a string.

Here's a revised version:

for (var j = 1; j <= year.length; j++){
    newData.push(j * yp.toFixed(2));
};

Updated code snippet

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

Transform a Mobx observable map into a JavaScript array

I am working with a component that receives the value of "form.$('userProfile').fields" as a prop, which is an observable map. The structure of this map can be seen in the console.log screenshot below: class Location extends React.Component<* ...

UITableView not populating with an array

In my FavoritesTableViewController, I have a mutable array called "citiesArray" that stores city names. When a city button is pressed, it triggers a method to add a city name to the array. [self.citiesArray addObject:@"New York"]; After adding "New York" ...

Steps for connecting a front-end button to a Node.js event

Recently, I managed to set up a node server that facilitates signing in with Steam and redirecting back to the website. My current query revolves around integrating the sign-in/sign-out buttons into an AngularJS front end and leveraging the server as a pro ...

Utilizing camera perspective for coordinate system in Three.js

This question may seem basic, but I'm having trouble grasping it. I'm working on a scene using Three.js and the camera setup is as follows: var camera = new THREE.PerspectiveCamera( 85, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera. ...

Become a Member Of a Nested Array [Using PHP and MYSQL]

How can I efficiently join multiple tables and easily create a nested array in PHP? For example: Table 1 -School: SchoolID, SchoolName,PrincipalID Talbe 2 - Principal: PrincipalID,PrincipalName I would like to generate a nested array in PHP similar to: ...

Transform the array of MongoId objects into an array consisting of strings

array ( 0 => "506479dc9a5be1596b1bd97d", 1 => "506479dc9a5be1596b1bd97d", ) The solution that I have implemented involves using `implode` and `explode`, but it proves to be costly and inefficient when executed within a loop. $yut = implode(",", ...

Matching a regular expression pattern at the beginning of a line for grouping strings

One of my tasks involves working with a markdown string that looks like this: var str = " # Title here Some body of text ## A subtitle ##There may be no space after the title hashtags Another body of text with a Twitter #hashtag in it"; My goal ...

Similar to TypeScript's `hasOwnProperty` counterpart

When working with TypeScript objects, is there a way to loop through a dictionary and set properties of another dictionary similar to how it is done in JavaScript? for (let key in dict) { if (obj.hasOwnProperty(key)) { obj[key] = dict[key]; } } If ...

Success event triggered by AJAX fires two times

I am encountering an issue with my Javascript code. The ajax success option seems to be triggering twice, resulting in two identical alerts being displayed. if (message =="") { $.ajax({ url: '/dev/php/register.php', type: & ...

Sending an array of strings from an ajax call to an MVC controller

I'm encountering an issue where I have an array that I build up when a row is selected in my bootstrap data table. The problem arises when I try to pass this array from my view to the controller, which is supposed to fire up a partial view. Strangely, ...

What is the reason that server.js is always excluded from the Webpack build process?

I am currently utilizing Vue.js 3 for the front end of my application, while employing Node/Express for the back-end. My goal is to implement server side rendering, but I have encountered some challenges along the way. As far as I can tell, the client-sid ...

Using recursion in JavaScript to determine if a given number is prime

I am feeling a bit puzzled about how to tackle this issue. My goal is to have all prime numbers return as true, and if not, then false. I noticed that my current logic includes 2, which returns 0 and automatically results in false because 2 has a remainder ...

tips for accessing data attributes in ajax request

I am struggling to retrieve data-id from an anchor tag when clicked using AJAX, but it keeps returning undefined. Below is my code: $image_html .= '<a class="float-left " onclick="modal()" data-toggle="modal" data-targ ...

Removing a grand-parent TR node from a table using Vue JS by triggering a method on click

I am trying to create a function that will delete the parent of the parent node of a button element when it is clicked. The code I have written so far does not seem to be working and no errors are being thrown. Can anyone help me figure out how to achieve ...

The parameter 'string | JwtPayload' cannot be assigned to the parameter 'string'

Utilizing Typescript alongside Express and JWT for Bearer Authorization presents a specific challenge. In this situation, I am developing the authorize middleware with JWT as specified and attempting to extricate the current user from the JWT token. Sampl ...

problem with creating a django template script

Hello, I am currently working on a code that is responsible for executing various functions within the template. I have utilized scripts to verify these functions using if-else statements and for loops. However, I am encountering some errors during this pr ...

Issue with October CMS: Radio button selection triggers an Ajax call, but clicking twice in quick succession causes the content

I am currently utilizing October CMS and materializecss to develop a form with options on one of my pages. The form functions correctly as it dynamically loads content when different options are clicked. However, I have identified a problem where clicking ...

Serialization of JSON arrays using Jackson in Java

I've encountered a unique scenario where I'm attempting to serialize data using Jackson. Here is an example of the payload: { "key1": [ [ 10, 11 ], [ 12, 13 ] ...

Angular filter is causing an error message saying "Unable to interpolate," but the filter is functioning as expected

I have implemented the filter below (which I found on StackOverflow) that works perfectly fine on one page. However, when using the same object, it throws an error as shown below: app.filter('dateFormat', function dateFormat($filter){ return f ...

There was an issue with Sails.js where it was unable to retrieve a recently created user using a date

One issue I encountered with Sails.js was using sails-disk as the database. When querying for a user with specific date parameters, such as: // Assuming the current date is end_date var end_date="2014-06-06T15:59:59.000Z" var start_date="2014-06-02T16:0 ...