Chartjs-How i can refresh chart without refresh page?

by

2👍

✅

Your return statement is before your setTimeout call. I would also recommend to not use ajax synchronously, as this will block your UI and possibly cause it to hang every 5 seconds.

You should separate your function calls to a format like this if possible:

$(function() {
  function bindChart(data) {
    var config = buildChartConfiguration(data);

    // bind configuration & data to chart here
    // $('#chart').plot(config)  or whatever your library's syntax is
  }

  function buildChartConfiguration(data) {
     return {
            labels  : ['Goods', 'Qty'],
            datasets: [
            {
                label               : '>30 Days',
                backgroundColor     : 'red',
                borderColor         : 'red',
                pointRadius          : false,
                pointColor          : 'red',
                pointStrokeColor    : 'red',
                pointHighlightFill  : 'red',
                pointHighlightStroke: 'red',
                data                : [data, 21] 
            },
            {
                label               : '15-30 Days',
                backgroundColor     : 'orange',
                borderColor         : 'orange',
                pointRadius         : false,
                pointColor          : 'orange',
                pointStrokeColor    : 'orange',
                pointHighlightFill  : 'orange',
                pointHighlightStroke: 'orange',
                data                : [data, 22]
            }
            ]
        }
  }

  function loadData() {
     $.ajax({
        type  : 'ajax',
        url   : '<?= base_url()?>Dashboard/test',
        dataType : 'json'
     })
     .then(bindChart)
     .then(function() {
        // on completion request new data in 5s
        setTimeout(loadData, 5000);
     });
  }

  // load data from server
  loadData();
});

1👍

try this:-

 $.ajax({
        type  : 'ajax',
        url   : '<?= base_url()?>Dashboard/test',
        async : false,
        dataType : 'json',
        success : function(data) {
            areaChartData.datasets[0].data = data;
            areaChartData.datasets[1].data = data;

        }
    })

and then your have to set settimeout to function which give you ajax response data and set default data of dataset with some value.

Leave a comment