CODEWITHSUNDEEP
ajaxc3.js
Ck Maurya
Ck Maurya

Reputation: 2255

load c3 chart with remote data

How can I load the chart with remote data using ajax request returning JSON encoded data?

Coding snippet:

var chart = c3.generate({
    bindto:"#chartdivObservation",
    data: {
        columns: [
            ['loading', 30, 20, 50, 40, 60, 50],
        ]
    }
});

$(document).on("change","#getObservation",function(){
    var team_id=$(this).val();
    var user_id=<?=$userId?>;

    $.ajax({
        url:"ajax/user/getDeltaStats.php",
        type:"POST",
        data:{
            get:"getObservationReport",
            teamId:team_id,
            userId:user_id
        },
        success:function(response){
            var data = $.trim(response)
            setTimeout(function(){
                chart.unload('loading');
                console.log("loading chart...")
                console.log(data)
                chart.load({columns: data})
            }, 4500)

            console.log(chart)

        }
    });
});

The first column "loading" is the dummy data, so that the chart is rendered. Later, using timeout I'm loading it with new data (reference http://c3js.org/samples/data_load.html). But, the chart isn't getting rendered with the new data.

The response generated by the ajax request is:

[["Agenda",90,70,70,20,40,70,60,60,58,63],["Precise Praise",53,60,80,68,80,60],["Circulation & Radar",70,100,93,60,100,90,73,90,75,45,60,60,80,73,60]]

Upvotes: 0

Views: 2365

Answers (1)

ChrisW
ChrisW

Reputation: 81

Here is an example which works fine for my application. Maybe that helps.

$(document).on("click", "#btnPDquant", function(event) {
    $.ajax({ 
    url: "PDQuantCalc",
    type: "post",
    data: $('#formPDquant').serialize(), 
    success: function(response){
        var newdat = JSON.parse(response);
        $("#divPDquant").text(newdat.PDquant[1]);
        chart.x(newdat.year);
        chart.load({
            columns: [ newdat.PDquant ]
        });
    },
    error: function (response) {
        $("#divPDquant").text("error");}
    });
    event.preventDefault(); // Important! Prevents submitting the form.
});

Upvotes: 1

Related Questions