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&CSS</span> </div> </div> </div> </div> </div> </div>
JavaScript
Pertama, library jQuery perlu disertakan.
<script src="//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.
Membuat Grafik Batang Pada Bootstrap Menggunakan PHP MYSQLUploaded by
Dadang Ibnu Setyawan
0 ratings0% found this document useful (0 votes)
1K views10 pagesDocument Information
click to expand document informationDescription:
Graphic
Copyright
© © All Rights Reserved
Available Formats
PDF, TXT or read online from Scribd
Share this document
Share or Embed Document
Sharing Options
- Share with Email, opens mail client
Email
Did you find this document useful?
0%0% found this document useful, Mark this document as useful
0%0% found this document not useful, Mark this document as not useful
Is this content inappropriate?
Download now
SaveSave Membuat Grafik Batang Pada Bootstrap Menggunakan P... For Later
0 ratings0% found this document useful (0 votes)
Membuat Grafik Batang Pada Bootstrap Menggunakan PHP MYSQL
Uploaded by
Dadang Ibnu SetyawanDescription:
Graphic
SaveSave Membuat Grafik Batang Pada Bootstrap Menggunakan P... For Later
0%0% found this document useful, Mark this document as useful
0%0% found this document not useful, Mark this document as not useful
EmbedShare
PrintDownload now
Jump to Page
You are on page 1of 10Search inside document
You're Reading a Free Preview
Pages 5 to 9 are not shown in this preview.
Reward Your Curiosity
Everything you want to read.
Anytime. Anywhere. Any device.
No Commitment. Cancel anytime.
Share this document
Share or Embed Document
Sharing Options
- Share with Email, opens mail client