C3 chart with JSON data

Question

I am trying to populate a C3 chart with dynamic data from a SQL database. I have c# web method that when called by my javascript produces the following JSON string

[{"y":"5","item1":"Lion Wharf"},{"y":"31","item1":"Millbrook Park P2"},{"y":"84","item1":"Pinfield Meadows"}]

I'm using the following javascript on pageload but getting error "a.forEach is not a function"

      $.ajax({
            type: "POST",
            url: "additions.aspx/GetPiechartData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: "true",
            cache: "false",
            success: function (result) {
                OnSuccess(result.d);
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });

        function OnSuccess(response) {
            var abc = JSON.stringify(response);
            window.location.replace(response);
            var chart = c3.generate({
                bindto: '#chart-var-project',
                data: {
                    json: response,
                    keys: {
                        x: 'y',
                        value: ['item1']
                    },
                    type: 'donut'
                },
                donut: {
                    title: "Approval",
                    width: 40,
                    label: {
                        show: false
                    }
                },
                color: {
                    pattern: ["#ff9800", "#78c350", "#f7531f"]
                }
        });

I'm very new to Javascript and would really appreciate a pointer here

Thanks!

Answer 1

function OnSuccess(response) {

    var jsonData = response.d;

    var chart = c3.generate({
        bindto: '#chart-var-project',
        data: {
            json: JSON.parse(jsonData),
        }
    });

}

Answer 2

You have to format your json response to fit the expected format of C3 for Donut graph type.

function OnSuccess(response) {
    var data = {};
    var value = [];
    JSON.parse(response).forEach(function(d) {
        data[d.item1] = d.y;
        value.push(d.item1);
    });

    c3.generate({
                data: {
                    json: [data],
                    keys: {
                        value : value
                    },
                    type: 'donut'
                },
                donut: {
                    title: "Approval",
                    width: 40,
                    label: {
                        show: false
                    }
                },
                color: {
                    pattern: ["#ff9800", "#78c350", "#f7531f"]
                }
        })
}

Your server will normally output a string, so using a JSON.parse will transform this string into a json object.