๐ ๊ณต๋ถํ๋ ์ง์ง์ํ์นด๋ ์ฒ์์ด์ง?
์น์์ ๊ทธ๋ํ ๋ง๋๋ Plot.js ์์๋ณด๊ธฐ ๋ณธ๋ฌธ
๐ฉ๐ป ๋ฐฑ์๋(Back-End)/Node js
์น์์ ๊ทธ๋ํ ๋ง๋๋ Plot.js ์์๋ณด๊ธฐ
์ง์ง์ํ์นด 2022. 11. 22. 13:59728x90
๋ฐ์ํ
<๋ณธ ๋ธ๋ก๊ทธ๋ plotly ์ function reference ๋ฅผ ์ฐธ๊ณ ํด์ ๊ณต๋ถํ๋ฉฐ ์์ฑํ์์ต๋๋ค :-)>
https://plotly.com/javascript/plotlyjs-function-reference/
Function
Detailed examples of Function Reference including changing color, size, log axes, and more in JavaScript.
plotly.com
๐ผ Streaming with Timestamp
๐บ ํ์ผ ๊ตฌ์กฐ
- index.html
<!DOCTYPE html>
<html>
<head>
<div class='my-div'>
Real-Time Chart with Plotly.js
</div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- Load papaparse.js -->
<script src="javascripts/papaparse.min.js"></script>
<!-- Load d3.js and c3.js -->
<script src="javascripts/d3.v3.min.js" charset="utf-8"></script>
<script src="javascripts/c3.min.js"></script>
</head>
<body>
<div id="graph"></div>
<script src="javascripts/index.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</body>
- javascripts/index.js
// 1. csv ๋ก๋ฉํด์ ์ ์ฒด์ ์ผ๋ก ๊ณต์ ํ์
var years = new Array();
var CNT_WAIT = new Array();
function parseData() {
Papa.parse("./data/test.csv", {
download: true,
complete: function(results) {
console.log(results)
for (var i = 1; i < results.data.length; i++) {
years.push(results.data[i][0]);
CNT_WAIT.push(results.data[i][1]);
}
console.log(years);
}
})
};
parseData();
// 2. ๊ทธ ๋ค์ Y ๊ฐ์ ๊ฐ์ ธ์ค๋ ํจ์
var index = 0;
function getYvalueFromCsv(index){
//csv ๋ก๋ฉ
return CNT_WAIT[index];
}
// ๊ทธ ๋ค์ X ๊ฐ ๊ฐ์ ธ์ค๋ ํจ์
function getXvalueFromCsv(index){
//csv ๋ก๋ฉ
return years[index];
}
// 3. ์๊ฐ์ ํ์ฉํด์ ๊ทธ๋ค์ ๊ฐ ์
๋ฐ์ดํธ ํ๊ธฐ
var time = new Date();
var data = [{
x: [getXvalueFromCsv(index)],
y: [getYvalueFromCsv(index)],
mode: 'lines',
line: {color: '#80CAF6'}
}]
Plotly.newPlot('graph', data);
// ๊ทธ ๋ค์ cnt ์ฆ๊ฐ์ํค๊ธฐ
var cnt = 0;
// 1์ด๋ง๋ค ์
๋ฐ์ดํธ ๋ฐ๋ณตํ๊ธฐ
var interval = setInterval(function() {
var time = new Date();
var update = {
x: [[getXvalueFromCsv(cnt)]],
y: [[getYvalueFromCsv(cnt)]]
}
console.log(getYvalueFromCsv(cnt))
console.log(getXvalueFromCsv(cnt))
var olderTime = time.setMinutes(time.getMinutes() - 1);
var futureTime = time.setMinutes(time.getMinutes() + 1);
var minuteView = {
xaxis: {
type: 'date',
range: [olderTime,futureTime]
}
};
// Plotly.relayout('graph', minuteView);
// ์ ์ฒด ํ๋กฏ์ ๋ค์ ๊ทธ๋ฆฌ๋ ๊ฒ ๋ณด๋ค, ๊ธฐ์กด์ ์
๋ฐ์ดํธ ํ๋ฉด์ ๊ทธ๋ฆฌ๊ธฐ
Plotly.extendTraces('graph', update, [0])
// cnt ๊ฐ 100 ์ด ๋๋ฉด ๋ค์ ์์
//if(++cnt === 100) clearInterval(interval);
++cnt;
}, 500);
- css/style.css
.my-div {
font-size : 40px;
height : 200px;
text-align : center;
}
๐บ ์๊ฐํ
728x90
๋ฐ์ํ
'๐ฉโ๐ป ๋ฐฑ์๋(Back-End) > Node js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| HTML์์ Python์ ์ฌ์ฉํ ์ ์๋ PyScript (2) (0) | 2022.11.25 |
|---|---|
| HTML์์ Python์ ์ฌ์ฉํ ์ ์๋ PyScript (1) (0) | 2022.11.25 |
| ์น์์ ๊ทธ๋ํ ๋ง๋๋ Google Chart API ์์๋ณด๊ธฐ (0) | 2022.11.21 |
| ์น์์ ๊ทธ๋ํ ๋ง๋๋ d3.js ์์๋ณด๊ธฐ (0) | 2022.11.21 |
| ์น์์ ๊ทธ๋ํ ๋ง๋๋ c3.js ์์๋ณด๊ธฐ (0) | 2022.11.21 |
'๐ฉ๐ป ๋ฐฑ์๋(Back-End)/Node js' Related Articles
more
Comments