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

What could be causing checked="checked" to fail validation in JavaScript?

Combine multiple values into a single input in the number field

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Issue encountered in Angularjs during upgrade process from version 1.2.27 to 1.4.7

Leveraging Window Object in Custom Hooks with NextJS

What is the best way to exclude a specific key when adding JSON objects to an array?

Tips for ensuring that the horizontal scroll bar remains consistently positioned at the bottom of the screen

Unallocated functions found within Web Sockets Objects

What steps should I take to create a .NET/JavaScript login page that works on IE7, Chrome, Mozilla, and Safari browsers?

XMLHttpRequest request shows blank result

Does the image alter based on the selection in the dropdown menu?

Choosing one item from an array to showcase in a view [Angular]

The chosen options are not appearing. Could this be a problem related to AngularJS?

Executing a function to erase the stored value in local storage during an Angular unit test

Label dynamically generated from user input for radio button option

Detecting collisions in Three.js

"The error message "Node JS, MYSQL connection.query is not a valid method" indicates

In Production environment, v-model triggers a ReferenceError

Cease the loading of a script in an HTML file

Issue: A request is not pending for flushing during the testing of an AngularJs service