6

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

2 Answers 2

8

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

0
3

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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.