Hallo sahabat Dumetschool ,pada kesempatan kali ini saya akan membahas tentang Bar Chart merupakan sebuah grapik berbentuk balok yang menampilkan sebuah data dengan chart secara Vertikal atau Horisontal. Biasanya dibuat untuk memberikan perbandingan agar mudah dipahami dalam membaca sebuah data.Membuat tampilan chart bisa saja berbentuk lingkaran, garis, batang atau bentuk lainya, dalam kasus ini saya akan menunjukan cara membuat bar chart dengan HTML CSS dan JQUERY. Baiklah sahabat langsung saja ikuti langkah-langkah pembuatannya sebagai berikut :
Langkah Yang pertama membuat struktur HTML terlebih dahulu dengan script dibawah ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Membuat Bar Chart Dengan HTML CSS dan JQUERY</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h2 style="text-align: center;">Survei Keahlian Programmer</h2> <div class="the-bars"> <div class="the-wraps"> <div class="label"> <h4>Newbie</h4> </div> <div class="label"> <h4>Beginner</h4> </div> <div class="label"> <h4>Advance</h4> </div> <div class="label last"> <h4>Professional</h4> </div> </div> <div class="chart clearfix"> <div class="item"> <span class="title">HTML&CSS</span> <div class="bar"> <span class="values">88%</span> <div class="progress" data-values="88"> </div> </div> </div> <div class="item"> <span class="title">PHP</span> <div class="bar"> <span class="values">75%</span> <div class="progress" data-values="75"> </div> </div> </div> <div class="item"> <span class="title">MySQL</span> <div class="bar"> <span class="values">68%</span> <div class="progress" data-values="68"> </div> </div> </div> <div class="item"> <span class="title">JavaScript</span> <div class="bar"> <span class="values">50%</span> <div class="progress" data-values="50"> </div> </div> </div> <div class="item"> <span class="title">Codeigniter</span> <div class="bar"> <span class="values">65%</span> <div class="progress" data-values="65"> </div> </div> </div> <div class="item"> <span class="title">Laravel</span> <div class="bar"> <span class="values">35%</span> <div class="progress" data-values="35"> </div> </div> </div> <div class="item"> <span class="title">Angular</span> <div class="bar"> <span class="values">35%</span> <div class="progress" data-values="35"> </div> </div> </div> </div> </div> </div> </body> </html> |
script diatas membuat tampilan yang menunjukan sebuah diagram batang yang berisi nilai persentase (%).
Langkah berikutnya sahabat siapkan sebuah library JQuery :
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
dan Script dari javascript seperti dibawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ barChart(); $(window).resize(function(){ barChart(); }); function barChart(){ $('.the-bars').find('.progress').each(function(){ var itemProgress = $(this), itemProgressWidth = $(this).parent().width() * ($(this).data('values') / 100); itemProgress.css('width', itemProgressWidth); }); } }); </script> |
pada script diatas ada function barChart() yang digunakan untuk menentukan lebar sesuai value atau nilai presentase yang sudah ditentukan, dan lihat terdapat script baris pertamabarChart() , document.ready dan window.resize
Langkah berikutnya ditambahkan style CSS seperti dibawah ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
.the-bars { position: relative; width: 100%; margin-top: 15px; padding-bottom: 1px; } .the-bars > .the-wraps { position: absolute; bottom: 0; left: 15%; width: 80%; height: 40px; margin-bottom: -45px; border-top: 1px solid #000; } .the-bars > .the-wraps > .label { position: relative; display: inline-block; float: left; width: 25%; text-align: center; } .the-bars > .the-wraps > .label:before { display: block; position: absolute; top: 0; left: 0; content: ''; width: 1px; height: 8px; background-color: #000; margin-top: -8px; } .the-bars > .the-wraps > .label.last:after { display: block; position: absolute; top: 0; right: 0; left: auto; content: ''; width: 1px; height: 8px; background-color: #000; margin-top: -8px; } .the-bars > .the-wraps > .label h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; font-style: italic; } .the-bars > .chart { position: relative; width: 100%; } .the-bars > .chart > .item { position: relative; width: 100%; height: 40px; margin-bottom: 10px; font-weight: 700; color: #000; text-transform: uppercase; } .the-bars > .chart > .item > .bar { position: absolute; top: 0; left: 15%; width: 80%; height: 100%; background-color: rgb(103, 255, 255); z-index: 5; } .the-bars > .chart > .item > .bar > .values { display: block; position: absolute; top: 0; right: 0; height: 40px; line-height: 40px; padding-right: 12px; z-index: 15; } .the-bars > .chart > .item > .bar > .progress { position: absolute; top: 0; left: 0; height: 100%; background-color: rgb(255, 141, 0); z-index: 10; } .the-bars > .chart > .item > .title { display: block; position: absolute; height: 40px; line-height: 40px; padding: 0px 50px 0px; letter-spacing: 2px; z-index: 15; } |
Jika sudah semua script diketikan langsung saja jalankan pada browser masing-masing maka tampilanya akan seperti dibawah ini:
Demikian pembahasan artikel ini tentang cara membuat bar chart dengan HTML CSS dan JQUERY, semoga bermanfaat dan selamat mencoba.
terima kasih