Catatan Hadi : Membuat Grafik Batang Menggunakan JQuery

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

DOWNLOAD DISINI

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:

Catatan Hadi

Pages

Jumat, 19 April 2013

Membuat Grafik Batang Menggunakan JQuery

Tidak ada komentar:

Posting Komentar