๐ ๊ณต๋ถํ๋ ์ง์ง์ํ์นด๋ ์ฒ์์ด์ง?
์น์์ ๊ทธ๋ํ ๋ง๋๋ Google Chart API ์์๋ณด๊ธฐ ๋ณธ๋ฌธ
๐ฉ๐ป ๋ฐฑ์๋(Back-End)/Node js
์น์์ ๊ทธ๋ํ ๋ง๋๋ Google Chart API ์์๋ณด๊ธฐ
์ง์ง์ํ์นด 2022. 11. 21. 10:08728x90
๋ฐ์ํ
<๋ณธ ๋ธ๋ก๊ทธ๋ mrlee-sub ๋ ์ ๋ธ๋ก๊ทธ๋ฅผ ์ฐธ๊ณ ํด์ ๊ณต๋ถํ๋ฉฐ ์์ฑํ์์ต๋๋ค :-)>
https://mrlee-sub.tistory.com/329
ํต๊ณ ๋ฐ์ดํฐ๋ฅผ ์ํ๊ทธ๋ํ(piechart)๋ก ๋ํ๋ด๊ธฐ (google chart api ์ฐ๋)
๊ตฌ๊ธapi(google charts api)๋ฅผ ์ด์ฉ, ํต๊ณ๋ฐ์ดํฐ๋ฅผ ๋ํ๋ผ ๊ฑด๋ฐ โ ๋จผ์ google charts api์ฌ์ดํธ์ ๋ฐฉ๋ฌธํด์ ์ด๋ค ์์ค์ธ์ง ์ดํด๋ด์ผํ๋ค. ์์ ์์ค๋ฅผ ๊ทธ๋๋ก ๊ฐ๊ณ ์ค๋ ๋ฐ์ดํฐ๊ฐ์ ์กฐ๊ธ ๋ฐ๊ฟ๋ณด์๋ค. ์ฌ๊ธฐ
mrlee-sub.tistory.com
๐บ Real Time graph
๐ chart ์์
https://webdeasy.de/en/javascript-real-time-charts/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#chart_div {
width: 1200px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- CONTAINER FOR CHART -->
<div id="chart_div"></div>
<script
type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"
></script>
<script>
// load current chart package
google.charts.load('current', {
packages: ['corechart', 'line'],
});
// set callback function when api loaded
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// create data object with default value
let data = google.visualization.arrayToDataTable([
['Time', 'CPU Usage', 'RAM'],
[0, 0, 0],
]);
// create options object with titles, colors, etc.
let options = {
title: 'CPU Usage',
hAxis: {
textPosition: 'none',
},
vAxis: {
title: 'Usage',
},
};
// draw chart on load
let chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
// max amount of data rows that should be displayed
let maxDatas = 50;
// interval for adding new data every 250ms
let index = 0;
setInterval(function () {
// instead of this random, you can make an ajax call for the current cpu usage or what ever data you want to display
let randomCPU = Math.random() * 20;
let randomRAM = Math.random() * 50 + 20;
if (data.getNumberOfRows() > maxDatas) {
data.removeRows(0, data.getNumberOfRows() - maxDatas);
}
data.addRow([index, randomCPU, randomRAM]);
chart.draw(data, options);
index++;
}, 100);
}
</script>
</body>
</html>
1) ๊ตฌ๊ธapi ๊ตฌํ์ ์ํ ๊ธฐ๋ณธ์์ค๋ฅผ ๋ถ๋ฌ์ค๊ธฐ
src="https://www.gstatic.com/charts/loader.js"2) ์ค์ ๋ฐ์ดํฐ์ ๋ค์ด๊ฐ๋ ๊ฒ์ ๋ฃ๊ธฐ
let data = google.visualization.arrayToDataTable([
['Time', 'CPU Usage', 'RAM'],
[0, 0, 0],
]);
// create options object with titles, colors, etc.
let options = {
title: 'CPU Usage',
hAxis: {
textPosition: 'none',
},
vAxis: {
title: 'Usage',
},
};3) chart๋ผ๋ ์ค๋ธ์ ํธ๊ฐ ๊ตฌํ๋ ์ฅ์๋ฅผ ๋ง๋ค๊ธฐ
<!-- CONTAINER FOR CHART -->
<div id="chart_div"></div>
728x90
๋ฐ์ํ
'๐ฉโ๐ป ๋ฐฑ์๋(Back-End) > Node js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| HTML์์ Python์ ์ฌ์ฉํ ์ ์๋ PyScript (1) (0) | 2022.11.25 |
|---|---|
| ์น์์ ๊ทธ๋ํ ๋ง๋๋ Plot.js ์์๋ณด๊ธฐ (0) | 2022.11.22 |
| ์น์์ ๊ทธ๋ํ ๋ง๋๋ d3.js ์์๋ณด๊ธฐ (0) | 2022.11.21 |
| ์น์์ ๊ทธ๋ํ ๋ง๋๋ c3.js ์์๋ณด๊ธฐ (0) | 2022.11.21 |
| ์นํ์ด์ง์ csv ํ์ผ ๊ทธ๋ํ ๊ทธ๋ฆฌ๊ธฐ (0) | 2022.11.17 |
'๐ฉ๐ป ๋ฐฑ์๋(Back-End)/Node js' Related Articles
more
Comments