HTML

[TIPS] Contoh Cara Membuat Grafik Standard HTML Sederhana

Posted on by bimosaurus

Pembuatan grafik ternyata tidak harus rumit dengan tools tertentu. Grafik masih bisa disiasati dengan menggunakan kombinasi teknik CSS dan HTML. Tentu saja tidak semua grafik dapat dibentuk, karena keterbatasan CSS dan HTML. Disini kita pelajari grafik yang mudah seperti grafik batang/bar, dimana seluruh value akan dibentuk dengan menggunakan Bar. Lihat contoh dibawah ini:

 

Calon 1
Calon 2
Calon 3
Calon 4
Calon 5

 

 

Contoh Grafik Pemilihan Kepala Desa

Pembuatan grafik ini ternyata tidak sulit. Yaitu hanya dengan melakukan pembuatan elemen DIV yang diberi warna tertentu, dan diberi panjang tertentu, yang tentu saja panjangnya nanti akan menyesuaikan dari dalam tabel asal.

Sebagai contoh, apa yang terjadi apa bila kita membuat sintaks seperti demikian:





Calon 1


Calon 2


Calon 3


Calon 4


Calon 5

Hasilnya tentu saja akan langsung seperti tabel di atas. Panjangnya batang akan mengikuti aturan width pada div yang bersangkutan. Grafik tersebut juga dapat kita kombinasikan dengan link href. Grafik tersebut dibuat dengan cara menempatkan sebuah elemen div yang berukuran panjang yang diatur dari database. Div tersebut juga harus rata kiri untuk dapat dibaca dengan jelas

Kita pun dapat membuat grafik dalam posisi vertikal. Hanya saja, karena tabel html memiliki karakter standard rata vertikal tengah, maka kita harus menambahkan valign=bottom

Sebagai contoh adalah sebagai berikut



















Calon 1Calon 2Calon 3Calon 4Calon 5

Hasilnya akan menjadi seperti ini:
Calon 1 Calon 2 Calon 3 Calon 4 Calon 5

Nah ternyata cukup sederhana. Tinggal kita akhirnya dapat melakukan manipulasi angka tersebut dengan menggunakan PHP dan mengambil dari database server MySQL.

Untuk grafik lanjut berbasis image, dapat dilihat di :

https://blogit.bimosaurus.com/2012/04/21/contoh-cara-membuat-grafik-dengan-jpgraph-dengan-php-dan-mysql dan
https://blogit.bimosaurus.com/2012/04/19/contoh-1-dasar-membuat-grafik-dengan-jpgraph-di-php

Artikel terkait

[Contoh] Cara Membuat Grafik dengan JPGraph dengan PHP dan MySQL

Posted on by bimosaurus

Pada posting lalu https://blogit.bimosaurus.com/2012/04/19/contoh-1-dasar-membuat-grafik-dengan-jpgraph-di-php telah coba kita pelajari bagaimana membuat Grafik dengan JPGraph, dengan bahasa PHP dan mengambil data dari MySQL. Diharapkan pada posting tersebut diketahui dasar-dasar untuk membuat grafik sebelum lebih rumit mengambil database. Lantas, bagaimana jika grafik itu harus diambil dari database MySQL? Kuncinya adalah, data yang diambil dari database diambil ke dalam array untuk value sumbu x dan sumbu y. Secara dasar, sama dengan posting lalu, hanya bagaimana mengambil value MySQL dijadikan data x dan y.
Jika kemarin kita punya program macam ini

 

SetScale("textlin");



$graph->title->Set('Jumlah Orang Edan Karesidenan Kedu');


$graph->yaxis->HideZeroLabel();
$graph->yaxis->HideLine(false);


$graph->xgrid->Show();
$graph->xgrid->SetLineStyle("solid");
$graph->xaxis->SetTickLabels($data_x);
$graph->xgrid->SetColor('#E3E3E3');




$garis = new LinePlot($data_y);
$graph->Add($garis);
$garis->SetColor("#6495ED");
$garis->SetLegend('Tingkat Edan');


$graph->Stroke();


?>

Maka kita coba untuk membuat grafik dengan mengambil database dari database server MySQL. Data yang ita gunakan adalah data pertama yang dulu pernah kita buat. Maaf saya hanya mengambil lima (5) data pertama karena ternyata berisi data percobaan dari teman-teman yang mencoba mengisi database dengan excel

Database yang saya pakai adalah database kepegawaian. Tabelnya adalah tabel pegawai.

nip nama honor status_ambil
10001 Susanto Rp. 1000000 Belum
10002 Susanti Rp. 1000000 Sudah
10003 Marwoto Rp. 2000000 Sudah
10004 Gunadi Rp. 1500000 Belum
10005 Nur Eko Rp. 1000000 Belum

Misal saya akan membuat sebuah grafik dengan sumbu X adalah berisi nama orang dan sumbu Y menunjukkan banyaknya Rupiah yang diterima, maka berikut langkah yang dapat diambil:

  1. Tampilkan hasil Query untuk kelima record tersebut
  2. Ubah terlebih dahulu value yang terdapat dalam kolom honor menjadi numerik
  3. Tentukan data_x adalah nama orang dan data_y adalah besarnya honor, dengan melakukan kombinasi hasil query, explode dan array

Kira kira menjadi seperti demikian :


SetScale("textlin");



$graph->title->Set('Grafik jumlah honor');


$graph->yaxis->HideZeroLabel();
$graph->yaxis->HideLine(false);


$graph->xgrid->Show();
$graph->xgrid->SetLineStyle("solid");
$graph->xaxis->SetTickLabels($data_x);
$graph->xgrid->SetColor('#E3E3E3');




$garis = new LinePlot($data_y);
$graph->Add($garis);
$garis->SetColor("#6495ED");
$garis->SetLegend('Rupiah');


$graph->Stroke();



?>

Grafik yang dihasilkan seperti ini kira kira

Selamat Mencoba, semoga sukses.. Silakan bertanya jika terdapat kesalahan disini atau perlu ditanyakan, siap saya jawab. Gratis kok!

Artikel terkait

[Tips] Menambahkan Font dalam Proses Pembuatan Web

Posted on by bimosaurus

Font, dalam dunia IT ternyata menjadi sangat penting. Pemilihan font atau jenis huruf, dipandang dapat mempengaruhi pembaca, dan dapat menunjukkan karakter pemilik font. Alangkah baiknya jika sebuah perusahaan memiliki font sendiri, dengan demikian karakter dari perusahaan atau komunitas dan lain sebagainya, dapat dibaca dari corak font yang digunakannya.

Pembuatan proposal, laporan dan lain-lain, ternyata membutuhkan perhatian juga pada Font. Beberapa teman dari kalangan Institut seni kadang malah menelaah tentang font tersebut kadang memang justru bisa berpengaruh pada kelelahan mata, pada sikap dan lain sebagainya.

Dalam dunia web, dalam web profil misalnya, Font akan menjadi penting bagi pembentukan image karakter perusahaan tersebut. Sayangnya, font yang ada dalam dunia web ini secara standard cukup terbatas. Biasanya sekitar Sans Serif, Tahoma, Arial, Verdana, Helvetica, Times, Trebuchet MS dan lain-lain.

Kadang boleh jadi kita akan menambahkan font seperti ini :

Selamat Datang

namun sayangnya font yang digunakan terbatas. Maka kita bisa menentukan sendiri font tersebut. Bagaimana caranya?

  1. Carilah font yang anda suka di internet, dalam bentuk .ttf, misal saya mengambil dari http://www.fontspace.com/category/old%20english, download dan extractlah
  2. Simpanlah dalam direktori font dalam aplikasi web anda, misal {direktori_utama}/themes/namathemes/font
  3. Bukalah CSS anda, dan masukkan kode seperti berikut dibawah 
    @font-face {    font-family: 'NamaFontTerserah';    src: url('fonts/namafilefont.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
  4. Anda dapat meload font tersebut baik dalam elemen langsung html seperti : 
    INI MENCOBA

    atau

    INI MENCOBA

    dengan isi CSS

    #fontcoba{
font-family:NamaFontTerserah;
}

 

Sebagai contoh, saya dari situs http://www.fontspace.com/category/old%20english font-font berikut :

  • Salterio Shadow
  • Cloister Black
  • KingThings Spike
  • KingThings Spikeless
  • Faith Collapsing

Saya edit css saya dengan menambahkan:

@font-face {    font-family: 'SalterioShadow';    src: url('fonts/salterio_shadow.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

@font-face {    font-family: 'CloisterBlack';    src: url('fonts/cloister_black.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpike';    src: url('fonts/kingthings_spike.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'KingThingSpikeless';    src: url('fonts/kingthings_spikeless.ttf') format('truetype');    font-weight: normal;    font-style: normal;}
@font-face {    font-family: 'FaithCollapsing';    src: url('fonts/faith_collapsing.ttf') format('truetype');    font-weight: normal;    font-style: normal;}

 

Dan selanjutnya disini saya buat :

Cloister Black


KingThing Spike


Salterio Shadow


KingThing SpikeLess


Faith Collapsing

Hasilnya adalah seperti berikut:

Cloister Black

KingThing Spike

Salterio Shadow

KingThing SpikeLess

Faith Collapsing

 

Artikel ini untuk para pemula seperti saya. Semoga bermanfaat.

Artikel terkait

[Contoh] Menyiasati Paging dengan JQuery JCarousel

Posted on by bimosaurus

Paging adalah cara memisahkan banyaknya data dalam halaman-halaman tertentu dengan satu halaman berisi sejumlah data. Paging sering menjadi masalah tersendiri bagi para developer pemula. Dalam beberapa posting lalu, kita telah mempelajari Simple Advanced Paging PHP yaitu di posting https://blogit.bimosaurus.com/2011/09/13/simple-advanced-paging-php/. Namun saya mendapatkan request beberapa hal tentang bagaimana agar paging dapat disederhanakan lagi. Maka terbayanglah sebuah simple paging dengan menyiasati menggunakan JQuery JCarousel. Paging ini dapat menggunakan teknik PHP murni, dapat juga diakali dengan menggunakan Jquery Jcarousel.

JCarousel memiliki fungsi untuk membuat tampilan bergeser muncul satu demi satu seperti pada contoh disini: https://blogit.bimosaurus.com/demo/paging_jq.php.

Mudah saja, dengan demikian kita bisa mengkreasikan paging dengan JCarousel ini. Kita akan memilih JCarousel model Lite yang ringan, dengan JQuery Minimal juga. Silakan dapat di download di http://www.gmarwaha.com/jquery/jcarousellite/#download, dan http://docs.jquery.com/Downloading_jQuery.

Saya memilih : jquery-1.7.1.min.js dan jcarousellite_0.4.0.min.js. Selanjutnya, anda dapat membuat script tampilan paging seperti berikut ini:

 

Nip Nama Honor Status Ambil 






Or Go To :

Saya masih memilih setia menggunakan database lama saya yang saya gunakan untuk contoh-contoh lalu, database kepegawaian. Dengan tabel pegawai seperti berikut:

nip nama honor status_ambil
10001 Susanto Rp. 1000000 Belum
10002 Susanti Rp. 1000000 Sudah
10003 Marwoto Rp. 2000000 Sudah
10004 Gunadi Rp. 1500000 Belum
10005 Nur Eko Rp. 1000000 Belum

Nah, selamat mencoba, semoga sukses dan semoga bermanfaat

Artikel terkait