Apexcharts not re-render after ajax call - Solved

 render() method just once in the beginning even with empty array, then call the updateSeries() method in ajax call to update data of the chart.

var options = {
series: [{
  name: 'Completed trips',
  data: []
}, {
  name: 'Cancelled trips',
  data: []
}],
chart: {
  height: 350,
  type: 'bar',
  toolbar: { show: false },
  zoom: { enabled: false }
},
plotOptions: {
  bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
  },
},
dataLabels: { enabled: false },
stroke: {
  show: true,
  width: 2,
  colors: ['transparent']
},
fill: { colors: ['#ffc074', '#6e6e6e'] },
markers: { colors:  ['#ffc074', '#6e6e6e'] },
legend: {
  markers: { fillColors: ['#ffc074', '#6e6e6e'] }
},
noData: { text: 'Loading...'},
xaxis: {
  categories: ['Jan','Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
};

var chart = new ApexCharts(document.querySelector("#tripChart"), options);
chart.render();

// Ajax call with updateSeries method of the chart
function load_monthwise_trip_data(year){
$.ajax({
        url:base_url+"admin/report/get_monthwise_trip",
        method:"POST",
        data:{year:year},
        dataType:"JSON",
        success:function(data){
            chart.updateSeries([{
name: 'Completed trips',
data: data.completed_trips
  }, {
name: 'Cancelled trips',
data: data.cancelled_trips
}])
        }
    })
}

Reference for updateSeries

Comments

Popular posts from this blog

Creating Protected routes in ReactJS

Add and use wow.js into WordPress theme