<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dynamic Updating Line Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
<apexchart ref="realtimeChart" type=line height=350 :options="chartOptions" :series="series" />
</div>
<!-- Below element is just for displaying source code. it is not required. DO NOT USE -->
<div id="html">
<div id="chart">
<apexchart ref="realtimeChart" type=line height=350 :options="chartOptions" :series="series" />
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<script>
var lastDate = 0;
var data = []
function getDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
while (i < count) {
var x = baseval;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
data.push({
x,
y
});
lastDate = baseval
baseval += 86400000;
i++;
}
}
getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
min: 10,
max: 90
})
function getNewSeries(baseval, yrange) {
var newDate = baseval + 86400000;
lastDate = newDate
data.push({
x: newDate,
y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
})
}
function resetData() {
data = data.slice(data.length - 10, data.length);
}
new Vue({
el: '#chart',
components: {
apexchart: VueApexCharts,
},
data: {
series: [{
data: data.slice()
}],
chartOptions: {
chart: {
animations: {
enabled: true,
easing: 'linear',
dynamicAnimation: {
speed: 2000
}
},
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
title: {
text: 'Dynamic Updating Chart',
align: 'left'
},
markers: {
size: 0
},
xaxis: {
type: 'datetime',
range: 777600000,
},
yaxis: {
max: 100
},
legend: {
show: false
}
}
},
mounted: function () {
this.intervals()
},
methods: {
intervals: function () {
var me = this
window.setInterval(function () {
getNewSeries(lastDate, {
min: 10,
max: 90
})
me.$refs.realtimeChart.updateSeries([{
data: data
}])
}, 2000)
// every 60 seconds, we reset the data
window.setInterval(function () {
resetData()
me.$refs.realtimeChart.updateSeries([{
data
}], false, true)
}, 60000)
}
}
})
</script>
</body>
</html>