Google Chart - 구글 차트 1
Web Development 2022. 5. 5. 13:47 |반응형
구글 차트를 이용해 웹페이지에 그래프(Dual-Y Chart)를 그려보자.
서버가 필요하다면 아래 링크를 참고해 서버를 만든다.
2021.08.25 - [Linux] - Linux(Ubuntu) Build Your Own Web Server - 리눅스(우분투)로 웹서버 만들기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temperature');
data.addColumn('number', 'Humid');
data.addRows([
// 00: 1월, 01: 2월, 02: 3월...
[new Date(2022, 03, 01, 11, 30), 25, 70],
[new Date(2022, 03, 02, 11, 30), 26, 72],
[new Date(2022, 03, 03, 11, 30), 27, 75],
[new Date(2022, 03, 04, 11, 30), 29, 77],
[new Date(2022, 03, 05, 11, 30), 24, 74],
[new Date(2022, 03, 06, 11, 30), 26, 71],
[new Date(2022, 03, 07, 11, 30), 29, 74],
[new Date(2022, 03, 08, 11, 30), 31, 72],
[new Date(2022, 03, 09, 11, 30), 33, 69],
[new Date(2022, 03, 10, 11, 30), 29, 75],
[new Date(2022, 03, 11, 11, 30), 32, 72],
[new Date(2022, 03, 12, 11, 30), 31, 71]
]);
var options = {
title: 'Temperaure & Humid',
hAxis: {
title: 'Time'
},
series: {
0: { targetAxisIndex: 0 },
1: { targetAxisIndex: 1 }
},
vAxes: {
0: {
title: 'Temperature',
viewWindow: { min: -30, max: 50 }
},
1: {
title: 'Humid',
viewWindow: { min: 30, max: 100 }
}
}
//,
//curveType: 'function',
//legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px"></div>
</body>
</html>
|
HTML소스를 입력하고 저장한다.
※ 참고
반응형
'Web Development' 카테고리의 다른 글
| Google Chart with MySQL(MariaDB) - 구글 차트 2 (0) | 2022.05.05 |
|---|---|
| 간단한 HTML 예제: Video, File, Web link (0) | 2020.01.24 |
| 웹페이지에서 JSON 데이터 파싱하고 원하는대로 보여주기 (0) | 2020.01.24 |