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 ]"}]

score 1 · Accepted Answer · answered Jun 16 '16 at 15:06

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 '16 at 15:06

Mike Zavarello

3,514
4
29
43

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. – rhsabbir Jun 16 '16 at 16:22
I found a few Stack Overflow posts that might be helpful for you to remove those quotes: 1) http://stackoverflow.com/questions/8837659/remove-double-quotes-from-a-json-encoded-string-on-the-keys; 2) http://stackoverflow.com/questions/30176800/php-json-encode-remove-quotes-from-value; 3) http://stackoverflow.com/questions/21369881/remove-quotes-from-json-encode-keys; 4) http://stackoverflow.com/questions/13938645/remove-double-quote-in-json-encode – Mike Zavarello Jun 16 '16 at 16:30
1

Thanks..for your quick response...these posts are really helpful – rhsabbir Jun 16 '16 at 16:45

Populating highchart line with array of objects

1 Answers1