Guidelines for populating data with an array

Question

Guidelines for populating data with an array

I have the following array:

const dataArr = [[15, 14, 5], [16, 10, 2], [17, 6, 13], [18, 4, 8], [19, 7, 4]];

Now, I am populating another array using the above data as shown below:

for (let i=0; i<dataArr.length; i++){
    newData.push(dataArr[i]);

Then, I want to create a bubble chart using this array but it doesn't seem to work. Here is what I tried:

series: [{
        data: [
            for(let i=0; i<newData.length; i++){
                { x: newData[i][0], y: newData[i][1], z: newData[i][2] }
            }
        ]
    }]

However, this approach is not yielding the desired result. Can someone suggest a way to achieve this?

javascript highcharts

Answer 1

Answer №1

Start by initializing your data

var arrayAUX = [[ 13, 12,5],[ 13, 10,2],[ 13, 5,10],[ 14, 2,5],[ 14, 3,2],[ 15, 1,2]];
arrayGRAPH = [];
for (var i=0; i<arrayAUX.length; i++){
        arrayGRAPH.push(arrayAUX[i]);
}
var data = [];
 for( var i=0; i<arrayGRAPH.length; i++){
           data.push( { x: arrayGRAPH[i][0], y: arrayGRAPH[i][1], z: arrayGRAPH[i][2] })
        }

After initializing the data, proceed to set it:

series: [{
        data: data
    }]

To see this in action, check out this fiddle http://jsfiddle.net/homdn9md/

Answer 2

Start by initializing your data

var arrayAUX = [[ 13, 12,5],[ 13, 10,2],[ 13, 5,10],[ 14, 2,5],[ 14, 3,2],[ 15, 1,2]];
arrayGRAPH = [];
for (var i=0; i<arrayAUX.length; i++){
        arrayGRAPH.push(arrayAUX[i]);
}
var data = [];
 for( var i=0; i<arrayGRAPH.length; i++){
           data.push( { x: arrayGRAPH[i][0], y: arrayGRAPH[i][1], z: arrayGRAPH[i][2] })
        }

After initializing the data, proceed to set it:

series: [{
        data: data
    }]

To see this in action, check out this fiddle http://jsfiddle.net/homdn9md/

Answer 3

Answer №2

If you want to iterate through an array and add its elements to a data structure, you can utilize the forEach method.

var newArray = [[ 10, 5,3],[ 12, 9,2],[ 15, 3,7],[ 16, 8,1],[ 17, 4,6],[ 20, 2,3]];
var info = {infoArray: [{values: []}]}

newArray.forEach(function(element) {
  info.infoArray[0].values.push({ xValue: element[0], yValue: element[1], zValue: element[2]});
});

console.log(info);

Answer 4

If you want to iterate through an array and add its elements to a data structure, you can utilize the forEach method.

var newArray = [[ 10, 5,3],[ 12, 9,2],[ 15, 3,7],[ 16, 8,1],[ 17, 4,6],[ 20, 2,3]];
var info = {infoArray: [{values: []}]}

newArray.forEach(function(element) {
  info.infoArray[0].values.push({ xValue: element[0], yValue: element[1], zValue: element[2]});
});

console.log(info);

Answer 5

Answer №3

The sample code you provided can be optimized by eliminating the arrayGraph array and directly creating an object with the data from the arrayAUX array.

var arrayAUX = [
  [13, 12, 5],
  [13, 10, 2],
  [13, 5, 10],
  [14, 2, 5],
  [14, 3, 2],
  [15, 1, 2]
];

var graph = [];
for (var i in arrayAUX) {
  graph.push({
    x: arrayAUX[i][0],
    y: arrayAUX[i][1],
    z: arrayAUX[i][2]
  })
}

To assign your graph object correctly, do the following:

series: [{
  data: graph
}]

Answer 6

The sample code you provided can be optimized by eliminating the arrayGraph array and directly creating an object with the data from the arrayAUX array.

var arrayAUX = [
  [13, 12, 5],
  [13, 10, 2],
  [13, 5, 10],
  [14, 2, 5],
  [14, 3, 2],
  [15, 1, 2]
];

var graph = [];
for (var i in arrayAUX) {
  graph.push({
    x: arrayAUX[i][0],
    y: arrayAUX[i][1],
    z: arrayAUX[i][2]
  })
}

To assign your graph object correctly, do the following:

series: [{
  data: graph
}]

Guidelines for populating data with an array

Answer №1

Answer №2

Answer №3

Similar questions

I'm having trouble getting jquery css to function properly in my situation

Limiting the number of times a specific character appears using a regular expression

Encountering difficulty in creating a Nuxt website using @googlemaps/js-api-loader

Dynamic styling updates on page refresh in Next.js

Positioning an element in the center of another using JQuery

What is the best way to keep calling an AJAX function until it receives a response from a previous AJAX call

Deactivate the underscore and include the fiscal year in AngularJS

Showing the values of selected checkboxes in a select dropdown - here's how!

Is it possible for me to determine whether a javascript file has been executed?

What is the URL I need to visit in my browser to monitor updates while running npm?

Cross-Origin Resource Sharing problem: "Preflight request response does not meet access control criteria"

The Next.js application encounters a crash when trying to integrate Google Firebase authentication

Categorize elements in an array based on a specific keyword

Jasmine for testing HTTP POST method in a unit test case

Revert the Vue State When Navigating Back in the Browser

Error encountered when attempting to assign a value of the original data type within the Array.reduce function

Performing function in Vue.js when a change occurs

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

Reactjs: When components are reused, conflicts may arise in UI changes

What is the best way to trigger the keyup event in that moment?