Populating highchart line with array of objects

Question

I am using highchart js for creating line chart.I am using php for json response. Problem is when i am populating the chart from response the years are display but line is not drawing.

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: 'resp_highChart.php',
        dataType: "json",
        contentType: "application/json",
        success: function (response) {
            console.log(response);
            // draw chart
            $('#container').highcharts({
                chart: {
                type: 'line'
            },
            title: {
                text: 'Year Wise Sales Data'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr']
            },
            yAxis: {
                title: {
                    text: 'Sold Value'
                },
                labels: {
                    formatter: function () {
                        return this.value + '';
                    }
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false
                    },
                    enableMouseTracking: true
                }
            },
                series: response
            });

        }


    });

});

my response format is below

[{"name":"2012","data":"[692101643,716334837,776991835,769420169 ]"},{"name":"2013","data":"[860859252,825852169,895524501,892930333 ]"}]

Mike Zavarello · Accepted Answer · 2016-06-16 15:06:03Z

1

The problem here is that your data values are being read as strings and not arrays.

I created an example fiddle using your chart options and your JSON data directly inserted: http://jsfiddle.net/brightmatrix/143bzv1s/

The chart works correctly with the format as follows. Notice there are no quote marks around the data arrays.

series: [
    {"name":"2012","data":[692101643,716334837,776991835,769420169 ]},
    {"name":"2013","data":[860859252,825852169,895524501,892930333 ]}
]

I hope this is helpful for you!

Also, thank you very much for including sample data in your question. That was extremely helpful.

answered Jun 16, 2016 at 15:06

Mike Zavarello

3,5744 gold badges31 silver badges44 bronze badges

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

3 Comments

rhsabbir Over a year ago

Thank you for your answer ....i am using json_encode to convert the response to json for this reason quote is added to the data array.so how can i remove the quote marks from the data array.

Mike Zavarello Over a year ago

I found a few Stack Overflow posts that might be helpful for you to remove those quotes: 1) stackoverflow.com/questions/8837659/…; 2) stackoverflow.com/questions/30176800/…; 3) stackoverflow.com/questions/21369881/…; 4) stackoverflow.com/questions/13938645/…

rhsabbir Over a year ago

Thanks..for your quick response...these posts are really helpful

Collectives™ on Stack Overflow

Populating highchart line with array of objects

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related