Cara Mudah Membuat Chart dalam Web Aplikasi

Pembaca yang budiman, terkadang untuk membuat sebuah web aplikasi yang baik, terutama dari layer presentasi, kita membutuhkan sebuah tampilan yang menarik dan representatif. Dalam sebuah web aplikasi, satu hal yang lazim dibuat adalah summary. Dalam artian kosa-kata bahasa Indonesia summary berarti ringkasan, dalam sebuah aplikasi komputer, biasanya summary adalah sebuah bagian dari layer presentasi yang berisi laporan atas dasar data kuantitatif yang di kumpulkan. Biasanya summary ditampilkan berdasarkan kategori tertentu, seperti kumpulan data berdasarkan jenis, kumpulan data berdasarkan tipe, kumpulan data berdasarkan tanggal, dan lain-lain.

Summary dalam sebuah aplikasi akan menjadi lebih menarik jika kita membuatnya dalam bentuk chart. Chart adalah sebuah tampilan laporan yang berbentuk simbol-simbol seperti Pie Chart, Bar Chart, Line Chart dan lain-lain. Sebuah chart selayaknya dapat mewakili data-data yang ditampilkan dalam bentuk tabel data numerik. Dari sisi audiens atau pemakai web aplikasi, seringkali tampilan laporan berupa simbol dalam bentuk chart lebih mudah dipahami dibandingkan dengan tampilan tabular data numerik. Dalam perkembangan teknologinya bahkan chart bisa ditampilkan dalam bentuk tiga dimensi (3-D) dan interaktif untuk bisa menarik perhatian audiens. Segala hal yang memungkinkan yang bisa menyebabkan para audiens tertarik perhatiannya akan sebuah presentasi data, akan selalu diupayakan oleh para developer aplikasi komputer agar bisa terjadi untuk menghilangkan sebuah imaji bahwa “presentasi laporan data bukanlah suatu hal yang membosankan yang melulu berisi angka”.

Dalam teknologi pembuatan web aplikasi begitu banyak tools yang dapat membantu kita untuk membuat chart, hanya saja terkadang penggunaan tools pembuatan chart tersebut terlalu sulit, dan tak jarang integrasi tools tersebut ke dalam web aplikasi kita juga sama sulitnya dengan menggunakan tools tersebut, sehingga banyak dari kita yang berprofesi sebagai programmer web aplikasi tidak membuat fitur chart dalam web aplikasi yang kita buat. Padahal presentasi laporan dalam bentuk simbol dan grafik menjadi salah satu tolak ukur lengkap tidaknya dan bagus tidaknya sebuah web aplikasi dari sisi tampilan.

Kali ini kita akan mencoba melakukan beberapa pembuatan chart yang menurut saya merupakan cara pembuatan chart yang paling mudah sepanjang karir saya menjadi seorang developer web aplikasi. Kita akan membuat chart yang nantinya bisa kita integrasikan ke dalam web aplikasi kita dengan menggunakan canvas yang merupakan elemen dari html5 dan javascript. Library yang akan kita gunakan dalam pembuatan chart ini adalah RGraph. 

Rgraph merupakan sebuah library javascript yang memanfaatkan element canvas html5  yang mampu membuat chart dengan cara yang sangat mudah. Visualisasi chart yang didukung oleh library RGraph ini lebih dari 20 jenis visualisasi yang berbeda. RGraph juga bisa memanfaatkan JSON data sebagai sumber data dalam pembuatan chart secara dinamis dan on the fly. Buat saya RGraph menawarkan kemudahan tersendiri dalam melengkapi web aplikasi yang saya buat dari sisi pembuatan layer presentasi yang berupa chart.

Langsung saja kita mulai cara mudah membuat chart dalam web aplikasi kita ini. Kita akan melakukan percobaan ini dengan membuat sebuah web aplikasi html sederhana saja. Sebagai langkah pertama, silahkan download terlebih dahulu library RGraph dari sini. Buatlah sebuah folder web aplikasi html dan di dalamnya terdapat folder css, js, dan datasource. Kemudian ekstrak file RGraph2[version].zip yang sudah kita download tadi. Copy semua file yang ada dalam folder css hasil ekstrak dan letakkan dalam folder css yang kita buat. Kemudian copy seluruh file yang ada dalam folder libraries hasil ekstrak tadi dan letakkan dalam folder js yang sudah kita buat sehingga kira-kira seperti gambar berikut ini:

Kita akan membuat sebuah Pie Chart sederhana atau basic pie chart dengan menggunakan library RGraph yang sudah kita ekstrak tadi. Buatlah sebuah file html dengan nama basic-pie.html dan letakkan dalam folder web aplikasi html kita sejajar dengan folder js. Dan berikut ini isi file basic-pie.html tersebut.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/RGraph.common.core.js"></script>
    <script type="text/javascript" src="js/RGraph.common.dynamic.js"></script>
    <script type="text/javascript" src="js/RGraph.common.tooltips.js"></script>
    <script type="text/javascript" src="js/RGraph.pie.js"></script>
    <script type="text/javascript">
        //creating graph
        window.onload = function () {
            var pieGraph = new RGraph.Pie("cvsGraphBook", [22, 35, 42, 34, 41])
                    .Set("labels", ["Science", "Fiction", "Art", "Novel", "Comics"])
                    .Set("tooltips", ["Science [22]", "Fiction [35]", "Art [42]", "Novel [34]", "Comics [41]"])
                    .Draw();
        }
    </script>
</head>
<body>
   <canvas id="cvsGraphBook" width="350" height="250">[No canvas support]</canvas>
</body>
</html>

Kemudian bukalah file tersebut pada browser anda dan seharusnya menjadi seperti gambar berikut ini:

Mari kita coba pahami isi dari file basic-pie.html tersebut. Perhatikan tag body pada file basic-pie tersebut:

<canvas id="cvsGraphBook" width="350" height="250">[No canvas support]</canvas>

Disana kita membuat sebuah elemen canvas yang dimiliki oleh html5 dengan lebar 350 dan tinggi 250, kemudian di dalam tag canvas tersebut kita lihat sebuah teks “No canvas support”, teks ini akan tampil jika browser yang kita gunakan tidak mendukung html5. Kemudian perhatikan baris-baris berikut yang ada pada section  ini:

    …
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/RGraph.common.core.js"></script>
    <script type="text/javascript" src="js/RGraph.common.dynamic.js"></script>
    <script type="text/javascript" src="js/RGraph.common.tooltips.js"></script>
    <script type="text/javascript" src="js/RGraph.pie.js"></script>
    …

Baris-baris diatas adalah baris-baris dimana kita meng-include library-library RGraph yang kita butuhkan. Oleh karena kita hendak membuat Pie maka kita meng-include file RGraph.pie.js. Kemudian perhatikan kembali baris-baris berikut ini: 

<script type="text/javascript">
        //creating graph
        window.onload = function () {
            var pieGraph = new RGraph.Pie("cvsGraphBook", [22, 35, 42, 34, 41])
                    .Set("labels", ["Science", "Fiction", "Art", "Novel", "Comics"])
                  .Set("tooltips", ["Science [22]", "Fiction [35]", "Art [42]", "Novel [34]", "Comics [41]"])
                    .Draw();
        }
    </script>

Ya, disanalah baris-baris utama kita dalam membuat chart dengan library RGraph. Pada baris tersebut terlihat object RGraph.Pie dibuat berdasarkan parameter id dan data. Teks “cvsGraphBook” dalam konstruktor tersebut adalah id dari canvas tempat kita akan meletakkan hasil dari chart yang akan dibuat. Sementara parameter data, kita buat merupakan array dari angka-angka 22, 35, 42, 34, dan 41. Kemudian untuk membuat label yang bisa mewakili deskripsi dari angka-angka tersebut kita set pada baris:

.Set("labels", ["Science", "Fiction", "Art", "Novel", "Comics"])

Label tersebut juga merupakan array tapi terdiri dari jenis-jenis buku. Yang harus dipahami adalah urutan array data dan urutan array label, harus simetris jika kita ingin menempatkan data yang benar, maksudnya secara tabular data maka seharusnya simetris seperti gambar berikut ini:

Dan kemudian baris selanjutnya tertulis seperti ini:

.Set("tooltips", ["Science [22]", "Fiction [35]", "Art [42]", "Novel [34]", "Comics [41]"])

Baris ini adalah baris dimana kita menge-set tooltips untuk chart yang kita buat. Sama halnya dengan label, tooltips ini juga mesti simetris dengan parameter data yang kita definisikan pada instansiasi object RGraph.Pie diatas. Tooltips ini berguna jika salah satu bagian pada pie chart tersebut di-click maka akan tampil tooltips sesuai dengan apa yang kita buat.
Sampai disini kita sudah selesai membuat basic-pie-chart. Untuk membuatnya menjadi lebih menarik, kita bisa menge-set properti-properti lain dalam object RGraph.Pie tadi, seperti properti “explode” yang berguna untuk memberi jarak pada masing-masing bagian juring chart tersebut, atau properti “shadow” untuk memberi efek bayangan pada chart tersebut, atau properti “title” untuk memberikan judul pada chart tersebut. Silahkan berkreasi sesuka anda dengan cara menge-set properti-properti lain sesuka anda, untuk API properti yang didukung oleh RGraph untuk jenis Pie Chart ini silahkan baca pada tautan ini. Saya sendiri membuatnya seperti gambar berikut ini:

Untuk membuat chart lain dengan tipe visualisasi yang berbeda, yang perlu kita lakukan hanya meng-instantiate object RGraph baru dengan tipe berbeda tentunya, dan pastinya dengan meng-include library yang berbeda pula. Misalnya kita ingin merubahnya dalam bentuk Bar Chart, maka dari kode-kode dasar Pie Chart tadi kita rubah menjadi seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/RGraph.common.core.js"></script>
    <script type="text/javascript" src="js/RGraph.common.dynamic.js"></script>
    <script type="text/javascript" src="js/RGraph.common.tooltips.js"></script>
    <script type="text/javascript" src="js/RGraph.bar.js"></script>
    <script type="text/javascript">
        //creating graph
        window.onload = function () {
            var pieGraph = new RGraph.Bar("cvsGraphBook", [22, 35, 42, 34, 41])
                    .Set("labels", ["Science", "Fiction", "Art", "Novel", "Comics"])
                    .Set("tooltips", ["Science [22]", "Fiction [35]", "Art [42]", "Novel [34]", "Comics [41]"])
                    .Draw();
        }
    </script>
<body>
<canvas id="cvsGraphBook" width="350" height="250">[No canvas support]</canvas>
<br>
<a href="index.html">Back</a>
</body>
</html>

Perhatikan kode-kode di atas dan bedakan dengan kode-kode yang ada pada basic-pie-chart sebelumnya, hanya ada dua baris yang kita rubah yaitu :

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

dan

    var pieGraph = new RGraph.Bar("cvsGraphBook", [22, 35, 42, 34, 41])

Dan gambar berikut adalah hasil dari Bar Chart dasar yang kita modikasi:

Mudah bukan?, dan tentunya untuk memberikan tampilan yang lebih menarik kita harus melengkapinya dengan menge-set properti-properti yang lain, untuk chart dengan tipe Bar GRaph ini anda bisa mengetahui properti-properti yang didukung berdasarkan API pada tautan ini.
Setelah kita bisa membuat basic chart dengan percobaan di atas, kali ini kita akan melakukan percobaan lagi tapi dengan sumber data yang berbeda yaitu dengan sumber data JSON. Pada dasarnya untuk pembuatan chart dengan sumber data JSON yang harus kita tahu hanyalah bagaimana struktur JSON yang akan menjadi penyokong RGraph sebagai sumber datanya. Untuk pembuatan JSONnya itu sendiri, saya serahkan kepada pembaca, apakah ingin membuat sebuah aplikasi dengan php, java, python, perl, atau mungkin nodejs. Yang paling penting adalah aplikasi tersebut bisa menghasilkan sebuah format JSON data yang valid berdasarkan struktur json itu sendiri. 

Sekarang coba perhatikan struktur JSON pada gambar di bawah ini:

Begitulah kira-kira struktur JSON minimal yang dibutuhkan oleh RGraph untuk dipakainya sebagai sumber data. Secara arsitektur aplikasi bisa saja json data tersebut ada pada sebuah URL dan kemudian kita panggil sumber data tersebut lewat ajax, dengan sedikit trik menggunakan jQuery tentunya kita bisa menyusun chart dengan sumber data dinamis lewat json ini. Mari kita lakukan percobaan ini, langkah pertama yang kita lakukan adalah membuat file json ini, mungkin akan terlalu lama jika kita menggunakan php atau bahasa pemrograman lain, kita akan membuat file static json yang seperti struktur diatas. Buatlah sebuah file json bernama book-catalog.json dan letakkan dalam folder datasource yang kita buat pada awal artikel ini, adapun isi dari file tersebut adalah sebagai berikut:

{"data": [23, 35, 42, 34, 41],
 "label": ["Science", "Fiction", "Art", "Novel", "Comics"],
 "tooltips": ["Science [22]", "Fiction [35]", "Art [42]", "Novel [34]", "Comics [41]"]
}

Oleh karena kita akan menggunakan mekanisme ajax dalam percobaan ini, maka kita harus meng-upload-nya ke dalam server, gunakan server localhost anda dan kemudian upload seluruh file project kita ke dalam server localhost tersebut. Untuk para pembaca yang tidak memiliki server pada komputer atau laptop, cara yang paling mudah adalah meng-install XAMPP  ke dalam komputer atau laptop anda kemudian meng-copy folder project kita ke dalam folder [xampp-install]/apache2/htdocs/.
Kemudian buka file tersebut menggunakan browser yang mendukung output tipe data json, atau mungkin meng-install plugin json-viewer pada browser yang anda gunakan, sehingga tampilan seperti gambar struktur diatas bisa anda dapatkan, seperti gambar berikut ini:

Pastikan output dari file yang kita buat seperti gambar diatas. Langkah selanjutnya adalah mengubah kode-kode pada tag script menjadi seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/RGraph.common.core.js"></script>
    <script type="text/javascript" src="js/RGraph.common.dynamic.js"></script>
    <script type="text/javascript" src="js/RGraph.common.tooltips.js"></script>
    <script type="text/javascript" src="js/RGraph.bar.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.get("datasource/book-catalog.json",function(jsonData){
                var pieGraph = new RGraph.Bar("cvsGraphBook", jsonData.data)
                        .Set("labels", jsonData.label)
                        .Set("tooltips", jsonData.tooltips)
                        .Draw();
            });

        });
    </script>
<body>
<canvas id="cvsGraphBook" width="350" height="250">[No canvas support]</canvas>
</body>
</html>

Perhatikan baris kode pada tag script yang kita modifikasi, disana terlihat kita memanfaatkan jquery ajax dengan fungsi get untuk mengambil sumber data book-catalog.json tadi, kemudian hasil dari ajax tersebut kita letakkan pada variabel jsonData. Dan untuk selanjutnya variabel jsonData tersebut kita parse untuk mengisi parameter dan properti-properti yang kita butuhkan untuk membuat chart menggunakan RGraph. Dan hasilnya akan seperti gambar dibawah ini:

Ya, dalam gambar tersebut saya sengaja untuk men-capture firebug plugin milik firefox agar kita dapat melihat proses ajax tersebut. Demikianlah kegiatan kita untuk kesempatan kali ini, semoga pembaca semua dapat mengambil pengetahuan yang mungkin ada dalam percobaan kita kali ini.
Terima kasih dan semoga bermanfaat.



Menteng, 16 Maret 2014

Josescalia