I am using Apexcharts for creating charts in my application. onl oad all first data is loading perfectly. but on applying filter i need to refresh or update the charts with the new data from filter, I tried using updateOptions method but its showing the chart instance variable is undefined. on update the variable is showing undefined, please help and thanks in advance.

My html and js codes are below.

**HTML Code ** This is the div where graph is rendering

<div >

              <!-- PIE CHART -->
              <div >
                <div >
                  <h3 >HSE Incidents Statistics YTD</h3>

                  <div >
                    
                  <select  name="yearFilter" id="yearFilter" onchange="drawchart1();">
                    <?php 
                      $year_start  = 2020;
                      $year_end = date('Y'); // current Year
                      $user_selected_year = date('Y'); // user date of birth year
                      for ($i_year = $year_start; $i_year <= $year_end; $i_year  ) {
                        $selected = ($user_selected_year == $i_year ? ' selected' : ''); ?>
                          <option <?= $selected ?> value="<?php echo $i_year ?>"><?php echo $i_year ?></option>
                      <?php
                        
                      }   
                    ?>
                    </select>
                    <button type="button"  data-card-widget="maximize"><i ></i>
                    </button>
                  </div>
                  <!-- /.card-tools -->
                </div>
                <div  id="chartReport1">
                  <div >
                    <div >
                      <div ></div>
                    </div>
                    <div >
                      <div ></div>
                    </div>
                  </div>


                  <div id="hse-incidents-ytd" ></div>
                </div>
                <!-- /.card-body -->
              </div>
              <!-- /.card -->

            </div>```




**JS CODE**


```$(document).ready(function() {
      $.ajax({
        url: "<?php echo $root_url ?>/data-hse-incidents.php",
        type: "GET",
        success: function(data) {
          console.log(data);
          var month = [];
          var count = [];

          for (var i in data) {
            month.push(data[i].month);
            count.push(data[i].count);
          }

          var options = {
            series: [{
              name: 'Total Count',
              data: count,
            }],
            chart: {
              type: 'bar',
              height: 300
            },
            plotOptions: {
              bar: {
                horizontal: false,
                columnWidth: '30px',
                endingShape: 'rounded',
                dataLabels: {
                  position: 'top', // top, center, bottom
                },
              },
            },
            dataLabels: {
              enabled: true,
              offsetY: -20,
              style: {
                fontSize: '12px',
                colors: ["#304758"]
              }
            },
            stroke: {
              show: true,
              width: 2,
              colors: ['transparent']
            },
            xaxis: {
              categories: month,
              title: {
                text: 'Month'
              }
            },
            yaxis: {
              title: {
                text: 'Total Count'
              }
            },
            fill: {
              opacity: 1
            },
            tooltip: {
              y: {
                formatter: function(val) {
                  return val
                }
              }
            }
          };

          var chart = new ApexCharts(document.querySelector("#hse-incidents-ytd"), options);
          chart.render();

        },
        error: function(data) {

        }
      });
      
    });
  function updateChart1() {

      var filter_year = $('#yearFilter').val();
      alert(filter_year);// working
      $.ajax({
        url: "<?php echo $root_url ?>/data-hse-incidents.php?y=" filter_year,
        type: "GET",
        success: function(data) {
              
            var month = [];
            var count = [];
            for (var i in data) {
              month.push(data[i].month);
              count.push(data[i].count);
            }
            alert(count); // working
            
            chart.updateOptions({ // error occurring here
                xaxis: {
                  categories: month,
                },
                series: [{
                    data: count,
                }],
            })
      },
      error: function(data) {}
      });
}

   function drawchart1() {
      updateChart1();
      
     }

Image of error when I change the filter

i need to update or refresh the chart with new data , data is coming correctly from the api , its not loading into the chart when filter is applied that's the issue. first load of chart is working fine.

CodePudding user response：

Thanks for @kikon, you mentioned why the variable was not getting outside.

here is how i resolved that issue.

var chart, chart2,chart3,chart4,chart5,chart6,chart7,chart8,chart9,chart10,LineGraph,LineGraph1;
 // fucntion to load the ajax result
    
jQuery.extend({
    getValues: function(url) {
        // alert()
        var result = null;
        $.ajax({
            url: url,
            type: 'get',
            async: false,
            success: function(data) {
                console.log(data);
                result = data;
            }
        });
    return result;
    }
});

// fucntion to load the ajax result

$(document).ready(function() {

var results = $.getValues("<?php echo $root_url ?>/data-hse-incidents.php");
var month = [];
var count = [];

  for (var i in results) {
    month.push(results[i].month);
    count.push(results[i].count);
  }

  var options = {
    series: [{
      name: 'Total Count',
      data: count,
    }],
    chart: {
      type: 'bar',
      height: 300
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '30px',
        endingShape: 'rounded',
        dataLabels: {
          position: 'top', // top, center, bottom
        },
      },
    },
    dataLabels: {
      enabled: true,
      offsetY: -20,
      style: {
        fontSize: '12px',
        colors: ["#304758"]
      }
    },
    stroke: {
      show: true,
      width: 2,
      colors: ['transparent']
    },
    xaxis: {
      categories: month,
      title: {
        text: 'Month'
      }
    },
    yaxis: {
      title: {
        text: 'Total Count'
      }
    },
    fill: {
      opacity: 1
    },
    tooltip: {
      y: {
        formatter: function(val) {
          return val
        }
      }
    }
  };

  chart = new ApexCharts(document.querySelector("#hse-incidents-ytd"), options);
  chart.render();
  
});

function updateChart1() {

    var filter_year = $('#yearFilter').val();
    // alert(filter_year);
    var results_updated = $.getValues("<?php echo $root_url ?>/data-hse-incidents.php?y=" filter_year);
    var month = [];
      var count = [];
      for (var i in results_updated) {
          month.push(results_updated[i].month);
          count.push(results_updated[i].count);
      }

    chart.updateOptions({
              xaxis: {
                categories: month,
              },
              series: [{
                  data: count,
              }],
          });
    }$('#yearFilter').change(function () {
  updateChart1();  });