Apexcharts remove old data series before render new series

Question

I'm using apex chart for simple data visualization from json output. My charts based on pure javascript and not Vue or other frameworks.

My json (php) backend create two json outputs fro draw the chart as below

JSON 1

{
    "x": "2019-05-27 16:18:48",
    "y": "100"
},
{
    "x": "2019-05-27 16:25:09",
    "y": "110"
},

JSON 2

{
        "x": "2019-05-27 16:18:48",
        "y": "60"
    },
    {
        "x": "2019-05-27 16:25:09",
        "y": "65"
    },

Based on the above two json outputs I retrieve data and draw my graph using the Category paired values method. below is the code responsible for retrieve data and draw the chart.

function for getting json data

function data_function(){
            $.ajax({
                type: "Get",
                    url: backend,
                    data:{
                        param: "all_a"
                    },
                    async: true,
                    cache: false,
                    success: function(data) {
                        a_data = data;

                        $.ajax({
                        apex_task: "Get",
                            url: backend,
                            data:{
                                param: "all_b"
                            },
                            async: true,
                            cache: false,
                            success: function(data) {
                                    b_data = data;
                                    chart(a_data,b_data);

                            }
                        });
                    }
            });
}

function for draw chart

function draw_chart(a_data,b_data) {               
    var options = {

            chart: {
            height: 400,
            type: 'bar',
            stacked: false
            },
            series: [
            {
                name: 'a',
                data: a_data, 
            },

            {
                name: 'b',
                data: b_data, 
            }],

            yaxis: [
             {
                axisTicks: {
                show: true,
                },
                axisBorder: {
                show: true,
                color: '#008FFB'
                },
                labels: {
                style: {
                    color: '#008FFB',
                }
                }

                    },
            ]
    }

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

This works fine until I second time render the chart with new data. when I load the different data without reloading the windows chart happen to be laggy and render multiple times with the old incorrect data. sometimes I have to run the data_fnction multiple times to render the chart properly.

How can I fix this? Do I need to use function like appendchart ? how can I use wiht my data_function

Servomechanism

Answer 1

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

var options = {
  chart: {
    height: 400,
    type: 'bar',
    stacked: false
  },
  series: [],
  yaxis: [{
    axisTicks: {
      show: true,
    },
    axisBorder: {
      show: true,
      color: '#008FFB'
    },
    labels: {
      style: {
        color: '#008FFB',
      }
    }
  }]
}

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

Your ajax call with updateSeries method of the chart

function data_function() {
  $.ajax({
    type: "Get",
    url: backend,
    data: {
      param: "all_a"
    },
    async: true,
    cache: false,
    success: function (data) {
      a_data = data;

      $.ajax({
        apex_task: "Get",
        url: backend,
        data: {
          param: "all_b"
        },
        async: true,
        cache: false,
        success: function (data) {
          b_data = data;

          chart.updateSeries([{
            name: 'a',
            data: a_data
          }, {
            name: 'b',
            data: b_data
          }])

        }
      });
    }
  });
}

Docs for updateSeries

Tombstone

Answer 2

Although there is the updateSeries function, you're allowed to render again the values of the chart by destroying the previous ones. This works with ApexCharts, ChartJS, etc.

var options = 
{
    series: [],
    chart: 
    {
        type: 'donut',
        height: 150
    },
    labels: ['...'],
};

// Destroy if exists in order to re-update the data
if (window.myChart)
    window.myChart.destroy();

window.myChart = new ApexCharts(chart, options);
window.myChart.render();

Twig