apexcharts / vue-apexcharts

📊 Vue 2 component for ApexCharts
https://apexcharts.com
MIT License
1.33k stars 135 forks source link

updateSeries moves page scroll #360

Closed M-Barari closed 1 month ago

M-Barari commented 3 years ago

Hi. I'm using live line chart and when I scroll bellow the chart on each update it moves up page scroll a little bit (my interval is 1000 so each second)

here is the code:


<template>
  <div id="chart">
    <apexchart type="line" height="100" ref="chart" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
let lastDate = 0;
let data = []
let TICKINTERVAL = 86400000
let XAXISRANGE = 777600000
function getDayWiseTimeSeries(baseval, count, yrange) {
  let i = 0;
  while (i < count) {
    let x = baseval;
    let y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    data.push({
      x, y
    });
    lastDate = baseval
    baseval += TICKINTERVAL;
    i++;
  }
}

getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
  min: 10,
  max: 90
})

function getNewSeries(baseval, yrange) {
  let newDate = baseval + TICKINTERVAL;
  lastDate = newDate

  for(let i = 0; i< data.length - 10; i++) {
    // IMPORTANT
    // we reset the x and y of the data which is out of drawing area
    // to prevent memory leaks
    data[i].x = newDate - XAXISRANGE - TICKINTERVAL
    data[i].y = 0
  }

  data.push({
    x: newDate,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  })
}

function resetData(){
  // Alternatively, you can also reset the data at certain intervals to prevent creating a huge series 
  data = data.slice(data.length - 10, data.length);
}

export default {
  name: "BtcChart",
  props: {
    color: String,
  },
  data() {
    return {
      series: [{
        data: data.slice()
      }],
      chartOptions: {
        chart: {
          id: 'realtime',
          height: 100,
          type: "line",
          zoom: {
            enabled: false,
          },
          animations: {
            enabled: true,
            easing: "linear",
            dynamicAnimation: {
              speed: 1000
            }
          },
          toolbar: {
            show: false,
          },
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: "smooth",
          width: 2,
          colors: [this.color],
        },
        grid: {
          show: false,
        },
        tooltip: {
          enabled: false,
          x: {
            format: "dd MMM yyyy",
          },
        },
        xaxis: {
          axisBorder: {
            show: false,
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: false,
          },
        },
        yaxis: {
          show: false,
        },
      },
    };
  },
  mounted: function () {
    var me = this
    window.setInterval(function () {
      getNewSeries(lastDate, {
        min: 10,
        max: 90
      })

      me.$refs.chart.updateSeries([{
        data: data
      }])
    }, 1000)

    // every 60 seconds, we reset the data to prevent memory leaks
    window.setInterval(function () {
      resetData()

      me.$refs.chart.updateSeries([{
        data
      }], false, true)
    }, 30000)
  },
};
</script>
github-actions[bot] commented 1 month ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.