johan
/
twelve-heroes


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!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">&nbsp;Theme</label>
            &nbsp; &nbsp;
            <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>