vue-apexcharts
vue-apexcharts copied to clipboard
updateSeries moves page scroll
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>