Use an array of objects for series data in Highcharts

Question

I have an array of objects that I want to display in highcharts. Every object has a name and a value.

I have tried to get this to work by doing

var objects = objectArray[]; // objectArray being an array of the objects I want data on
var objectNames = nameArray[]; // This being an array of all the names of the objects
var objectValues = valueArray[]; // An array of all the values of the objects


 series: [{
    data: objects.value,
    name: objects.name
 }]

This blew up on me. So I tried building the series like this:

 series: [{
    data: objectValues,
    name: objectNames
 }]

This gave me data for the values, but the name was all of the names in the objectNames array... for every single piece of data. so I tried using

series: [{
    data: objectValues
},
{   
    data: objectNames
}]

This resulted in seeing the chart for the objectValues, and in the legend, another option for the names - which is completely unacceptable because there's no point in having a series of labels, right?

So I decided I would programmatically build out a series, using a foreach loop and then pass that into the constructor. However, http://www.highcharts.com/docs/getting-started/how-to-set-options/ says this is "bad code".

What I'm wanting is to be able to pass an array of objects to highcharts, tell it that every piece of data's 'name' is going to be the name value on that particular object, and the data is going to be tied to that particular object's value field. Is there a way to do this? Or is the only option what highcharts considers 'bad'?

Bardicer · Accepted Answer · 2019-07-31 15:43:31Z

9

So I found a solution.

After getting the data, I did

$.each(item, function (index, value) {
    objects.push([value.name, value.value]);
});

And then bound my series with

series: [{
     data: objects,
     name: 'Value Type Description'
}]

So I have "Value Type Description" in the legend, but when I hover over a specific point I have the name as the label, and valid data displaying in graph form.

I found at http://api.highcharts.com/highcharts#series that if you have an array of two dimensional arrays, you can just pass a string as the first parameter and it would parse it as the label for that point.

EDIT: Example per request.

So you have two pieces to the series field, data and name. Name does NOT apply to the data, that will be the name of the axis.

So data is an array of key/value pairs.

data: [ {[key1, value1]}, {[key2, value2]}, {[key3, value3]} ]

And name is what the "main" label will be - "My Data Stuff" for example.

Then, when you load the chart, in the legend it should say "My Data Stuff", but when you hover over a specific point, say the first one, it will display the Key1 Value1 information.

edited Jul 31, 2019 at 15:43

answered May 27, 2014 at 16:17

Bardicer

1,4884 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Disera Over a year ago

Hi! Can you please show some sample snippet for the above scenario. Very grateful. Thanks

Aaron Hall · Accepted Answer · 2014-11-13 02:31:27Z

        data: [{
            name: 'Point 1',
            y: 1,
            test1:9,
            test2:'ddaf'
        }, {                         ------->      right
            name: 'Point 2',
            y: 5,
            test1:12,
            test2:'ddddaf'
        }]

        data: [{
            my_name: 'Point 1',
            y: 1,
            test1:9,
            test2:'ddaf'
        }, {                         -------> we change 'name' to 'my_name',
            my_name: 'Point 2',               then the name you want to show become
            y: 5,                             'Slice', instead of 'Point 1','Point 2'
            test1:12,
            test2:'ddddaf'
        }]

        data: [{
            my_name: 'Point 1',
            my_y: 1,
            test1:9,
            test2:'ddaf'
        }, {                         ------->  Now,we get nothing.
            my_name: 'Point 2',
            my_y: 5,
            test1:12,
            test2:'ddddaf'
        }]

So,the 'name' and 'y' is the key.

Collectives™ on Stack Overflow

Use an array of objects for series data in Highcharts

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related