CODEWITHSUNDEEP
javascriptphphighcharts
rhsabbir
rhsabbir

Reputation: 247

Populating highchart line with array of objects

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

Upvotes: 1

Views: 874

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

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.

Upvotes: 1

Related Questions