Latar Belakang

• Grafik dibutuhkan di berbagai aplikasi business intelligence / dashboard :
  • Menarik kesimpulan prioritas bisnis dari data dengan bantuan visualisasi untuk pengambilan keputusan :
    • Daerah mana yang paling membutuhkan dokter
    • Berapa banyak toko cabang yang tidak memenuhi target
    • Penyebab utama mahasiswa bernilai jelek
    • Membandingkan trend peningkatan keuntungan perusahaan 5 tahun terakhir
  • Menguatkan argumen dalam publikasi maupun diskusi pengambilan keputusan dibanding hanya menyajikan data dalam tulisan

Topik Bahasan

• JSON
• HTTP Request
• Map
• Chart (SVG, Canvas)

Langkah Kerja

1. Tentukan kebutuhan konten dan bentuk grafik

• kesehatan
• bagaimana menggambarkan kebutuhan dokter per wilayah :
  • lebih efektif mana satuan yang ditampilkannya :
    • hanya jumlah dokter ?
    • jumlah dokter per 1000 penduduk ?
    • jumlah penduduk per 1 dokter ?
  • keterangan rasio ideal WHO dalam setiap 2500 penduduk ada satu dokter (2500:1), BPJS 3000:1
  • lebih mudah mana masyarakat umum membaca angka koma, atau ribuan
  • data yang tersedia :
    • web API jumlah penduduk
    • web API jumlah dokter
  • bentuk grafik :
    • grafik batang dengan dua nilai sekaligus yaitu :
      • jumlah dokter
  • jumlah penduduk per 1 dokter
  • bentuk interaksi pengguna terhadap grafik

2. Pilih teknologi Javascript untuk membuat grafik

• grafik kompleks dan tingkat kustomasi tinggi :
  • d3 dokumentasi
  • manipulasi element svg (vector) dokumentasi
  • manipulasi element canvas (raster) dokumentasi
• grafik yang konfigurasinya lebih sederhana :
  • Chart.js dokumentasi
  • Highcharts dokumentasi
  • Chartist.js dokumentasi

3. Tentukan format data input dari teknologi pembuat grafik yang dipilih

• Chart.js :
  • label berbentuk array contoh : ["Bandung", "Odading", "Ciroyom", "Bunga Bermekaran"]
  • nilai data berbentuk array contoh : [145, 130, 180, 177]

4. Ambil data dari web API

• Teknologi HTTP request di javascript :
  • Bawaan : XMLHttpRequest dokumentasi
  • Bawaan : Fetch dokumentasi
  • Axios dokumentasi
  • Request dokumentasi

5. Transformasi data dari web API ke format input teknologi pembuat grafik

• Fungsi terkait :
  • map()

6. Masukan data hasil transformasi ke teknologi pembuat grafik

Catatan Penting

• Konsep pemrograman berorientasi objek sebagai landasan
• Baca dan mengerti class, property, dan method penting dari teknologi yang dipilih, jangan hanya copy paste

javascript web_api chart http_request