Matching 2 array values in highcharts pie charts

Question

I have pie chart here created by using highchart and then I hope when the pie chart area clicked, the console will write some data base on the criteria I have set using "if else".

So I have 2 json data which is here:

var json = {
    "data": [
        {
        "topic": "Manchester United F.C.",
        "id": "/en/manchester_united_fc",
        "type": "/soccer/football_team",
        "audience": [
            {
            "userid": "100003921730958",
            "source": "Manchester United",
            "category": "Professional sports team"}
        ]},
    {
        "topic": "Chelsea F.C.",
        "id": "/en/chelsea_fc",
        "type": "/soccer/football_team",
        "audience": [
            {
            "userid": "100003921730958",
            "source": "Frank Lampard",
            "category": "Athlete"},
        {
            "userid": "100003914111287",
            "source": "Chelsea Football Club",
            "category": "Professional sports team"}
        ]}
    ]
};


var jsonFB = {

    "user1": [
        {
        "id": "100003921730958",
        "name": "Tan Jercia",
        "favorite_teams": [
            {
            "id": "19034719952",
            "name": "Real Madrid C.F."},
        {
            "id": "7724542745",
            "name": "Manchester United"}
        ],
        "interested_in": [
            "female",
            "male"
            ],
        "likes": {
            "data": [
                {
                "name": "Corrinne May",
                "category": "Musician/band",
                "id": "17393005071",
                "created_time": "2012-07-04T05:56:47+0000"},
            {
                "name": "Men In Black",
                "category": "Movie",
                "id": "168169803229342",
                "created_time": "2012-06-06T21:21:19+0000"},
            {
                "name": "Pubbing",
                "category": "Interest",
                "id": "106265502743004",
                "created_time": "2012-05-28T07:04:17+0000"},
            {
                "name": "Sleeping",
                "category": "Public figure",
                "id": "102168219824412",
                "created_time": "2012-05-28T07:03:58+0000"},
            {
                "name": "Lionel Messi",
                "category": "Interest",
                "id": "105543199478544",
                "created_time": "2012-05-28T07:03:37+0000"},
            {
                "name": "David Villa Sánchez",
                "category": "Athlete",
                "id": "20714737025",
                "created_time": "2012-05-28T07:03:18+0000"},
            {
                "name": "Frank Lampard",
                "category": "Athlete",
                "id": "115714874568",
                "created_time": "2012-05-28T10:15:04+0000"},
            {
                "name": "Real Madrid C.F.",
                "category": "Professional sports team",
                "id": "19034719952",
                "created_time": "2012-05-28T07:02:57+0000"},
            {
                "name": "Manchester United",
                "category": "Professional sports team",
                "id": "7724542745",
                "created_time": "2012-05-28T07:02:22+0000"},
            {
                "name": "Badminton",
                "category": "Sport",
                "id": "112285278784684",
                "created_time": "2012-05-28T07:02:16+0000"},
            {
                "name": "Swimming",
                "category": "Sport",
                "id": "109717462380351",
                "created_time": "2012-05-28T07:02:13+0000"},
            {
                "name": "The Vampire Diaries - Tv Series/Books",
                "category": "Community",
                "id": "133372903419059",
                "created_time": "2012-05-28T06:37:38+0000"},
            {
                "name": "Gossip Girl",
                "category": "Tv show",
                "id": "8811587900",
                "created_time": "2012-05-28T06:37:38+0000"},
            {
                "name": "Dear John",
                "category": "Movie",
                "id": "154526009569",
                "created_time": "2012-05-28T06:37:37+0000"},
            {
                "name": "The Vow",
                "category": "Movie",
                "id": "131563483577190",
                "created_time": "2012-05-28T06:37:37+0000"},
            {
                "name": "Harry Potter",
                "category": "Movie",
                "id": "156794164312",
                "created_time": "2012-05-28T06:37:36+0000"},
            {
                "name": "Avengers",
                "category": "Movie",
                "id": "126757470715601",
                "created_time": "2012-05-28T06:37:36+0000"},
            {
                "name": "Batman: The Dark Knight",
                "category": "Movie",
                "id": "12887942787",
                "created_time": "2012-05-28T06:37:35+0000"},
            {
                "name": "The Transporter",
                "category": "Movie",
                "id": "105485349484433",
                "created_time": "2012-05-28T06:37:34+0000"},
            {
                "name": "Ip Man",
                "category": "Movie",
                "id": "104108312958644",
                "created_time": "2012-05-28T06:37:33+0000"},
            {
                "name": "How to Train Your Dragon",
                "category": "Movie",
                "id": "96698020019",
                "created_time": "2012-05-28T06:37:33+0000"},
            {
                "name": "Battleship",
                "category": "Movie",
                "id": "116119711759494",
                "created_time": "2012-05-28T06:37:32+0000"},
            {
                "name": "Inception",
                "category": "Movie",
                "id": "91290503700",
                "created_time": "2012-05-28T06:37:32+0000"},
            {
                "name": "John Carter",
                "category": "Movie",
                "id": "192790732230",
                "created_time": "2012-05-28T06:37:31+0000"},
            {
                "name": "Transformers 3",
                "category": "Movie",
                "id": "118936754809410",
                "created_time": "2012-05-28T06:37:31+0000"},
            {
                "name": "Snow White and the Huntsman",
                "category": "Movie",
                "id": "186450181387455",
                "created_time": "2012-05-28T06:37:30+0000"},
            {
                "name": "This Means War",
                "category": "Movie",
                "id": "290847887611269",
                "created_time": "2012-05-28T06:37:29+0000"},
            {
                "name": "Harry Potter",
                "category": "Book",
                "id": "107641979264998",
                "created_time": "2012-05-28T06:37:29+0000"},
            {
                "name": "Love Story",
                "category": "Book",
                "id": "109789932381273",
                "created_time": "2012-05-28T06:37:28+0000"},
            {
                "name": "Justin Bieber",
                "category": "Musician/band",
                "id": "67253243887",
                "created_time": "2012-05-28T06:37:28+0000"},
            {
                "name": "Kelly Clarkson",
                "category": "Musician/band",
                "id": "18481194560",
                "created_time": "2012-05-28T06:37:26+0000"},
            {
                "name": "Jessie J",
                "category": "Musician/band",
                "id": "145300805513355",
                "created_time": "2012-05-28T06:37:26+0000"},
            {
                "name": "Katy Perry",
                "category": "Musician/band",
                "id": "7126051465",
                "created_time": "2012-05-28T06:37:25+0000"}
            ],
            "paging": {
                "next": "https://graph.facebook.com/100003921730958/likes?limit=5000&offset=5000"
            }
        }}
    ]
};

So basically I hope I retrieve the name of the user and write into the console when I clicked the pie chart area by matching both userid which i tried to use loop array matching method. however it doesn't work. :(

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                    for (i = 0; i < jsonFB.user1[i]; i++) {

                        for (j = 0; j < json.data[j].audience[j]; j++) {

                            if (jsonFB.user1[i].id == json.data[j].audience[j].userid) {

                                var name = jsonFB.user1[i].name;
                                console.log(name);
                            }
                            else {

                                console.log("false");
                            }

                        }
                    }

                }
            }
        },

mgibsonbr · Answer 1 · 2013-01-02T05:05:19.040

The problem is in your for conditions:

for (i = 0; i < jsonFB.user1[i]; i++) {
    for (j = 0; j < json.data[j].audience[j]; j++) {

I think you meant to iterate over all user1s and (datas and) audiences, right?

for (i = 0; i < jsonFB.user1.length; i++) {
    for (k = 0; k < json.data.length; k++) {
        for (j = 0; j < json.data[k].audience.length; j++) {

Now your (adapted) if will work:

if (jsonFB.user1[i].id == json.data[k].audience[j].userid) {

I must point out, however, that this will just ensure that usernames will be printed out to the console once for each match between json and jsonFB data. There's no relation whatsoever with what was clicked in the chart. Check the Highcharts API for that. I'm afraid you'll have to work out the specifics by yourself, but I suggest starting at event.point (the info you need seems to be there):

click: function(event) {
    console.log(event.point);

This demo might also be helpful.

Update: If you have more than one user (like user1, user2 etc) you can iterate them like:

$.each(jsonFB, function(prop, value) {
    if ( prop.indexOf("user") == 0 ) { // Check if the name starts with "user"
        for (i = 0; i < value.length; i++) {...} // Replaces jsonFB.user1.length
    }
});

What if I wanted to add one more user into "JSONFB"? Does my code need add another loop for it to check its user first? So it becomes for (var s=0; s<.jsonFB.length; s++){ — user1914667, Jan 02 '13 at 00:38
@user1914667 yes, but if your users are **properties** (instead of elements of a list) - like `user1`, `user2` etc - then the way of iterating is different. Since you're using jQuery, the easiest way would be `$.each(jsonFB, function(prop,value) { ... })`, but you can also use `for ( var prop in jsonFB ) { ... }`. See [this](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/for...in) and [this](http://stackoverflow.com/q/1096924/520779) for more info. See also the updated answer. — mgibsonbr, Jan 02 '13 at 05:05

Matching 2 array values in highcharts pie charts

1 Answers1