Membangun Aplikasi Mini HRD dengan Django (5): Menampilkan Grafik dengan Morris.js

Di tutorial sebelumnya, Anda sudah mengikuti bagaimana cara memasang sebuah web template di Django. Dengan demikian Anda sudah mengenal bagaimana cara menempatkan file CSS dan Javascript yang paling simple, dan juga membuat sebuah hirarki layouting yang dapat mempermudah pembuatan halaman HTML yang dapat digunakan ulang. Dalam sebuah aplikasi web terkadang kita ingin melihat sebuah laporan berupa grafik batang (bar chart), kurva (line chart), atau lingkaran (pie chart). Dengan menggunakan tampilan tersebut Anda dapat melihat visualisasi data yang semula teks menjadi lebih enak dipandang. Kali ini kita akan menampilkan sebuah grafik yang memperlihatkan perbandingan kehadiran pada suatu bulan tertentu.

Ada beberapa library Javascript yang dapat digunakan untuk membuat sebuah grafik interaktif di halaman web:

  • Highchart.js
  • Chart.js
  • Morris.js
  • Flot.js
  • D3.js

Di tutorial ini kita akan menggunakan Morris.js yang telah tertanam di template SB Admin2, sehingga tidak perlu mengatur penempatan file CSS dan Javascript dari Morris.js tersebut. Selain itu Morris.js merupakan salah satu library grafik yang cukup mudah digunakan dan diatur. Sekarang mari kita mulai tutorial ini.

Membuat views baru untuk menampilkan grafik

Untuk menampilkan sebuah grafik, tentu diperlukan sebuah data. Kita akan mencoba menampilkan sebuah grafik batang dengan menggunakan Morris.js. Grafik batang memerlukan sebuah data yang memiliki dua dimensi data. Yaitu sejumlah data untuk ordinat x dan ordinat y. Morris.js dapat membantu Anda menampilkan sebuah grafik batang yang memiliki banyak data dengan ordinat x yang sama. Sehingga dalam satu kategori data dapat muncul dua atau lebih grafik batang. Tapi kita hanya akan menampilkan satu data saja per kategorinya.

Sekarang mari kita tambahkan views baru di file kehadiran/views.py:

.......................

@login_required(login_url=settings.LOGIN_URL)
def tampil_grafik(request, bulan, tahun):
    temp_chart_data = []
    daftar_hadir = Kehadiran.objects.filter(waktu__year=tahun, waktu__month=bulan, karyawan__id=request.session['karyawan_id'])

    temp_chart_data.append({ "x":"hadir", "a":daftar_hadir.filter(jenis_kehadiran='hadir').count() })
    temp_chart_data.append({ "x":"izin", "a":daftar_hadir.filter(jenis_kehadiran='izin').count() })
    temp_chart_data.append({ "x":"alpa", "a":daftar_hadir.filter(jenis_kehadiran='alpa').count() })
    temp_chart_data.append({ "x":"cuti", "a":daftar_hadir.filter(jenis_kehadiran='cuti').count() })

    chart_data = json.dumps({"data":temp_chart_data})               

    return render(request, 'new/tampil_grafik.html', {'chart_data':chart_data, 'bulan':bulan, 'tahun':tahun})

Pada kode diatas seperti biasa kita menempelkan decorator login_required untuk mencegah views ini diakses oleh seseorang yang belum login. Kemudian views ini menerima dua buah parameter yaitu bulan dan tahun. Sama halnya dengan ketika ingin menampilkan sebuah kehadiran di bulan dan tahun tertentu. Kemudian kita mengambil data kehadiran tersebut berdasarkan karyawan yang login. Setelah itu membentuk data dengan masing - masing jenis kehadiran dan di-dumps menjadi data bertipe JSON. Lalu kita kemas data tersebut ke template yang bernama tampil_grafik.html.

Jangan lupa tambahkan pula url berikut di dalam koleksi urlpatterns di file mini_hrd/urls.py:

url(r'^daftar_hadir/grafik/(?P\d+)/(?P\d+)$', kehadiran_views.tampil_grafik),

Membuat template untuk menampilkan grafik

Tambahkan file tampil_grafik.html di folder kehadiran/templates/new kemudian buatlah kode program berikut di file tersebut:

{% extends "layout/base.html" %}
{% block content %}      
            

Grafik Kehadiran


Grafik kehadiran Anda di bulan {{ bulan }} tahun {{ tahun }}
{% endblock %} {% block inline_js %} {% endblock %}

Pada kode diatas kita membuat dua buah div penting yaitu div dengan id morris-bar-chart dan chart_data. Div dengan id morris-bar-chart adalah sebuah wadah yang akan menampilkan grafik batang yang dibuat oleh Morris.js. Kemudian kita juga membuat sebuah kode Javascript yang akan memproses penampilan grafik batang. Pertama kita tampung terlebih dahulu data yang akan ditampilkan di variabel chart_data. Kemudian membuat sebuah grafik batang dengan memanggil Morris.Bar(). Elemen yang ditunjuk adalah morris-bar-chart, kemudian kita sertakan data yang akan ditampilkan, jangan lupa untuk menentukan xkeys dan ykeys.

Hasilnya akan tampak seperti pada gambar berikut:

Selection_015 Tombol grafik sudah ditambahkan ke halaman daftar hadir

Selection_016 Contoh grafik kehadiran di bulan mei tahun 2016

Contoh grafik di bulan lainnya Contoh grafik di bulan lainnya

Penutup

Dengan menggunakan Morris.js, Anda dapat memperkaya halaman web yang Anda bangun. Kini halaman aplikasi mini HRD yang Anda kembangkan pun menjadi lebih lengkap dengan adanya grafik tersebut.

(rfs/djangoproject)

Dilihat 2590 kali

Is this helpful?

Share This Post