Comments (10)
Thank you, I'll give it a try
from smoothie.
"Might be lag"? Does it not happen every frame? Do you have the source code? Or a video recording? Or a performance profiling file?
The data is kinda huge NGL, so it might really be the case that rendering cannot be faster. Smoothie re-renders every frame from scratch.
from smoothie.
But when the point on a line changes from -10000 to 10000, it will be too laggy. It is obvious on Windows computers that the data value changes greatly, and it will be stuck when there is a lot of data
from smoothie.
<style lang="scss">
.smoothie-chart-tooltip {
background: #444;
padding: 1em;
margin-top: 20px;
font-family: "consolas";
color: white;
font-size: 14px;
pointer-events: none;
}
</style>
<style lang="scss" scoped>
.container {
overflow: hidden;
background-color: #353535;
.row {
width: 100%;
display: flex;
.col-1 {
width: 100px;
}
.col-11 {
flex: 1;
}
}
.align-div {
text-align: center;
color: #fff;
font-weight: bold;
height: 60px;
position: relative;
}
.align-to-graph {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
canvas {
border: solid 1px #333;
}
}
</style>
<template>
<div class="container">
<div class="row">
<div class="col-1">
<div
v-for="channel in channels"
:style="{ height: height + 'px' }"
class="align-div"
:key="channel"
>
<span class="align-to-graph">{{ channel }}</span>
</div>
</div>
<div class="col-11">
<canvas
id="time-series"
style="width: 100%"
:style="{ height: height * channels.length + 'px' }"
></canvas>
</div>
</div>
</div>
</template>
<script>
import { SmoothieChart, TimeSeries } from "../../utils/smoothie";
const COLORS = [
"#3cb44b",
"#03cea4",
"#f07537",
"#ff6384",
"#9c51ba",
"#d4b2d8",
"#222",
"#b7c448",
"#4272bf",
"#36a2eb",
"#ffce56",
"#f7464a",
"#ffffff",
"#add8e6",
"#e5a2c2",
"#4bc0c0",
"#3cb44b",
"#03cea4",
"#f07537",
"#ff6384",
"#9c51ba",
"#d4b2d8",
"#222",
"#b7c448",
"#4272bf",
"#36a2eb",
"#ffce56",
"#f7464a",
"#ffffff",
"#add8e6",
"#e5a2c2",
"#4bc0c0",
"#3cb44b",
"#03cea4",
"#f07537",
"#ff6384",
"#9c51ba",
"#d4b2d8",
"#222",
"#b7c448",
"#4272bf",
"#36a2eb",
"#ffce56",
"#f7464a",
"#ffffff",
"#add8e6",
"#e5a2c2",
"#4bc0c0",
"#3cb44b",
"#03cea4",
"#f07537",
"#ff6384",
"#9c51ba",
"#d4b2d8",
"#222",
"#b7c448",
"#4272bf",
"#36a2eb",
"#ffce56",
"#f7464a",
"#ffffff",
"#add8e6",
"#e5a2c2",
"#4bc0c0"
];
const getColor = colorNumber => {
return COLORS[colorNumber % COLORS.length];
};
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const maxValidValue = 2;
const offsetSignal = (
amplitude,
channelNumber,
channelAmount = 6,
unit = "V", // V uV
scale = 1
) => {
if (unit == "uV") amplitude = amplitude / 1000000;
let scaledAmplitude = amplitude * scale;
let offset = maxValidValue * (channelAmount - channelNumber - 1);
return parseFloat(scaledAmplitude) + offset;
};
const channels = "Cz,CP1,C4,Pz,O1,Fp1,CP6,O2,CP2,P8,C3,P7,Fp2,F8,CP5,F7,HEOL,FC5,HEOR,P4,T7,F3,T8,FC2,PO4,FC6,P3,PO3,Oz,F4,FC1,Fz,FC4,Fpz,P6,FCz,C6,POz,F6,PO6,PO8,C2,TP8,F2,FT8,AF4,AF8,CP4,AF7,CP3,FT7,AF3,TP7,F1,PO7,C1,F5,PO5,C5,ECG,P5,VEOL,FC3,VEOU".split(
","
);
export default {
data() {
return {
height: 50,
channels,
charts: [],
series: [],
init: false,
unit: "V",
scale: 1
};
},
created() {
setInterval(() => {
if (this.init) {
let start = performance.now();
for (let j = 0; j < this.channels.length; j++) {
for (let i = 0; i < 80; i++) {
this.updateChannelData(
j,
Date.now(),
getRandomNumber(-100000, 180000)
);
}
}
let end = performance.now();
console.log(end - start);
}
}, 77);
},
mounted() {
const canvas = document.getElementById("time-series");
this.charts = new SmoothieChart({
millisPerPixel: 10,
responsive: true,
tooltip: true,
tooltipLine: {
strokeStyle: "#FF0000"
},
grid: {
fillStyle: "#555",
strokeStyle: "rgba(0,0,0,0.1)",
sharpLines: false,
verticalSections: this.channels.length,
borderVisible: true
},
maxValue: this.channels.length * maxValidValue,
minValue: 0,
interpolation: "linear",
labels: {
disabled: true,
fillStyle: "#fff",
fontSize: 12
}
});
this.channels.forEach((channel, idx) => {
this.series.push(new TimeSeries());
this.charts.addTimeSeries(this.series[idx], {
strokeStyle: getColor(idx)
});
});
// render chart
this.charts.streamTo(canvas, 0);
// this.charts.options.limitFPS = 60;
this.init = true;
},
methods: {
updateChannelData(idx, timestamp, data) {
let serie = this.series[idx];
serie.append(
timestamp,
offsetSignal(data, idx, this.channels.length, this.unit, this.scale)
);
}
}
};
</script>
The CPU usage rate is 54%
The GPU usage rate is 35%
https://github.com/joewalnes/smoothie/assets/22467963/4dd51eb9-56e0-4ebb-b821-ee5d85929983
from smoothie.
Idk, with the following code there is no significant lag for me. I go to http://smoothiecharts.org/ and paste the code in the console. Please see if this is the same for you.
Code
const COLORS = [
"#3cb44b",
"#03cea4",
"#f07537",
"#ff6384",
"#9c51ba",
"#d4b2d8",
"#222",
"#b7c448",
"#4272bf",
"#36a2eb",
"#ffce56",
"#f7464a",
"#ffffff",
"#add8e6",
"#e5a2c2",
"#4bc0c0",
"#3cb44b",
"#03cea4",
"#f07537",
"#ff6384",
"#9c51ba",
"#d4b2d8",
"#222",
"#b7c448",
"#4272bf",
"#36a2eb",
"#ffce56",
"#f7464a",
"#ffffff",
"#add8e6",
"#e5a2c2",
"#4bc0c0",
"#3cb44b",
"#03cea4",
"#f07537",
"#ff6384",
"#9c51ba",
"#d4b2d8",
"#222",
"#b7c448",
"#4272bf",
"#36a2eb",
"#ffce56",
"#f7464a",
"#ffffff",
"#add8e6",
"#e5a2c2",
"#4bc0c0",
"#3cb44b",
"#03cea4",
"#f07537",
"#ff6384",
"#9c51ba",
"#d4b2d8",
"#222",
"#b7c448",
"#4272bf",
"#36a2eb",
"#ffce56",
"#f7464a",
"#ffffff",
"#add8e6",
"#e5a2c2",
"#4bc0c0"
];
const getColor = colorNumber => {
return COLORS[colorNumber % COLORS.length];
};
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const maxValidValue = 2;
const offsetSignal = (
amplitude,
channelNumber,
channelAmount = 6,
unit = "V", // V uV
scale = 1
) => {
if (unit == "uV") amplitude = amplitude / 1000000;
let scaledAmplitude = amplitude * scale;
let offset = maxValidValue * (channelAmount - channelNumber - 1);
return parseFloat(scaledAmplitude) + offset;
};
const channels = "Cz,CP1,C4,Pz,O1,Fp1,CP6,O2,CP2,P8,C3,P7,Fp2,F8,CP5,F7,HEOL,FC5,HEOR,P4,T7,F3,T8,FC2,PO4,FC6,P3,PO3,Oz,F4,FC1,Fz,FC4,Fpz,P6,FCz,C6,POz,F6,PO6,PO8,C2,TP8,F2,FT8,AF4,AF8,CP4,AF7,CP3,FT7,AF3,TP7,F1,PO7,C1,F5,PO5,C5,ECG,P5,VEOL,FC3,VEOU".split(
","
);
const component = {
data() {
return {
height: 50,
channels,
charts: [],
series: [],
init: false,
unit: "V",
scale: 1
};
},
created() {
setInterval(() => {
if (this.init) {
let start = performance.now();
for (let j = 0; j < this.channels.length; j++) {
for (let i = 0; i < 80; i++) {
this.updateChannelData(
j,
Date.now(),
getRandomNumber(-100000, 180000)
);
}
}
let end = performance.now();
console.log(end - start);
}
}, 77);
},
mounted() {
const canvas = document.getElementById("time-series");
this.charts = new SmoothieChart({
millisPerPixel: 10,
responsive: true,
tooltip: true,
tooltipLine: {
strokeStyle: "#FF0000"
},
grid: {
fillStyle: "#555",
strokeStyle: "rgba(0,0,0,0.1)",
sharpLines: false,
verticalSections: this.channels.length,
borderVisible: true
},
maxValue: this.channels.length * maxValidValue,
minValue: 0,
interpolation: "linear",
labels: {
disabled: true,
fillStyle: "#fff",
fontSize: 12
}
});
this.channels.forEach((channel, idx) => {
this.series.push(new TimeSeries());
this.charts.addTimeSeries(this.series[idx], {
strokeStyle: getColor(idx)
});
});
// render chart
this.charts.streamTo(canvas, 0);
// this.charts.options.limitFPS = 60;
this.init = true;
},
updateChannelData(idx, timestamp, data) {
let serie = this.series[idx];
serie.append(
timestamp,
offsetSignal(data, idx, this.channels.length, this.unit, this.scale)
);
}
}
const canvas = document.createElement('canvas')
canvas.id = 'time-series';
canvas.style.width = "1500px"
canvas.style.height = "1000px"
document.body.prepend(canvas)
Object.assign(component, component.data());
component.created();
component.mounted();
when the point on a line changes from -10000 to 10000, it will be too laggy
Perhaps try the scaleSmoothing: 1
option.
from smoothie.
When I set scaleSmoothing:1
, it becomes super sluggish,
and when I set interpolation:'bezier'
, it also becomes super sluggish.
browser : Microsoft Edge
I am using the device:
Device Name: LAPTOP-LNAR8SE9(lenovo)
processor: Intel (R) Core (TM) i7-8565U CPU @ 1.80GHz 1.99 GHz
Machine with RAM: 16.0 GB (15.8 GB available)
system: Windows 11 Professional Edition
from smoothie.
I tested the above code on different models of computers, and some of them experienced severe lag; Some computers don't lag
May I ask, what is the possible cause of interface lag?
from smoothie.
I'm not sure. I think it would be much easier to figure it out if you ran the profiler.
from smoothie.
Sorry, there is no problem with your code
from smoothie.
Well, it's still performing poorly isn't it? But OK.
from smoothie.
Related Issues (20)
- Tooltip line shows up but not the tooltip itself
- stream jumpy on the right end with non-real time data HOT 3
- Bug: when keep adding a constant value to the TimeSeries HOT 3
- NaN value of time breaks dropOldData causing performance lag HOT 2
- Smoothie charts render differently if I open another tab or scroll up/down HOT 3
- Idea: Polar/Circular Charts HOT 4
- How to destroy component, release memory and clear events? HOT 1
- Tooltip does not display when chart is stopped HOT 1
- Bug when adjusting page zoom HOT 1
- Release? Pre-release? HOT 7
- Any legend options? HOT 1
- Can not load smoothie.js HOT 3
- change smoothie function properties dynamically HOT 3
- GPLv3 / LGPLv3 license? HOT 4
- Stop Scrolling But Line Running HOT 2
- Consider utilizing `requestAnimationFrame`'s callback argument
- fix: smudging at some fractional `devicePixelRatio`
- Merge changes from a fork
- Rendering onto an OffscreenCanvas using Web Workers HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from smoothie.