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

Membuat views baru untuk menampilkan grafik

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

            </div>
            <!-- /.row -->
        </div>
        <!-- /.row -->

Pada kode diatas kita membuat dua buah <strong>div</strong> penting yaitu <strong>div</strong> dengan <em>id</em> <strong>morris-bar-chart</strong> dan <strong>chart_data</strong>. <strong>Div</strong> dengan <em>id</em> <strong>morris-bar-chart</strong> 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 <strong>chart_data</strong>. Kemudian membuat sebuah grafik batang dengan memanggil <strong>Morris.Bar()</strong>. Elemen yang ditunjuk adalah <strong>morris-bar-chart</strong>, kemudian kita sertakan data yang akan ditampilkan, jangan lupa untuk menentukan <strong>xkeys</strong> dan <strong>ykeys</strong>.

Hasilnya akan tampak seperti pada gambar berikut:

<img class="wp-image-10447 size-large" src="https://www.codepolitan.com/wp-content/uploads/2016/06/Selection_015-1-700x336.png" alt="Selection_015" width="700" height="336" /> Tombol grafik sudah ditambahkan ke halaman daftar hadir

<img class="wp-image-10448 size-large" src="https://www.codepolitan.com/wp-content/uploads/2016/06/Selection_016-2-700x337.png" alt="Selection_016" width="700" height="337" /> Contoh grafik kehadiran di bulan mei tahun 2016

<img class="size-large wp-image-10449" src="https://www.codepolitan.com/wp-content/uploads/2016/06/Selection_017-2-700x339.png" alt="Contoh grafik di bulan lainnya" width="700" height="339" /> Contoh grafik di bulan lainnya
<h2>Penutup</h2>
Dengan menggunakan Morris.js, Anda dapat memperkaya halaman <em>web</em> yang Anda bangun. Kini halaman aplikasi mini HRD yang Anda kembangkan pun menjadi lebih lengkap dengan adanya grafik tersebut.

(rfs/djangoproject)