result loading time

author 김형진

by HYEONGJINKIM

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">
Browser Version	Total Load Time
Script(정적) 1.0	0.00%
Script(정적) 1	1192%
Script(정적) 2	784%
Script(정적) 3	766%
Script(정적) 4	1060%    
Script(정적) 5	850% 
Script(동적) 1	2364%
Script(동적) 2	1651%
Script(동적) 3	1386%
Script(동적) 4	1578%
Script(동적) 5	2170%
MinifyScript(정적) 1	1159%
MinifyScript(정적) 2	723%
MinifyScript(정적) 3	767%
MinifyScript(정적) 4	1037%
MinifyScript(정적) 5	938%
MinifyScript(동적) 1	1494%
MinifyScript(동적) 2	1012%
MinifyScript(동적) 3	882%
MinifyScript(동적) 4	932%
MinifyScript(동적) 5	1295%
HyBrid 1	1583%
HyBrid 2	1727%
HyBrid 3	990%
HyBrid 4	1318%
HyBrid 5	985%
</pre>

JavaScript

$(function () {

    Highcharts.data({
        csv: document.getElementById('tsv').innerHTML,
        itemDelimiter: '\t',
        parsed: function (columns) {

            var brands = {},
                brandsData = [],
                versions = {},
                drilldownSeries = [];

            // Parse percentage strings
            columns[1] = $.map(columns[1], function (value) {
                if (value.indexOf('%') === value.length - 1) {
                    value = parseFloat(value);
                }
                return value;
            });
            console.log(columns[1]);
            console.log(columns[0]);
            
            $.each(columns[0], function (i, name) {
                var brand,
                    version;

                if (i > 0) {

                    // Remove special edition notes
                    name = name.split(' -')[0];

                    // Split into brand and version
                    version = name.match(/([0-9]+[\.0-9x]*)/);
                    if (version) {
                        version = version[0];
                    }
                    brand = name.replace(version, '');

                    // Create the main data
                    if (!brands[brand]) {
                        brands[brand] = columns[1][i];
                    } else {
                        brands[brand] += columns[1][i];
                    }

                    // Create the version data
                    if (version !== null) {
                        if (!versions[brand]) {
                            versions[brand] = [];
                        }
                        versions[brand].push([version+'회', columns[1][i]]);
                    }
                }

            });

            $.each(brands, function (name, y) {
                brandsData.push({
                    name: name,
                    y: y,
                    drilldown: versions[name] ? name : null
                });
         ...