forked from nhn/tui.chart
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample03-01-line-chart-basic.html
116 lines (111 loc) · 3.95 KB
/
example03-01-line-chart-basic.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head lang="kr">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>3.1 [Line Chart] basic</title>
<link rel="stylesheet" type="text/css" href="../dist/tui-chart.css" />
<link rel='stylesheet' type='text/css' href='../node_modules/codemirror/lib/codemirror.css'/>
<link rel='stylesheet' type='text/css' href='../node_modules/codemirror/addon/lint/lint.css'/>
<link rel='stylesheet' type='text/css' href='./css/example.css'/>
</head>
<body>
<div class='wrap'>
<div class='code-html' id='code-html'>
<div id='chart-area'></div>
</div>
</div>
<div class='custom-area'>
<div id='error-dim'>
<span id='error-text'></span>
<div id='error-stack'></div>
<span id='go-to-dev-tool'>For more detail, open browser's developer tool and check it out.</span>
</div>
<div style='border: 0.2px solid #aaa;'>
<textarea id='code'></textarea>
</div>
<div class='apply-btn-area' style='width: 600px;'>
<button class="btn" style='position: absolute; right: 0px;' onclick='evaluationCode(chartCM, codeString);'>Run it!
</button>
<button class="btn" onclick="window.open('https://github.com/nhnent/tui.chart/wiki/theme')">More Theme
</button>
</div>
</div>
<!--Import chart.js and dependencies-->
<script type='text/javascript' src='https://rawgit.com/nhnent/tui.code-snippet/v1.3.0/dist/tui-code-snippet.js'></script>
<script type='text/javascript' src='https://rawgit.com/nhnent/raphael/v2.2.0b/raphael.js'></script>
<script src='../dist/tui-chart.js'></script>
<script class='code-js' id='code-js'>
var container = document.getElementById('chart-area');
var data = {
categories: ['01/01/2016', '02/01/2016', '03/01/2016', '04/01/2016', '05/01/2016', '06/01/2016', '07/01/2016', '08/01/2016', '09/01/2016', '10/01/2016', '11/01/2016', '12/01/2016'],
series: [
{
name: 'Seoul',
data: [-3.5, -1.1, 4.0, 11.3, 17.5, 21.5, 24.9, 25.2, 20.4, 13.9, 6.6, -0.6]
},
{
name: 'Seattle',
data: [3.8, 5.6, 7.0, 9.1, 12.4, 15.3, 17.5, 17.8, 15.0, 10.6, 6.4, 3.7]
},
{
name: 'Sydney',
data: [22.1, 22.0, 20.9, 18.3, 15.2, 12.8, 11.8, 13.0, 15.2, 17.6, 19.4, 21.2]
},
{
name: 'Moskva',
data: [-10.3, -9.1, -4.1, 4.4, 12.2, 16.3, 18.5, 16.7, 10.9, 4.2, -2.0, -7.5]
},
{
name: 'Jungfrau',
data: [-13.2, -13.7, -13.1, -10.3, -6.1, -3.2, 0.0, -0.1, -1.8, -4.5, -9.0, -10.9]
}
]
};
var options = {
chart: {
width: 1160,
height: 540,
title: '24-hr Average Temperature'
},
yAxis: {
title: 'Temperature (Celsius)',
pointOnColumn: true
},
xAxis: {
title: 'Month',
type: 'datetime',
dateFormat: 'MMM'
},
series: {
showDot: false,
zoomable: true
},
tooltip: {
suffix: '°C'
}
};
var theme = {
series: {
colors: [
'#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
'#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'
]
}
};
// For apply theme
// tui.chart.registerTheme('myTheme', theme);
// options.theme = 'myTheme';
var chart = tui.chart.lineChart(container, data, options);
</script>
<!--For tutorial page-->
<script src='../node_modules/codemirror/lib/codemirror.js'></script>
<script src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js'></script>
<script src='../node_modules/codemirror/addon/edit/matchbrackets.js'></script>
<script src='../node_modules/codemirror/addon/selection/active-line.js'></script>
<script src='../node_modules/codemirror/mode/javascript/javascript.js'></script>
<script src='../node_modules/codemirror/addon/lint/lint.js'></script>
<script src='../node_modules/codemirror/addon/lint/javascript-lint.js'></script>
<script src='./js/example.js'></script>
</body>
</html>