Skip to content

Commit

Permalink
Merge branch 'master' into production
Browse files Browse the repository at this point in the history
  • Loading branch information
youjung-hong committed Jan 12, 2018
2 parents d4b4c36 + 343efcb commit 14ed150
Show file tree
Hide file tree
Showing 23 changed files with 6,533 additions and 10,575 deletions.
170 changes: 170 additions & 0 deletions examples/example03-01-line-chart-basic-1.1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<!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/sample.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'>
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]
},
{
name: 'Somewhere1',
data: [-12.2, -10.7, -3.1, -13.3, -16.1, -4.2, 4.0, -2.1, -5.8, -2.5, -5.0, -8.9]
},
{
name: 'Somewhere2',
data: [-15.2, -13.7, -5.1, -16.3, -19.1, -7.2, 1.0, -4.1, -9.8, -12.5, -15.0, -18.9]
},
{
name: 'Somewhere3',
data: [-1, -2, -3, -4, -5.1, -6.2, 7.0, -8.1, -5.8, -10.5, -11.0, -12.9]
},
{
name: 'Somewhere4',
data: [12, 11, 10, 9, 8, 7, 6, 8.1, 5.8, 3.5, 2.0, 1.9]
},
{
name: 'Somewhere5',
data: [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
}
]
};
var options = {
chart: {
width: 700,
height: 400,
title: '24-hr Average Temperature'
},
yAxis: {
title: 'Temperature (Celsius)'
},
xAxis: {
title: 'Month',
type: 'datetime',
dateFormat: 'MMM'
},
series: {
showDot: true,
zoomable: true
},
tooltip: {
suffix: '°C'
},
plot: {
lines: [{
value: '05/01/2016',
color: 'red'
}, {
value: 'Aug',
color: 'green'
}],
bands: [{
range: [['04/01/2016', '06/01/2016'], ['05/01/2016', '07/01/2016']],
color: 'yellow',
opacity: 0.4
}, {
range: [['09/01/2016', '11/01/2016'], ['10/01/2016', '12/01/2016']],
color: 'brown',
opacity: 0.4,
mergeOverlappingRanges: true
}, {
range: ['01/01/2016', '03/01/2016'],
color: 'lightBlue',
opacity: 0.4
}]
}
};
var theme = {
series: {
colors: ['#D95576', '#00628C', '#00A8DA', '#1EA399', '#F7A655']
}
};

// For apply theme

// tui.chart.registerTheme('myTheme', theme);
// options.theme = 'myTheme';

var chart = tui.chart.lineChart(container, data, options);
</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.2.5/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>

<!--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/sample.js'></script>
<script class='code-js'>
window.chartCM = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'javascript',
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
indentUnit: 4,
gutters: ["CodeMirror-lint-markers"],
lint: true
});
chartCM.setSize(600, 500);
window.codeString = chartCM.doc.getValue();

window.evaluationCode(chartCM, codeString);
</script>
</body>
</html>
170 changes: 170 additions & 0 deletions examples/example03-01-line-chart-basic-1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<!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/sample.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'>
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]
},
{
name: 'Somewhere1',
data: [-12.2, -10.7, -3.1, -13.3, -16.1, -4.2, 4.0, -2.1, -5.8, -2.5, -5.0, -8.9]
},
{
name: 'Somewhere2',
data: [-15.2, -13.7, -5.1, -16.3, -19.1, -7.2, 1.0, -4.1, -9.8, -12.5, -15.0, -18.9]
},
{
name: 'Somewhere3',
data: [-1, -2, -3, -4, -5.1, -6.2, 7.0, -8.1, -5.8, -10.5, -11.0, -12.9]
},
{
name: 'Somewhere4',
data: [12, 11, 10, 9, 8, 7, 6, 8.1, 5.8, 3.5, 2.0, 1.9]
},
{
name: 'Somewhere5',
data: [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
}
]
};
var options = {
chart: {
width: 700,
height: 400,
title: '24-hr Average Temperature'
},
yAxis: {
title: 'Temperature (Celsius)'
},
xAxis: {
title: 'Month',
type: 'datetime',
dateFormat: 'MMM'
},
series: {
showDot: true,
zoomable: true
},
tooltip: {
suffix: '°C'
},
plot: {
lines: [{
value: '05/01/2016',
color: 'red'
}, {
value: 'Aug',
color: 'green'
}],
bands: [{
range: [['04/01/2016', '06/01/2016'], ['05/01/2016', '07/01/2016']],
color: 'yellow',
opacity: 0.4
}, {
range: [['09/01/2016', '11/01/2016'], ['10/01/2016', '12/01/2016']],
color: 'brown',
opacity: 0.4,
mergeOverlappingRanges: true
}, {
range: ['01/01/2016', '03/01/2016'],
color: 'lightBlue',
opacity: 0.4
}]
}
};
var theme = {
series: {
colors: ['#D95576', '#00628C', '#00A8DA', '#1EA399', '#F7A655']
}
};

// For apply theme

// tui.chart.registerTheme('myTheme', theme);
// options.theme = 'myTheme';

var chart = tui.chart.lineChart(container, data, options);
</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.2.5/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>

<!--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/sample.js'></script>
<script class='code-js'>
window.chartCM = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'javascript',
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
indentUnit: 4,
gutters: ["CodeMirror-lint-markers"],
lint: true
});
chartCM.setSize(600, 500);
window.codeString = chartCM.doc.getValue();

window.evaluationCode(chartCM, codeString);
</script>
</body>
</html>
Loading

0 comments on commit 14ed150

Please sign in to comment.