CODEWITHSUNDEEP
javascriptjqueryajaxgraphc3.js
codeBloger
codeBloger

Reputation: 217

Not able to load c3 graph data with ajax

HI i want to load dynamic data with date time range with c3 graph Here is my CODE : 

$.ajax({
    [...]
    success: function(data) {
        chart.load({
            columns: data,
            unload: chart.columns,
        });
    }
});

The Ajax response is : 

[['Friday', 1],['Friday', 3],['Sunday', 1],['Saturday', 2],['Friday', 3],['Friday', 3],['Friday', 5],['Friday', 3],['Monday', 1],['Friday', 1],['Tuesday', 1]]

On success haven't seen anything on my graph . even i have commented "unload" but still same . the function is works fine if i put statically . please help me

Upvotes: 2

Views: 1830

Answers (2)

ChrisW
ChrisW

Reputation: 81

Did you try brackets around columns: data in the chart.load function argument ? Here is a piece of code which works in my application

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

Upvotes: 0

Marc Dix
Marc Dix

Reputation: 1959

You're using it wrong. It's not exporting a chart function, but a c3 function. The following will generate a chart (that doesn't look too good but I don't know what you're expecting).

You also missed to define an output div, thus I added #chart.

var data = [['Friday', 1],['Friday', 3],['Sunday', 1],['Saturday', 2],['Friday', 3],['Friday', 3],['Friday', 5],['Friday', 3],['Monday', 1],['Friday', 1],['Tuesday', 1]];

var data2 = [['Friday', 3],['Friday', 10],['Sunday', 50],['Saturday', 20],['Friday', 15],['Friday', 10],['Friday', 6],['Friday', 8],['Monday', 5],['Friday', 20],['Tuesday', 13]];

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: data
    }
});

setTimeout(function() {
    chart.load({
        columns: data2 
    });
}, 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>

<div id="chart"></div>

Upvotes: 1

Related Questions