locked
How to clear Apex stack bar chart to bind new data RRS feed

  • Question

  • Greetings,
     
    have bind apex chart on load time successfully.
     
    Problem:
    Code working fine to  bind chart on load time , but as i click on button to fetch new data to rebind chart ,it shows old data/chart bars ( not reflecting to show new data ),although everything is fine regarding fetching records
     
    solution Required:
    Guide to reflect new data when i click on button 
     

    My Code
     
     
    function onsuccessBindDonut(response) {
    if (response.d.length > 0) {
    var dataalready = [];
    var datasoafare = [];
    var dataplan = [];
    var datapending = [];//['Approved', 'Pending', 'Rejected'];
    var datalabel = [];
    var mycolor = ['#f0ad4e', '#5cb85c', '#FF0000', '#c09c61'];
    var tooltiptext = [];
    $('#div_cyclename').text('Cycle Name : ' + response.d[0].Cyclename);
    $('#' + '<%=dtfromexpected.ClientID%>' + '_dtfromexpectedDate').val(response.d[0].startDate);
    $('#' + '<%=dttoexpected.ClientID%>' + '_dttoexpectedDate').val(response.d[0].expirydate);
    for (var i = 0; i < response.d.length; i++) {
    dataplan.push(response.d[i].plantobeupload);
    datasoafare.push(response.d[i].total_sofareupload);
    datapending.push(response.d[i].tobeupload);
    datalabel.push(response.d[i].DeparttName + ' ( ' + response.d[i].plantobeupload + ' )');
    }
    // var chart = new ApexCharts(el, options);
    new Vue({
    el: '#app1',
    components: {
    apexchart: VueApexCharts,
    },
    data: {
    series: [{
    name: 'Plan',
    data: dataplan,
    colors: mycolor[0]
    },
    {
    name: 'Exist',
    data: datasoafare,
    colors: mycolor[2]
    },
    {
    name: 'Pending',
    data: datapending,
    colors: mycolor[3]
    }],

    chartOptions: {
    colors: mycolor,
    chart: {
    type: 'bar',
    height: 350,
    stacked: true,
    },
    plotOptions: {
    bar: {
    horizontal: true,
    vertical: false,
    },
    },
    stroke: {
    width: 1,
    colors: ['#fff']
    },
    //title: {
    // text: 'Documents Logs', align: 'center', style: {
    // fontSize: '14px',
    // fontWeight: 'bold',
    // fontFamily: undefined,
    // color: '#263238'
    // },
    //},
    xaxis: {
    categories: datalabel,
    labels: {
    formatter: function (val) {
    return val
    }
    }
    },
    yaxis: {
    title: {
    text: 'Departments:'
    },
    },
    tooltip: {
    y: {
    formatter: function (val) {
    return val
    }
    }
    },
    fill: {
    opacity: 1,
    //colors: ['##5cb85c', '##f0ad4e', '#9C27B0'],
    },
    legend: {
    "outline-color:invert;outline-style:none;outline-width:0px;" />horizontalAlign: 'center',
    offsetX: 40
    },
    },

    },
    });

    }
    }
     
    Thanks

    Tuesday, June 23, 2020 3:05 PM

All replies