Membuat Grafik dengan Menggunakan HTML5 dan Plugin jQuery

Membuat Grafik dengan Menggunakan HTML5 dan Plugin jQuery

Menampilkan grafik atau diagram terkadang bisa memudahkan seseorang untuk melihat perbandingan sekumpulan nilai, terutama yang bersifat tabular. Grafik dengan berbagai warna memang mudah dibuat…

Menampilkan grafik atau diagram terkadang bisa memudahkan seseorang untuk melihat perbandingan sekumpulan nilai, terutama yang bersifat tabular. Grafik dengan berbagai warna memang mudah dibuat pada aplikasi desktop biasa. Namun bagaimana dengan grafik pada website?

Manipulasi grafik pada web sebenarnya sudah lama bisa dilakukan dengan teknologi VML. Saat ini dengan HTML5, tersedia pula canvas yang memudahkan proses penggambaran grafis. Tentu saja, menggambar dari nol bisa jadi proses yang cukup rumit. Untuk itu, bagi Anda yang suka memakai jQuery, bisa menggunakan plugin jqPlot untuk membuat grafik. Lebih lengkapnya, ikuti langkah-langkah berikut.

  1. Karena jqPlot merupakan plugin untuk jQuery, tentu saja Anda harus mendownload jQuery terlebih dahulu. Meskipun sebenarnya dalam paket distribusi jqPlot terdapat jQuery pula, ada baiknya untuk menggunakan jQuery versi terbaru di website resminya. jQuery bisa didownload di http://jquery.comsecara langsung.

    Download versi production dari jQuery

  2. Setelah itu, download plugin jqPlot di alamat https://bitbucket.org/cleonello/jqplot/downloads/. Pada bagian menu sebelah kanan, Anda bisa menemukan link “get source”. Pilihlah format yang Anda inginkan, karena tersedia format ZIP, GZ, maupun BZ2.

    Download dengan tipe kompresi berbeda

  3. Setelah semua proses download selesai, Anda bisa melanjutkan dengan membuat folder kerja. Hanya untuk mencoba saja, maka buatlah seperti biasa, yaitu sebuah file index.html beserta folder assets untuk meletakkan file javascript beserta css-nya. Masukkan seluruh file dalam folder “src” di hasil download jqPlot ke dalam folder kerja. Sebab seluruh file di dalamnya akan dibutuhkan dalam pembuatan grafik.

    Struktur file kerja

  4. Cukup banyak memang file yang harus dimasukkan ke dalam folder. Namun Anda tidak perlu bingung, karena sebenarnya hanya beberapa file yang perlu Anda deklarasikan dalam file html. Untuk itu, dalam file index.html Anda, buatlah struktur sebagai berikut. Sertakan file css dan javascript dalam tag head tersebut.
    <!DOCTYPE html>
    <html>
      <head>
        <title>Bisa Komputer Demo Web</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!--[if lt IE 9]>
        <script language="javascript" type="text/javascript" src="assets/js/excanvas.js"></script>
        <![endif]-->
        <script src="assets/js/jquery-1.7.2.min.js"></script>
        <script src="assets/js/jquery.jqplot.js"></script>
        <link rel="stylesheet" type="text/css" href="assets/css/jquery.jqplot.css" />
      </head>
      <body>
      </body>
    </html>
  5. Anda bisa perhatikan pada baris “if lt IE 9”, baris tersebut akan mendeteksi bila browser pengguna adalah Internet Explorer di bawah versi 9, maka file “excanvas.js” akan diload. File tersebut akan mensimulasi VML menjadi seperti layaknya canvas pada HTML5, sebab Internet Explorer versi 8 ke bawah belum support tag canvas. Perlu diketahui pula bila Anda meletakkan file pada folder dengan nama berbeda, Anda juga harus menyesuaikannya sendiri.
  6. File lain yang perlu diload hanya jQuery beserta jqPlot dan file css-nya. Setelah itu, Anda bisa memulai membuat container grafiknya dengan membuat elemen “div”. Pastikan elemen tersebut memiliki width dan height yang sudah ditentukan. Berikan juga “id” agar dapat dengan mudah digunakan pada jqPlot.
    <div id="chartdiv" style="height:300px;width:400px; "></div>
  7. Setelah itu, Anda bisa memulai menggambar grafik menggunakan jqPlot. Sebagai contoh dengan data acak di bawah ini, Anda cukup memanggil fungsi jqplot() yang diisi dengan parameter berupa data grafiknya. Berikut contoh kode beserta tampilan hasilnya.
    <script>
      $(document).ready(function() {
        $.jqplot('chartdiv',  [[[1, 100], [4,5.12], [5,15.5], [8,44.6], [10,85.9], [12,219.9], [15,219.9]]]);
      });
    </script>

    Contoh diagram pertama

  8. Anda bisa menambahkan opsi-opsi yang disertakan pada parameter kedua. Contoh penggunaannya adalah sebagai berikut untuk menghasilkan tampilan yang berbeda. Opsi lainnya bisa Anda lihat pada dokumentasinya di alamat http://www.jqplot.com/docs/files/jqPlotOptions-txt.html.
    <script>
      $(document).ready(function() {
        $.jqplot('chartdiv',  [[[1, 100], [4,5.12], [5,15.5], [8,44.6], [10,85.9], [12,219.9], [15,219.9]]],
            { title:'Product Sales',
              axes:{yaxis:{min:-10, max:230}},
              series:[{color:'#5F3378'}]
            });
      });
    </script>

    Contoh diagram kedua

  9. jqPlot juga menyediakan plugin tambahan untuk membuat tampilan grafik lebih menarik dan interaktif. Salah satu tampilan yang umum digunakan lagi adalah grafik batang. Untuk itu, pada head perlu disertakan pula plugin ini.
    <!-- Contoh untuk bar chart -->
    <script src="assets/js/plugins/jqplot.barRenderer.js"></script>
    <script src="assets/js/plugins/jqplot.categoryAxisRenderer.js"></script>
    <script src="assets/js/plugins/jqplot.pointLabels.js"></script>
  10. Sedangkan pada penggunaannya, Anda bisa mendefinisikan berbagai parameter pada opsi. Perhatikan pada opsi “renderer”, Anda bisa memasukkan jenis grafik yang akan Anda gunakan. Tampilannya bisa Anda lihat pada gambar.
    <div id="barchart" style="height: 300px; width: 600px;"></div>
    <script>
      $(document).ready(function() {
        var s1 = [200, 600, 700, 1000];
        var s2 = [460, -210, 690, 820];
        var s3 = [-260, -440, 320, 200];
    
        var ticks = ['May', 'June', 'July', 'August'];
    
        var plot1 = $.jqplot('barchart', [s1, s2, s3], {
          seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true}
          },
          series:[
            {label:'Hotel'},
            {label:'Event Regristration'},
            {label:'Airfare'}
          ],
          legend: {
            show: true,
            placement: 'outsideGrid'
          },
          axes: {
            xaxis: {
              renderer: $.jqplot.CategoryAxisRenderer,
              ticks: ticks
            },
            yaxis: {
              pad: 1.05,
              tickOptions: {formatString: '$%d'}
            }
          }
        });
      });
    </script>

    Contoh diagram ketiga

  11. Untuk lebih lengkapnya tentang jqPlot ini, Anda bisa membacanya di dokumentasi resminya yang ada di alamat http://www.jqplot.com/docs/. Selamat mencoba.
Artikel oleh Penulis dengan versi sebelumnya telah dipublikasikan di PC Mild edisi 23/2011
Tag: , , , ,

2 Comments

Leave Comment
  1. rifai says:

    Mas Haqqi, distruktur file saya lihat ada file index.php, itu dari mana ya? Ditutorialnya nggak dijelaskan tentang file tersebut, semua script2 tersebut kan dijadikan satu pada file index.html ya? Mohon pencerahannya. Saya bermaksud mengganti semua flash chart dengan chart html5/J.query pada web kami agar dapat aktif/dibuka ketika visitor mengakses dengan tablet/iPad dan sejenisnya. Terima kasih sebelumnya atas penjelasannya. Dan Salam kenal.

  2. kenta says:

    kk mau tanya trus klu mau mengubah format angka untuk garis x maupun y menjadi sesuatu yang kita inginkan , misalnya pernghitungan keuntungan dari barang dagangan yang di jual tu gmn ngubah formatnya?
    karena waktu saya menelusuri code CSS nya jquery.jqplot.css knapa tidak ada pengaturan format nya, tolong penjelasan dan solusinya terimakasih

Write Comment

Your email will not be published. The marked label is required.