Blog ini sengaja saya buat untuk berbagi ilmu dengan teman-teman semua dan untuk mengingat kembali apa yang telah saya pelajari. Semoga blog ini dapat bermanfaat untuk diri saya sendiri maupun teman-teman yang sudah berkunjung keblog saya MOHON MAAF JIKA MASIH ADA KEKURANGAN, BLOG INI MASIH DALAM TAHAP PENGEMBANGAN
Home » , , » Membuat Grafik Batang Menggunakan JQuery

Membuat Grafik Batang Menggunakan JQuery

Written By Unknown on Kamis, 17 Oktober 2013 | 19.37

Pembuatan grafik biasanya banyak digunakan oleh para analisis, yang digunakan untuk melihat perbedaan dari satu nilai dengan nilai yang lainnya. Jika tidak menggunakan grafik tentunya akan terlihat kurang menarik dan kurang terlihat perbedaan nilai dari satu dengan yang lainnya. Membuat grafik bisa menggunakan powerpoint,msword,excel ataupun menggunakan jquery. Jika grafik tersebut nantinya akan ditampilkan pada suatu website. tentunya pembuatan grafik tersebut lebih baik menggunakan jquery.



Jika anda ingin mencobanya.
bukalah notepad++ anda, dan buat file dengan nama grafik_batang.html
sebelumnya anda harus memiliki gambar yang akan dijadikan grafik nanti,
anda bisa membuatnya dphotoshop, corel ataupun editor lainnya.
jika tidak bisa anda ambil gambar dibawah ini:





selanjutnya buatlah css-nya terlebih dahulu

<style>
 .rating {
  float:left;
  width:170px;
  background-image:url(poll-bottom.png);
  background-position:bottom left;
  background-repeat:no-repeat;
  padding-bottom:40px;
 }
 
 .graph {
  float:left;
  margin-top:10px;
  position:relative;
  height:300px;

 }
 
 .graph .bar1, .graph .bar2, .graph .bar3{
  position:absolute;
  background-image:url(poll-body.png);
  width:159px;
  min-height:80px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  bottom:0;
 }
 
 .graph .bar1 span, .graph .bar2 span,  .graph .bar3 span  {
  position:absolute;
  left:50px;
  top:20px;
  font-size:30px;
  color:red;
 }

 .jaraktulisan{
  text-align:center;
 }

 h4{
 color:white;
 }
 
 </style>


setelah itu tambahkan kode html untuk menampilkan grafik tersebut:
letakan tepat dibawah kode </style>


<body bgcolor="black"><font color="white" size="5">PERSENTASE <br>MENGGUNAKAN GRAFIK BATANG</font>
<div class="polls"> 
 <div class="rating"> 
  <div class="graph"> 
   <strong class="bar1"> <span>79%</span> </strong> 
  </div> 
  <div class="jaraktulisan"><h4>Hadi Kurniawan</h4></div> 
 </div> 
  
 <div class="rating"> 
  <div class="graph"> 
   <strong class="bar2"> <span>60%</span> </strong> 
  </div> 
  <div class="jaraktulisan"><h4>Meyda Sefira</h4></div> 
 </div> 
 
 <div class="rating"> 
  <div class="graph"> 
   <strong class="bar3"> <span>30%</span> </strong> 
  </div> 
  
  <div class="jaraktulisan"><h4>Citra Kirana</h4> </div> 
 </div> 
 
 <div class="clear"></div> 
</div> 

</body>
</html>



jika anda jalankan program tersebut,
akan keluar output seperti gambar dibawah ini:



Sekarang anda tinggal membuat animasinya menggunakan jquery.
anda membutuhkan satu buah library jquery, yaitu:  jquery.js
bisa anda download dlink dibawah ini


setelah itu tambahkan skrip untuk memanggil library jquery tersebut.
letakan dibawah kode </style>

<script type="text/javascript" src="jquery.js"></script> 


jika anda jalankan program anda lagi,
tentunya belum terjadi perubahan.
untuk itu anda perlu menambhakan javascript
letakan tepat dibawah kode </skript>

<script type="text/javascript">

 $(document).ready(function(){
  $('.bar1').animate({'height':'79%'},500);
  $('.bar2').animate({'height':'60%'},1000);
  $('.bar3').animate({'height':'30%'},1500);
 });
 </script> 


simpan program anda,
dan sekarang coba anda jalankan lagi.
jika berhasil akan keluar output seperti gambar dibawah ini:



Share this article :

+ komentar + 1 komentar

3 Februari 2016 pukul 20.42

Buat refferensi gan

Membuat Grafik Batang Dengan Database MySQL

>> Klik Disini <<

Posting Komentar

 
Support : Copyright © 2013. SARANG HADI - All Rights Reserved
Template Created by Creating Website Published by Mas Template