将动态数据推送到高图中的堆积百分比列

Question

I want to plot some data using stacked percentage column. But the data is dynamic and the data is obtained via ajax.

Here is an example of one of the ajax responses-

X-axis categories-

Array
(
    [ID0] => 2013/07/22
    [ID1] => 2013/07/23
    [ID2] => 2013/07/24
    [ID3] => 2013/07/25
)

series data and name-

Array
(
    [0] => Array
        (
            [ID1] => 5
            [ID3] => 2
            [ID4] => 1
            [ID5] => 4
        )

    [1] => Array
        (
            [ID1] => 5
            [ID3] => 1
            [ID4] => 2
        )

    [2] => Array
        (
            [ID1] => 5
            [ID2] => 1
            [ID3] => 2
            [ID4] => 3
            [ID5] => 4
        )

    [3] => Array
        (
            [ID1] => 6
            [ID2] => 3
            [ID4] => 1
            [ID5] => 1
        )

)

And this is what I want- http://jsfiddle.net/NF9Yp/

Answer 1

you can generate categories and series array from server side. then your ajax function as below. jsondata returns from server in Json format. set options categories and series values from jsondata's properties.

        $.ajax({
        url: callbackUrl,            
        dataType: "json",
        async: true,
        cache: false,
        success: function (jsondata) {
var options = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: jsondata.categories
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'percent'
            }
        },
            series: jsonData.series
    };
    $('#container').highcharts(options);
        },
        error: showAjaxError
    })