Membuat Bar Chart dengan jQuery dan CSS

Bar Chart adalah grafik yang mewakili data kelompok dengan chart vertikal atau horizontal. Pada dasarnya, Bar Chart digunakan untuk menunjukkan perbandingan yang mudah dimengerti. Bar Chart membantu membuat aplikasi web lebih user-friendly. Untuk menunjukkan perbandingan data antar kategori dalam persentase, Bar Chart adalah pilihan yang tepat.

Dalam tutorial ini, saya akan menunjukkan cara membuat bar chart responsive menggunakan CSS dan jQuery. Kamu tidak perlu menggunakan plugin chart jQuery untuk menambahkan Bar Chart di website. Kamu dapat dengan mudah membuat Bar Chart kamu sendiri dengan CSS dan jQuery murni.

HTML

HTML berikut menunjukkan diagram batang dengan nilai persentase. Selain itu, label masing-masing akan muncul di bawah grafik.

<div class="container">
    <h2>Tingkat Keahlian</h2>
    <div class="bar-chart">
        <!-- legend label -->
        <div class="legend">
            <div class="label">
                <h4>Newbie</h4>
            </div>
            <div class="label">
                <h4>Menengah</h4>
            </div>
            <div class="label">
                <h4>Mahir</h4>
            </div>
            <div class="label last">
                <h4>Suhu</h4>
            </div>
        </div>

        <!-- bar -->
        <div class="chart clearfix">
            <div class="item">
                <div class="bar">
                    <span class="persen">85%</span>

                    <div class="progress" data-persen="85">
                        <span class="title">PENGETAHUAN PHP</span>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="bar">
                    <span class="persen">68%</span>

                    <div class="progress" data-persen="68">
                        <span class="title">PENGETAHUAN MySQL</span>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="bar">
                    <span class="persen">59%</span>

                    <div class="progress" data-persen="59">
                        <span class="title">PENGETAHUAN JavaScript</span>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="bar">
                    <span class="persen">92%</span>

                    <div class="progress" data-persen="91">
                        <span class="title">PENGETAHUAN HTML&amp;CSS</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

Pertama, library jQuery perlu disertakan.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Fungsi barChart() digunakan untuk menentukan lebar baris berdasarkan persentase yang ditentukan. Pada fungsi barChart() document ready dan window resizedimuat.

<script>
$(document).ready(function(){
    barChart();

    $(window).resize(function(){
        barChart();
    });

    function barChart(){
        $('.bar-chart').find('.progress').each(function(){
            var itemProgress = $(this),
            itemProgressWidth = $(this).parent().width() * ($(this).data('persen') / 100);
            itemProgress.css('width', itemProgressWidth);
        });
    }
});
</script>

CSS

CSS berikut digunakan untuk menata Bar Chart dan membuat Bar Chart responsive.

.bar-chart {
    position: relative;
    width: 100%;
    margin-top: 15px;
    padding-bottom: 1px;
}

.bar-chart > .legend {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    margin-bottom: -45px;
    border-top: 1px solid #000;
}

.bar-chart > .legend > .label {
    position: relative;
    display: inline-block;
    float: left;
    width: 25%;
    text-align: center;
}

.bar-chart > .legend > .label:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 1px;
    height: 8px;
    background-color: #000;
    margin-top: -8px;
}

.bar-chart > .legend > .label.last:after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    content: '';
    width: 1px;
    height: 8px;
    background-color: #000;
    margin-top: -8px;
}
.bar-chart > .legend > .label h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bar-chart > .chart {
    position: relative;
    width: 100%;
}

.bar-chart > .chart > .item {
    position: relative;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    color: #fff;
    text-transform: uppercase;
}

.bar-chart > .chart > .item > .bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff4081;
    z-index: 5;
}

.bar-chart > .chart > .item > .bar > .persen {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    padding-right: 12px;
    z-index: 15;
}

.bar-chart > .chart > .item > .bar > .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #3e50b4;
    z-index: 10;
}

.bar-chart > .chart > .item > .bar > .progress > .title {
    display: block;
    position: absolute;
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    letter-spacing: 2px;
    z-index: 15;
}