Lompat ke konten

Buy and Sell text links

Membuat Plugin WordPress untuk Menampilkan Grafik

Untuk merepresentasikan data agar lebih mudah dipahami dan lebih menarik perhatian, menampilkannya dalam bentuk grafik adalah salah satu caranya. Dengan grafik, sebuah data akan tersaji dengan menarik dan langsung menuju sasaran yang diinginkan.

Di wordpress tidak ada fitur ini, biasanya dalam menampilkan grafik, selalu dilakukan dengan merubah grafik tersebut dalam bentuk JPG dan ditampilkan sebagai image (gambar), akibatnya jika terjadi perubahan data, maka kita harus meng-upload image lagi untuk update grafik.
Dengan sebuah plugin, grafik akan ditampilkan sesuai dengan data yang diinputkan, jika datanya berubah maka grafik juga akan berubah secara otomatis.
Dalam artikel ini akan diberikan contoh sederhana pembuatan plugin yang akan menampilkan grafik menggunakan JQuery Flot (http://www.flotcharts.org). Kenapa pakai Flot? Menurut penulis, Flot ini adalah yang paling mudah dipahami dan menggunakan JQuery sebagai frameworknya sehingga akan langsung “klik” dengan wordpress yang juga menggunakan jQuery.
Kali ini kita akan membuat grafik sederhana yang berjenis “categories”, dimana terdapat 2 parameter utama, yaitu Nama dan Nilai. Nama akan menjadi label sumbu X, nilai menjadi besaran yang akan menentukan tinggi grafik, sedangkan sumbu Y nya bersifat otomatis sesuai dengan rentang nilai.

Pertama yang dilakukan adalah membuat file php, misalnya index.php sebagai file utama plugin ini:

<?php
/*
Plugin Name: Adsindo Grafik
Plugin URI: http://www.depan.web.id
Description: Plugin untuk membuat grafik berdasarkan data yang diinputkan
Author: Nur Awaluddin
Version: 0.1 beta
Author URI: http://www.desainweb.biz/
*/
?>

Simpan di folder wp-content/plugins/nama_folder_plugin_anda/

Selanjutnya tambahkan file javascript Flot agar dibaca oleh wordpress ketika loading:

<?php

function adsindo_grafik_scripts() {
$url = plugin_dir_url(__FILE__);

wp_enqueue_script( ‘flot-grafik1′, $url. ‘jquery.flot.js’, array(), ’1.0.0′, false );
wp_enqueue_script( ‘flot-categories-grafik1′, $url. ‘jquery.flot.categories.js’, array(), ’1.0.0′, false );
}

//memasukkan script flot ke wordpress
add_action( ‘wp_enqueue_scripts’, ‘adsindo_grafik_scripts’ );

?>

Langkah selanjutnya adalah menyiapkan data yang akan ditampilkan oleh grafik (chart), untuk grafik berjenis “categories” flot menentukan format datanya adalah sebagai berikut:

[ [‘nama1’,nilai1],[‘nama2’,nilai2],[‘nama3’,nilai3],[‘nama4’,nilai4],[‘nama5’,nilai5] ] dst …

contoh:
[ [‘jakarta’,2000],[‘Surabaya’,3000],[‘Semarang’,1200],[‘Bandung’,4000],[‘Yogyakarta’,2300] ]

Data ini bisa diperoleh dari mana saja, bisa dari database atau input manual. Anda bisa mengatur sendiri asalkan formatnya sesuai dengan aturan di atas.

Selanjutnya adalah membuat shortcode wordpress untuk menampilkan grafik tersebut, dengan memasang shortcode ini di manapun( post atau page) secara otomatis akan menampilkan grafik sesuai dengan yang kita tentukan.


<?php

function shortcut_grafik($atts) {

global $wpdb;

$url = plugin_dir_url(__FILE__);

//tampilkan grafiknya dengan jquery flot

$form= ‘<div id=”charttampil” style=”width:97%;height:350px;border:0px solid #000000;”></div></br>’;
$form.=’<script type=”text/javascript”>’;
$form.=” jQuery.plot(jQuery(‘#charttampil’),
[ [ ['jakarta',2000],['Surabaya',3000],['Semarang',1200],['Bandung',4000],['Yogyakarta',2300] ]], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: ‘center’
}
},
axis: {
mode: ‘categories’,
tickLength: 0
},
grid: { hoverable: true, clickable: true },
});

</script>”;

// Outputnya
return $form;

}

//membuat shotcode yang unik
add_shortcode(‘pasang-grafik’, ‘shortcut_grafik’);

?>


Selesai sudah kita membuat pluginnya, selanjutnya kita upload ke blog worpdress dan jangan lupa diaktifkan. Untuk menampilkan grafik di posting atau page (halaman) masukkan shortcode :

[pasang-grafik]

Mau coba? silahkan copy paste script – script di atas. jQuery flot sebenarnya memiliki banyak opsi lainnya, juga bentuk grafik yang bermacam – macam, silahkan kembangkan sendiri dan baca – baca tutorialnya di website flot di atas.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.