CODEWITHSUNDEEP
javascriptarrayshighcharts
Fourii
Fourii

Reputation: 41

Highcharts displaying additional information to each bubble points using array

I'm using a bubble chart. I represent "Ideas" in this chart. Each bubble is one specific idea with an X-value and a Y-value. What I need is the "Idea name" in the tooltip for each bubble as additional information.

I already know that you can do it as followed:

series: [{
     data: [ { x : 1, y : 100, myIdea : 'Idea1' },
             { x : 2, y : 150, myIdea : 'Idea2' },
             { x : 5, y : 170, myIdea : 'Idea3' } ]
  }]

But here comes the problem: I used an array of this kind before:

dataArray [0][0] = 1; dataArray [0][1] = 100; dataArray [0][2] = 5;
dataArray [1][0] = 2; dataArray [1][1] = 150; dataArray [1][2] = 5;

coming from a loop.

My dataArray array then looked like that: [1,100,5], [2,150,5], ...

I gave that to the series like that:

series: [{
           data: dataArray 
                }]

that worked perfectly!

How do I create an array in this expected format:

         data: [ { x : 1, y : 100, myIdea : 'Idea1' },
                 { x : 2, y : 150, myIdea : 'Idea2' },
                 { x : 5, y : 170, myIdea : 'Idea3' } ]

Does this somehow work with associative arrays like that:

var myData= {
            "x": "1",
            "y": "100",
            "myIdea": "idea1"
        }

Btw, what is the best way to pass dynamic data for the bubblechart series?

Upvotes: 0

Views: 73

Answers (1)

Fabricator
Fabricator

Reputation: 12772

You can loop over your current dataArray and build the new array like so:

var oldDataArray = [
    [1, 100, 5],
    [2, 150, 5]
];
var newDataArray = oldDataArray.map(function (row) {
    return {
        x: row[0],
        y: row[1],
        z: row[2]
    };
});

console.log(newDataArray);

Upvotes: 1

Related Questions