<!DOCTYPE html> <html> <head lang="kr"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <title>[Bar Chart] basic</title> <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/nhnent/tui.chart/2.4.0/dist/chart.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/nhnent/tui.chart/2.4.0/samples/css/sample.css" /> </head> <body> <h1><a href="https://github.com/nhnent/tui.chart" target="_blank">TUI Chart</a></h1> <div class="code-html"> <div id="chart-area"></div> <div class="custom-area"> <div class="apply-btn-area"> <input type="checkbox" id="use-theme" onclick="onCheckboxClick(this);"><label for="use-theme"> Theme</label> <button id="btn" onclick="onBtnClick();">Apply Custom Data</button> <input type="hidden" id="type" value="barChart" /> </div> <div> <div>Chart Data</div> <textarea id="data"> { "categories": ["June", "July", "Aug", "Sep", "Oct", "Nov"], "series": [ { "name": "Budget", "data": [5000, 3000, 5000, 7000, 6000, 4000] }, { "name": "Income", "data": [8000, 1000, 7000, 2000, 5000, 3000] }, { "name": "Expenses", "data": [4000, 4000, 6000, 3000, 4000, 5000] }, { "name": "Debt", "data": [6000, 3000, 3000, 1000, 2000, 4000] } ] } </textarea> </div> <div> <div>Chart Options</div> <textarea id="options"> { "chart": { "width": 700, "height": 400, "title": "Monthly Revenue", "format": "1,000" }, "yAxis": { "title": "Month" }, "xAxis": { "title": "Amount", "min": 0, "max": 9000 } } </textarea> <div class="btn-area"> <button onclick="openWindow('https://github.nhnent.com/fe/tui.chart/wiki/table-of-supported-options')">More Options</button> </div> </div> <div id="theme-area"> <div>Chart Theme</div> <textarea id="theme"> { "series": { "colors": ["#63A69F", "#F2E1AC", "#F2836B", "#F2594B"] } } </textarea> <div class="btn-area"> <button onclick="openWindow('https://github.com/nhnent/tui.chart/wiki/tutorial#full-theme')">More Theme</button> </div> </div> </div> </div> <script src="https://cdn.rawgit.com/nhnent/tui.code-snippet/1.2.1/code-snippet.js"></script> <script src="https://cdn.rawgit.com/nhnent/tui.component.effects/1.1.0/effects.min.js"></script> <script src="https://cdn.rawgit.com/DmitryBaranovskiy/raphael/v2.2.6/raphael.min.js"></script> <script src="https://cdn.rawgit.com/nhnent/tui.chart/2.4.0/dist/chart.min.js"></script> <script src="https://cdn.rawgit.com/nhnent/tui.chart/2.4.0/samples/js/sample.js"></script> <script class="code-js"> var container = document.getElementById('chart-area'), data = { categories: ['June', 'July', 'Aug', 'Sep', 'Oct', 'Nov'], series: [ { name: 'Budget', data: [5000, 3000, 5000, 7000, 6000, 4000] }, { name: 'Income', data: [8000, 1000, 7000, 2000, 5000, 3000] }, { name: 'Expenses', data: [4000, 4000, 6000, 3000, 4000, 5000] }, { name: 'Debt', data: [6000, 3000, 3000, 1000, 2000, 4000] } ] }, options = { chart: { width: 700, height: 400, title: 'Monthly Revenue', format: '1,000' }, yAxis: { title: 'Month' }, xAxis: { title: 'Amount', min: 0, max: 9000 } }; tui.chart.barChart(container, data, options); </script> </body> </html>