Chartist-js: Updating Chart Data via Ajax?

[alberk8]

Hi,

I have an ajax on the setinterval timer and would load the line chart data (the data loads nicely, formatted in json) but It error out update() function. Can someone point me the right direction?. Thank you.

$(function()
{
$(document).ready(function(){

     var get_data = setInterval(function(){         
        var ajaxrequest;
        ajaxrequest = $.ajax({
            type:"post",
            datatype:"Json",
            url:"index.php?r=site%2FChartdata",
            data: (typeof data ==="string"? data:null),
            success: function(data) { 

                 var mychart //= $('#LineChart .ct-chart');
              mychart.data = data;
              mychart.update();  //<-- Error on this, Function not found.               
            },
        });  
    },3000);
}); 

});

[gionkunz]

If you don't have the original chart object that was returned during instanciation in this context, then try this:

var mychart = $('#LineChart .ct-chart');
mychart.get(0).__chartist__.update(data);

[alberk8]

Hi,
I have tried you method but still getting the same error. I have setup a breakpoint on the javascript and the object "mychart" does not have the update function. What else could be wrong here ? For your information the chartist version is 0.7.4. Thanks.

[Megasaxon]

I'm getting the same issue (of the non-existent update function), however if it helps, I managed to get graphs "updating" doing something along the lines of:

var newData = {
    series: [99,100]
};

//get existing chart options, feel free to just use jQuery here if you want.
var chart = document.querySelector('#LineChart .ct-chart');

//draw new chart on existing div
new Chartist.Line('#LineChart .ct-chart', newData, chart.__chartist__.options, {});

It's by no means perfect but it's working for the moment, so adapting this to your existing code shouldn't be too difficult as an interim workaround.

[alberk8]

Hi all,

After many hours of debugging and pulling my hair out. I discovered that I was my mistake as javascript is case sensitive. So gionkunz, you solution works perfectly. Megasaxon your solution also works but I just feel that it is not right to "new" an existing object (sorry it just me). Thank you all.

[gionkunz]

@alberk8 great that it works! Can we close the issue?

[alberk8]

Thanks. I am closing the issue.

[Gurupriya-Royalit]

Hello,
i am using Chartist JS. and i want to change it when click on date means i want to send date value by ajax and then according to date, chart series value fetch from data base and according to value chart should be change.
please any one help me.....