Web Tutorial
Home CSS [Contoh] Cara Membuat Grafik Dasar Web dengan JQuery JQPlot
formats

[Contoh] Cara Membuat Grafik Dasar Web dengan JQuery JQPlot

Published on April 27, 2012 by in CSS, HTML, Jquery, js

Selain dengan mode HTML biasa dan JPGraph, ada cara yang sekarang lebih populer dalam pengembangan grafik, yaitu dengan memanfaatkan turunan JQuery. Dengan JQuery dan Ajax, maka kemampuan browser dapat dimaksimalkan untuk keperluan pembuatan grafik yang lebih dinamis dan siap untuk detail tidak sekedar image. Memang pada akhirnya antara Grafik HTML, Grafik JPGraph dan Grafik JQuery, tetap memiliki kelebihan dan kekurangan sendiri-sendiri.

Pembuatan grafik dengan JQuery banyak sekali macam yang ditawarkan dari berbagai free-vendor berbasis opensource. Beberapa diantaranya adalah JQPlot, HighChart, AjaxGraph dan lain sebagainya. Di posting kali ini akan dicoba membuat grafik dengan memanfaatkan JQuery JQPlot. JQPlot dapat diambil source di situs aslinya yaitu http://www.jqplot.com/. Bisa di dowload dan di extract dalam folder httpdocs anda. Setelah itu dapat anda pelajari, hanya saja beberapa source jquery mengambil source dari link external, namun tidak masalah, dapat diambil secara manual. Example dan documentasi dapat juga diambil di http://www.jqplot.com/tests/ dan http://www.jqplot.com/docs/. JQPlot menyediakan banyak macam grafik, antara line, bar, pie, blok, dan lain sebagainya, dengan skala yang bervariasi dan dapat diperbesar (zoom) dengan melakukan select block pada grafik tersebut.

Berikut beberapa langkah cara proses pengambilan data dan pembentukan grafik yang dapat dillakukan dengan menggunakan JQuery JQPlot.

  1. Penyisipan kode dan style
  2. Pendefinisian elemen yang akan digunakan sebagai area grafik
  3. Plot Grafik

Penyisipan kode standard antara lain dilakukan dengan cara menambahkan baris berikut:

PERHATIAN:
Lakukan penulisan script dan sesuaikan dengan path yang ada pada script anda. Pada contoh, saya menggunakan path http://bimosaurus.com/demo/

Penentuan area dapat dilakukan dengan contoh di bawah ini. Perhatikan, anda berhak membuat ID div sendiri. ID ini yang nanti akan dipanggil dalam script PLOT :

Lantas lakukan plottingnya:

Dengan angka depan terletak di sumbu x dan angka belakang terletak di sumbu y. Perlu diperhatikan bahwa untuk kondisi standard, kita hanya bisa menggunakan jenis grafik dengan sumbu x adalah angka, dan sumbu y juga angka.

Kira-kira, kode utuh akan seperti ini:

Kemudian grafiknya akan seperti ini:



Nah, selamat mencoba lebih dahulu, posting selanjutnya akan berkisar pembuatan grafik dengan JQPlot lebih lanjut, tentu digabung dengan data dari MySQL dan pengambilan data oleh PHP

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
3 Comments  comments 

3 Responses

  1. [...] posting lalu telah dikenalkan dasar pembuatan Grafik dengan menggunakan JQuery JQPlot, maka sekarang dikenalkan [...]

  2. wahhh bingung sob….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">