display json data in a chart

Question

I'm working with Highcharts to display some charts on my html page.

to fill the chart with data I use this code :

data: [
    ['Shanghai', 23.7],
    ['Lagos', 16.1],
    ['Instanbul', 14.2],
    ['Karachi', 14.0],
    ['Mumbai', 12.5],
    ['Moscow', 12.1],
    ['São Paulo', 11.8],
    ['Beijing', 11.7],
    ['Guangzhou', 11.1],
    ['Delhi', 11.1],
    ['Shenzhen', 10.5],
    ['Seoul', 10.4],
    ['Jakarta', 10.0],
    ['Kinshasa', 9.3],
    ['Tianjin', 9.3],
    ['Tokyo', 9.0],
    ['Cairo', 8.9],
    ['Dhaka', 8.9],
    ['Mexico City', 8.9],
    ['Lima', 8.9]
],

but I want to get data from a local json file which looks like this :

[{
    "X_id": ["baghdadi"],
    "contents.value": ["yassin"],
    "contents.count": [95]
}, {
    "X_id": ["boroumi"],
    "contents.value": ["jamal"],
    "contents.count": [41]
}, {
    "X_id": ["lahia"],
    "contents.value": ["marouane"],
    "contents.count": [36]
}, {
    "X_id": ["essarghini"],
    "contents.value": ["issam"],
    "contents.count": [4]
}, {
    "X_id": ["htiti"],
    "contents.value": ["mustapha"],
    "contents.count": [33]
}, {
    "X_id": ["majdou"],
    "contents.value": ["aimad"],
    "contents.count": [19]
}, {
    "X_id": ["yan"],
    "contents.value": ["mustapha"],
    "contents.count": [33]
}, {
    "X_id": ["jo"],
    "contents.value": ["aimad"],
    "contents.count": [11]
}, {
    "X_id": ["yves"],
    "contents.value": ["mustapha"],
    "contents.count": [33]
}, {
    "X_id": ["tom"],
    "contents.value": ["aimad"],
    "contents.count": [10]
}]

so this is the code I tried :

 $(function() {


    var options = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'World\'s largest cities per 2014'
        },
        subtitle: {
            text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
        },
        series: [{
            name: 'Population',
            data: [],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    };

    var series = [];


    $.getJSON("example.json", function(data) {})
        .done(function(data) {
            $.each(data, function(i, item) {
                series.push([item['contents.value'], item['contents.count']])
            });
        })
        .fail(function() {})
        .always(function(data) {});


    options.series[0].data = series;

    $('#container').highcharts(options);

});

but I cant see anything on the chart.

I tried to display the content of the chart data before I do the modification by console.log(options.series[0].data); :

and after the modification I can only see [] in the console when I click on this object then this content is displayed :

How can I solve this problem?

Answer 1

Change this part:

$.each(data, function(i, item) {
                series.push([item['contents.value'], item['contents.count']])
            });

to:

$.each(data, function(i, item) {
                series.push([item['contents.value'][0], item['contents.count'][0]])
            });

UPDATE

Also, these lines:

options.series[0].data = series;
$('#container').highcharts(options);

need to be inside of your done callback.