Merge branch 'master' into production

nhn · Jan 12, 2018 · 14ed150 · 14ed150
2 parents d4b4c36 + 343efcb
commit 14ed150
Show file tree

Hide file tree

Showing 23 changed files with 6,533 additions and 10,575 deletions.
diff --git a/examples/example03-01-line-chart-basic-1.1.html b/examples/example03-01-line-chart-basic-1.1.html
@@ -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>
diff --git a/examples/example03-01-line-chart-basic-1.html b/examples/example03-01-line-chart-basic-1.html
@@ -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>