<commit_before>
<!DOCTYPE html>
<html>
<head lang="kr">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>7.2 [Pie Chart] center legend</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: ['Browser'],
    series: [
        {
            name: 'Chrome',
            data: 30.02
        },
        {
            name: 'IE',
            data: 25.47
        },
        {
            name: 'Firefox',
            data: 12.71
        },
        {
            name: 'Safari',
            data: 10.45
        },
        {
            name: 'Opera',
            data: 10.10
        },
        {
            name: 'Etc',
            data: 11.25
        }
    ]
};
var options = {
    chart: {
        width: 700,
        height: 700,
        title: 'Usage share of web browsers',
        format: function(value, chartType, areaType, valuetype, legendName) {
            if (areaType === 'makingSeriesLabel') { // formatting at series area
                value = value + '%';
            }

            return value;
        }
    },
    series: {
        showLegend: true,
        showLabel: true,
        labelAlign: 'center'
    },
    tooltip: {
        suffix: '%'
    },
    legend: {
        visible: false
    }
};
var theme = {
    series: {
        series: {
            colors: [
                '#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
                '#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'
            ]
        },
        label: {
            color: '#fff',
            fontFamily: 'sans-serif'
        }
    }
};

// For apply theme

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

tui.chart.pieChart(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>
<commit_msg>change: pie chart example update<commit_after>
<!DOCTYPE html>
<html>
<head lang="kr">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title>7.2 [Pie Chart] center legend</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: ['Browser'],
    series: [
        {
            name: 'Chrome',
            data: 300.02
        },
        {
            name: 'IE',
            data: 250.47
        },
        {
            name: 'Firefox',
            data: 120.71
        },
        {
            name: 'Safari',
            data: 100.45
        },
        {
            name: 'Opera',
            data: 100.10
        },
        {
            name: 'Etc',
            data: 110.25
        }
    ]
};
var options = {
    chart: {
        width: 700,
        height: 700,
        title: 'Usage share of web browsers'
    },
    series: {
        showLegend: true,
        showLabel: true,
        labelAlign: 'center'
    },
    legend: {
        visible: false
    }
};
var theme = {
    series: {
        series: {
            colors: [
                '#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
                '#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'
            ]
        },
        label: {
            color: '#fff',
            fontFamily: 'sans-serif'
        }
    }
};

// For apply theme

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

tui.chart.pieChart(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>

{'fraction_non_alphanumeric': 0.19052032305044353, 'fraction_numerical': 0.02436118098768701, 'mean_word_length': 2.3738276016078608, 'pattern_counts': {'":': 0, '<': 137, '<?xml version=': 0, '>': 137, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4434997', 'n_tokens_mistral': 2712, 'n_tokens_neox': 2574, 'n_words': 453}