Pertemuan-07

Mata Kuliah: Pemrograman Berbasis Komputer

Bahasa Pemrograman: C#
Topik: Data Logging, Grafik Chart, dan Grafik DrawLine

BAGIAN 1 — DATA LOGGING

1.1 Apa Itu Data Logging?

Data Logging adalah proses mengumpulkan, mencatat, dan menyimpan data secara otomatis ke media penyimpanan untuk dianalisis di kemudian hari.

🗒️ Analogi: Buku Harian Seorang Dokter

Bayangkan seorang dokter yang setiap hari mencatat kondisi pasiennya:
"Senin 08:00 — Suhu badan: 38.5°C, Tekanan darah: 120/80"
"Senin 12:00 — Suhu badan: 37.9°C, Tekanan darah: 118/78"

Dokter tidak bergantung pada ingatan. Ia mencatat secara sistematis agar bisa melihat tren dan mengambil keputusan berdasarkan data historis.

Itulah yang dilakukan Data Logging — bukan oleh manusia, melainkan oleh program komputer, secara otomatis.

┌────────────────────────────────────────────────────┐
│           TANPA DATA LOGGING                       │
│                                                    │
│   Mesin  →  Kita tidak tahu apa yang terjadi      │
│   Sensor →  Data hilang setelah dibaca             │
│   User   →  Tidak ada bukti transaksi             │
└────────────────────────────────────────────────────┘

┌────────────────────────────────────────────────────┐
│           DENGAN DATA LOGGING                      │
│                                                    │
│   Mesin  →  📁 log.txt → Analisis → Keputusan     │
│   Sensor →  📁 data.csv → Grafik → Prediksi       │
│   User   →  📁 database → Laporan → Audit         │
└────────────────────────────────────────────────────┘

Sumber Data yang Dapat Di-log:

Sumber	Contoh
🧑 Input pengguna	Nama, nilai, transaksi yang diketik
🌡️ Sensor	Suhu, kelembaban, tekanan, cahaya
🏭 Mesin industri	RPM motor, konsumsi daya, getaran
🖥️ Sistem monitoring	Status server, penggunaan RAM/CPU
📡 IoT device	Smart meter listrik, GPS tracker

1.2 Tujuan Data Logging

┌──────────────────────────────────────────────────────────────┐
│                    MENGAPA KITA PERLU LOG?                   │
│                                                              │
│  📚 Dokumentasi   →  Bukti bahwa sesuatu pernah terjadi     │
│  👀 Monitoring    →  Pantau sistem secara real-time         │
│  📊 Analisis      →  Temukan pola & tren dari waktu ke waktu│
│  🔧 Troubleshoot  →  "Kapan dan mengapa mesin mati?"        │
│  🔮 Prediksi      →  Deteksi kerusakan sebelum terjadi      │
│  🏭 Smart Factory →  Otomasi keputusan berdasarkan data     │
└──────────────────────────────────────────────────────────────┘

1.3 Contoh Implementasi Nyata

Bidang	Implementasi	Parameter yang Direkam
🏭 Industri	Monitoring suhu mesin produksi	Suhu, tekanan, getaran
🎓 Pendidikan	Sistem absensi digital mahasiswa	NIM, nama, waktu hadir
🏥 Kesehatan	Monitoring detak jantung pasien	BPM, saturasi oksigen (SpO₂)
⚡ Energi	Monitoring panel surya	Daya (Watt), tegangan, arus
🏠 Smart Home	Konsumsi listrik rumah tangga	kWh harian, waktu puncak

1.4 Proses Data Logging

🚦 Analogi: Kamera CCTV di Jalan Raya

Kamera CCTV tidak hanya melihat — ia juga merekam dan menyimpan secara otomatis. Setiap kendaraan yang lewat tercatat: plat nomor + waktu + lokasi.
Polisi bisa memutar rekaman itu kapan saja untuk investigasi.

Data logging bekerja persis seperti itu — program Anda adalah CCTV-nya, file adalah rekaman videonya.

╔══════════════════════════════════════════════════════════╗
║               ALUR PROSES DATA LOGGING                  ║
╠══════════════════════════════════════════════════════════╣
║                                                          ║
║   [SUMBER DATA]                                          ║
║   Sensor / Input / Mesin                                 ║
║         │                                                ║
║         ▼                                                ║
║   ┌─────────────┐                                        ║
║   │ 1. AMBIL    │  ← Baca nilai dari sumber              ║
║   │    DATA     │                                        ║
║   └──────┬──────┘                                        ║
║          │                                               ║
║          ▼                                               ║
║   ┌─────────────┐                                        ║
║   │ 2. TAMBAH   │  ← DateTime.Now → "2026-05-18 10:20"  ║
║   │  TIMESTAMP  │                                        ║
║   └──────┬──────┘                                        ║
║          │                                               ║
║          ▼                                               ║
║   ┌─────────────┐                                        ║
║   │ 3. SIMPAN   │  ← File.AppendAllText() ke .txt/.csv  ║
║   │  KE FILE    │                                        ║
║   └──────┬──────┘                                        ║
║          │                                               ║
║          ▼                                               ║
║   ┌─────────────┐                                        ║
║   │ 4. ANALISIS │  ← Buka di Excel / Python / Grafik    ║
║   │    DATA     │                                        ║
║   └─────────────┘                                        ║
║                                                          ║
╚══════════════════════════════════════════════════════════╝

1.5 Media Penyimpanan Data

Format	Keterangan	Kapan Digunakan
📄 TXT	Sederhana, mudah dibaca manusia	Log debugging, catatan cepat
📊 CSV	Bisa dibuka di Excel, format kolom	Data tabular, laporan
🗄️ Database (SQL)	Terstruktur, query kompleks	Skala besar, multi-user
☁️ Cloud	Akses dari mana saja	IoT monitoring, distributed
🔧 JSON/XML	Data terstruktur untuk integrasi	Web API, antar aplikasi

1.6 Library C# untuk Data Logging

Bahasa C# menyediakan library bawaan yang lengkap untuk keperluan file dan waktu:

using System;        // Untuk DateTime
using System.IO;     // Untuk operasi file
using System.Threading; // Untuk Thread.Sleep()

Fungsi	Kegunaan
`File.WriteAllText(path, text)`	Tulis file baru (⚠️ menimpa isi lama!)
`File.AppendAllText(path, text)`	Tambah data di akhir file (✅ untuk logging)
`File.Exists(path)`	Cek apakah file sudah ada
`DateTime.Now`	Ambil tanggal & waktu saat ini
`DateTime.Now.ToString("dd-MM-yyyy")`	Format tanggal sesuai keinginan
`Environment.NewLine`	Karakter baris baru (sesuai OS)
`Thread.Sleep(3000)`	Jeda eksekusi 3 detik

1.7 Contoh Program

📝 Program 1: Data Logging Sederhana ke File TXT

🧩 Analogi: Kotak Surat

Bayangkan rumah Anda punya kotak surat.
Setiap hari tukang pos datang dan memasukkan surat baru.
Surat-surat lama tidak dibuang — mereka tetap ada di dalam kotak.

File.AppendAllText() bekerja seperti tukang pos — ia menambahkan data baru
tanpa menghapus data yang sudah ada sebelumnya.

Berbeda dengan File.WriteAllText() yang seperti seseorang yang membuang semua surat lama
dan menggantinya dengan satu surat baru saja. ❌

Hari ke-1: [Surat A]
Hari ke-2: [Surat A] [Surat B]          ← AppendAllText ✅
Hari ke-3: [Surat A] [Surat B] [Surat C]

vs.

Hari ke-3: [Surat C]                    ← WriteAllText ❌

💻 Kode Program:

using System;
using System.IO;

class Program
{
    static void Main()
    {
        string path = "log.txt";

        Console.Write("Input data: ");
        string data = Console.ReadLine();

        // Format: "2026-05-18 10:20:35 | data dari pengguna"
        string log = DateTime.Now + " | " + data;

        // AppendAllText = tambahkan ke akhir file (tidak menimpa!)
        File.AppendAllText(path, log + Environment.NewLine);

        Console.WriteLine("✅ Data tersimpan ke: " + path);
    }
}

📁 Hasil file `log.txt` setelah 3 kali dijalankan:

2026-05-18 10:20:35 | Andi masuk kelas
2026-05-18 10:21:14 | Budi masuk kelas
2026-05-18 10:22:50 | Citra masuk kelas

🤖 Program 2: Data Logging Otomatis (Simulasi Sensor)

🧩 Analogi: Termometer Digital Otomatis

Di rumah sakit ICU, ada termometer digital yang mengukur suhu pasien
setiap 5 menit secara otomatis — tanpa perlu perawat menekan tombol.

Hasilnya langsung tersimpan di sistem rekam medis dengan timestamp.
Jika suhu tiba-tiba naik di tengah malam, alarm berbunyi dan datanya sudah tersimpan.

Program sensor di bawah ini bekerja persis seperti itu.

Program berjalan:
│
├─ Detik 0:    Baca suhu → 29°C → Simpan ke file → Tidur 3 detik
├─ Detik 3:    Baca suhu → 31°C → Simpan ke file → Tidur 3 detik
├─ Detik 6:    Baca suhu → 28°C → Simpan ke file → Tidur 3 detik
├─ Detik 9:    Baca suhu → 32°C → Simpan ke file → Tidur 3 detik
└─ ... terus berjalan sampai program dihentikan

💻 Kode Program:

using System;
using System.IO;
using System.Threading;

class Program
{
    static void Main()
    {
        Random sensor = new Random(); // Simulasi sensor

        Console.WriteLine("🔄 Logging sensor dimulai... (Ctrl+C untuk berhenti)");

        while (true)
        {
            // Simulasi pembacaan sensor
            int suhu = sensor.Next(25, 35);

            // Buat string log dengan timestamp
            string log = DateTime.Now + " | Suhu: " + suhu + "°C";

            // Simpan ke file
            File.AppendAllText("sensor.txt", log + Environment.NewLine);

            // Tampilkan di konsol juga
            Console.WriteLine(log);

            // Jeda 3 detik sebelum baca berikutnya
            Thread.Sleep(3000);
        }
    }
}

⚠️ Kenapa Harus Ada `Thread.Sleep()`?

TANPA Thread.Sleep():
Program baca → simpan → baca → simpan → baca → simpan → ...
(100.000 kali per detik!)
CPU: 💀 100% | File: 📦 membesar sangat cepat | Program: 🐌 hang

DENGAN Thread.Sleep(3000):
Program baca → simpan → 😴 tidur 3 detik → baca → simpan → 😴 tidur → ...
CPU: ✅ <1% | File: 📄 tumbuh wajar | Program: 🚀 responsif

📊 Program 3: Data Logging Format CSV

🧩 Analogi: Daftar Hadir di Lembar Excel

Format CSV ibarat tabel Excel — setiap baris adalah satu record,
setiap kolom dipisah dengan koma.

Keuntungannya: file ini bisa langsung dibuka dan diolah di Excel
tanpa perlu konversi apapun. Tinggal klik dua kali!

data.csv (dibuka di Excel):

┌──────────────┬──────────┬───────────┬───────┐
│   Tanggal    │  Waktu   │   Nama    │ Nilai │
├──────────────┼──────────┼───────────┼───────┤
│ 18-05-2026   │ 10:20:01 │ Andi      │   85  │
│ 18-05-2026   │ 10:21:15 │ Budi      │   92  │
│ 18-05-2026   │ 10:22:40 │ Citra     │   78  │
└──────────────┴──────────┴───────────┴───────┘

💻 Kode Program:

using System;
using System.IO;

class Program
{
    static void Main()
    {
        string path = "data.csv";

        // Tulis header hanya jika file belum ada
        if (!File.Exists(path))
            File.WriteAllText(path, "Tanggal,Waktu,Nama,Nilai\n");

        Console.Write("Nama mahasiswa: ");
        string nama = Console.ReadLine();

        Console.Write("Nilai: ");
        string nilai = Console.ReadLine();

        // Format tanggal dan waktu terpisah
        string tanggal = DateTime.Now.ToString("dd-MM-yyyy");
        string waktu   = DateTime.Now.ToString("HH:mm:ss");

        // Gabungkan dengan koma (format CSV)
        string data = tanggal + "," + waktu + "," + nama + "," + nilai;

        File.AppendAllText(path, data + "\n");

        Console.WriteLine("✅ Data tersimpan ke " + path);
    }
}

📁 Isi file `data.csv`:

Tanggal,Waktu,Nama,Nilai
18-05-2026,10:20:01,Andi,85
18-05-2026,10:21:15,Budi,92
18-05-2026,10:22:40,Citra,78

1.8 Keuntungan Data Logging

✅ Data historis tersimpan — semua kejadian bisa diakses kapan saja
✅ Mudah dianalisis — data CSV langsung bisa diolah di Excel atau Python
✅ Mendukung AI & Machine Learning — data historis adalah bahan bakar utama model prediksi
✅ Monitoring real-time — sistem dapat dipantau tanpa kehadiran operator

1.9 Kesalahan Umum dan Cara Mengatasinya

❌ KESALAHAN 1: Menggunakan WriteAllText untuk logging
   Akibat: Data lama tertimpa setiap kali program dijalankan
   ✅ Solusi: Gunakan AppendAllText agar data terakumulasi

❌ KESALAHAN 2: Tidak menyertakan timestamp
   Akibat: Data tidak diketahui kapan direkam, sulit dianalisis
   ✅ Solusi: Selalu tambahkan DateTime.Now di setiap baris log

❌ KESALAHAN 3: Infinite loop tanpa Thread.Sleep()
   Akibat: CPU mencapai 100%, program menjadi tidak responsif
   ✅ Solusi: Tambahkan Thread.Sleep() dengan interval yang sesuai

❌ KESALAHAN 4: Path file salah atau direktori tidak ada
   Akibat: Program error, file tidak bisa ditulis
   ✅ Solusi: Gunakan path absolut atau pastikan direktori tersedia

1.10 Pengembangan Lanjutan

Setelah menguasai dasar data logging, topik-topik berikut dapat dipelajari:

🔌 Data Logging Arduino → C# — membaca data sensor fisik lewat port serial
📡 Serial Port Communication — komunikasi antara mikrokontroler dan komputer
🗄️ Database SQL Server — menyimpan log ke database relasional
📈 Grafik Real-time — menampilkan data log dalam bentuk grafik otomatis
🏭 SCADA Mini System — sistem supervisory control and data acquisition
🤖 Smart Factory Monitoring — integrasi logging dengan sistem manufaktur cerdas

BAGIAN 2 — VISUALISASI DATA: GRAFIK 2D

MODUL 11: Grafik 2D dengan Komponen Chart

11.1 Pengenalan Komponen Chart

🧩 Analogi: Dasbor Mobil

Bayangkan dasbor mobil modern.
Di sana ada speedometer (angka dalam lingkaran), indikator bensin (garis),
dan mungkin grafik konsumsi BBM (chart).

Anda sebagai pengemudi tidak perlu tahu cara melukis speedometer dari nol.
Anda cukup tahu: "ini menunjukkan kecepatan".

Komponen Chart pada C# bekerja seperti dasbor itu — Anda tidak perlu
menghitung posisi setiap piksel. Cukup berikan datanya, Chart yang menggambar sendiri.

┌─────────────────────────────────────────────────────────────┐
│                  KOMPONEN CHART — CARA KERJA                │
│                                                             │
│   Developer (Anda):                                         │
│   "Ini datanya: [85, 92, 78, 95, 70]"                      │
│   "Tampilkan sebagai grafik garis"                          │
│                                                             │
│   Komponen Chart:                                           │
│   "Baik! Saya akan hitung skala, gambar sumbu,             │
│    plot setiap titik, hubungkan dengan garis,               │
│    tambah legenda... selesai!"                              │
│                                                             │
│   Hasil → Grafik profesional siap pakai ✅                  │
└─────────────────────────────────────────────────────────────┘

Jenis Grafik yang Tersedia:

Jenis	`SeriesChartType`	Cocok Untuk
Batang vertikal	`Column`	Perbandingan antar kategori
Garis	`Line`	Tren dari waktu ke waktu
Garis halus	`Spline`	Tren data sensor yang mulus
Batang horizontal	`Bar`	Ranking atau komparasi
Lingkaran	`Pie`	Proporsi/persentase

11.2 Konsep Series pada Chart

🧩 Analogi: Legenda Peta

Dalam sebuah peta wisata, ada legenda:
🔴 = Restoran, 🔵 = Hotel, 🟢 = Taman

Setiap jenis tempat digambar dengan warna berbeda agar mudah dibedakan.

Series pada Chart bekerja persis seperti itu:
setiap Series adalah satu "jenis data" dengan warna dan garis tersendiri.

Grafik Nilai Mahasiswa:

         100 ┤                        ●        Legenda:
          90 ┤   ○ ─ ─ ─ ─ ─ ─ ─ ● ─         ● = Series "UTS"
          80 ┤ ─ ─ ○          ○             ○ = Series "UAS"
          70 ┤         ○
          60 ┤
             └────┬────┬────┬────┬────
                 Andi Budi Citra Dani

→ Satu Chart, DUA Series, data langsung bisa dibandingkan!

11.3 Kustomisasi Tampilan Chart

Fitur	Cara	Fungsi
Legenda	`chart1.Legends.Add()`	Tampilkan keterangan warna setiap Series
Label sumbu X	`series.Points.AddXY(label, nilai)`	Ganti angka indeks jadi nama (misal hari)
Judul grafik	`chart1.Titles.Add(judul)`	Tambahkan judul di atas grafik
Warna Series	`series.Color = Color.Red`	Ubah warna garis atau batang
Tipe grafik	`series.ChartType = SeriesChartType.Spline`	Ganti jenis grafik
Gabung tipe	Beda `ChartType` per Series	Satu grafik bisa punya garis DAN batang

11.4 Contoh Kode: Grafik Real-time dengan Timer

🧩 Analogi: Monitor Jantung di Rumah Sakit (EKG)

Di layar monitor ICU, grafik detak jantung terus bergerak dari kiri ke kanan.
Setiap detik ada titik baru yang ditambahkan, dan titik yang sudah terlalu lama dihapus.
Hasilnya: grafik selalu menampilkan 20 detak terakhir secara real-time.

Kode di bawah ini mensimulasikan hal yang sama untuk data suhu sensor.

using System;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;

public partial class FormGrafik : Form
{
    Random sensor = new Random();
    int xPos = 0;

    public FormGrafik()
    {
        InitializeComponent();

        // Setup Series
        chart1.Series.Clear();
        Series s = new Series("Suhu Ruangan");
        s.ChartType = SeriesChartType.Spline; // Garis halus
        s.BorderWidth = 2;
        s.Color = System.Drawing.Color.OrangeRed;
        chart1.Series.Add(s);

        // Judul grafik
        chart1.Titles.Add("📡 Monitoring Suhu Real-time");

        // Timer setiap 1 detik
        timer1.Interval = 1000;
        timer1.Start();
    }

    private void timer1_Tick(object sender, EventArgs e)
    {
        int suhu = sensor.Next(25, 35);

        // Tambah titik data baru
        chart1.Series["Suhu Ruangan"].Points.AddXY(xPos, suhu);
        xPos++;

        // Tampilkan hanya 20 titik terakhir (seperti EKG)
        if (chart1.Series["Suhu Ruangan"].Points.Count > 20)
            chart1.Series["Suhu Ruangan"].Points.RemoveAt(0);
    }
}

11.5 Integrasi Chart + Data Logging

Menggabungkan logging dan grafik menghasilkan sistem monitoring yang lengkap:

private void timer1_Tick(object sender, EventArgs e)
{
    int suhu = sensor.Next(25, 35);

    // ① Tampilkan di grafik (visual real-time)
    chart1.Series["Suhu"].Points.AddXY(xPos++, suhu);

    // ② Simpan ke file log (rekaman permanen)
    string log = DateTime.Now + "," + suhu;
    File.AppendAllText("sensor_log.csv", log + "\n");
}

Alur kerja terintegrasi:

Sensor → Data → ┬→ Chart  (tampil di layar, real-time)
                └→ File   (tersimpan permanen, bisa dianalisis nanti)

MODUL 12: Grafik 2D dengan DrawLine (Garis Manual)

12.1 Konsep Dasar Menggambar Garis

🧩 Analogi: Kertas Milimeter

Pernah lihat kertas milimeter (kertas berkotak kecil-kecil)?
Setiap kotak punya koordinat — misalnya kotak di baris ke-5, kolom ke-10.

Untuk menggambar garis, kita cukup bilang:
"Tarik garis dari kotak (10, 5) sampai kotak (40, 20)"

Itulah cara DrawLine bekerja di C# —
layar komputer adalah kertas milimeter raksasa,
dan Pen adalah pulpen Anda.

Komponen yang dibutuhkan untuk menggambar satu garis:

  Pen pen = new Pen(Color.Blue, 2);   ← "Pulpen warna biru, tebal 2mm"
  g.DrawLine(pen, 10, 10, 300, 200);  ← "Tarik dari (10,10) ke (300,200)"
                  ↑    ↑    ↑    ↑
                  X1   Y1   X2   Y2
                 (titik awal) (titik akhir)

12.2 Sistem Koordinat Layar

⚠️ Hati-hati: Koordinat Layar ≠ Koordinat Matematika!

Koordinat Matematika (yang biasa dipelajari di sekolah):
                    Y ↑
                    |
                    |
         ───────────┼──────────── X →
                  (0,0)
                    |

Koordinat Layar Komputer (C#):
(0,0) ──────────────────────────── X →
  |
  |  Layar komputer
  |
  ▼ Y

Aspek	Koordinat Matematika	Koordinat Layar C#
Titik asal (0,0)	Pojok kiri bawah	Pojok kiri atas
Arah X positif	Ke kanan	Ke kanan ✅ (sama)
Arah Y positif	Ke atas	Ke bawah ⚠️ (terbalik!)

🧩 Analogi: Membaca Buku vs Peta

Saat membaca buku, Anda mulai dari pojok kiri atas halaman.
Semakin ke bawah = semakin jauh dari awal halaman.

Koordinat layar komputer bekerja seperti itu — (0,0) ada di pojok kiri atas,
dan Y semakin besar saat bergerak ke bawah.

Contoh Praktis:

  (0,0)─────────────────────→ X bertambah ke kanan
    │
    │   (100, 50)  ← X=100 dari kiri, Y=50 dari atas
    │
    │         (200, 150) ← X=200 dari kiri, Y=150 dari atas
    ▼
  Y bertambah ke bawah

12.3 Komponen untuk Menggambar

Komponen	Kelas C#	Analogi Nyata
Kanvas tampilan	`PictureBox`	Bingkai foto tempat gambar dipasang
Permukaan gambar	`Bitmap`	Kanvas lukis kosong
Alat menggambar	`Graphics`	Tangan Anda yang memegang alat
Pena / garis	`Pen`	Pulpen dengan warna dan ketebalan tertentu
Hapus memori	`Dispose()`	Cuci kuas setelah selesai melukis

12.4 Pentingnya `Dispose()`

🧩 Analogi: Mencuci Piring Setelah Makan

Bayangkan setiap kali makan, Anda memakai piring baru tanpa pernah mencuci.
Lama-kelamaan: piring habis, dapur penuh, rumah bau. 🤢

Graphics dan Pen di C# adalah seperti piring — setelah dipakai,
harus dibersihkan (Dispose()) agar memori komputer tidak penuh.

TANPA Dispose():
Gambar ke-1 → Pen & Graphics di memori
Gambar ke-2 → Pen & Graphics (baru) di memori
Gambar ke-3 → Pen & Graphics (baru) di memori
... (setelah 1000 klik)
💀 Memori penuh → Program crash!

DENGAN Dispose():
Gambar ke-1 → pakai Pen & Graphics → Dispose() → memori bebas ✅
Gambar ke-2 → pakai Pen & Graphics → Dispose() → memori bebas ✅
... (berapapun klik)
🚀 Program berjalan lancar selamanya!

12.5 Contoh Kode: Menggambar Garis Dasar

using System;
using System.Drawing;
using System.Windows.Forms;

public partial class FormGaris : Form
{
    public FormGaris()
    {
        InitializeComponent();
    }

    private void btnGambar_Click(object sender, EventArgs e)
    {
        // Langkah 1: Siapkan kanvas (Bitmap)
        Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);

        // Langkah 2: Ambil alat menggambar (Graphics)
        Graphics g = Graphics.FromImage(bmp);

        // Langkah 3: Cat kanvas putih
        g.Clear(Color.White);

        // Langkah 4: Siapkan pena (warna biru, tebal 2px)
        Pen pen = new Pen(Color.Blue, 2);

        // Langkah 5: Gambar garis dari (10,10) ke (300,200)
        g.DrawLine(pen, 10, 10, 300, 200);

        // Langkah 6: Tampilkan hasil ke PictureBox
        pictureBox1.Image = bmp;

        // Langkah 7: WAJIB! Bersihkan memori
        pen.Dispose();
        g.Dispose();
    }
}

12.6 Contoh Kode: Membuat Grafik dari Data Array

🧩 Analogi: Menghubungkan Titik-titik di Buku Mewarnai

Pernah lihat buku mewarnai anak-anak yang punya titik-titik bernomor?
"Hubungkan titik 1 ke 2, 2 ke 3, 3 ke 4..."
Hasilnya: gambar yang indah!

DrawLine dalam perulangan bekerja persis seperti itu —
setiap iterasi menghubungkan satu titik data ke titik berikutnya.

private void TampilkanGrafik(int[] data)
{
    Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);
    Graphics g = Graphics.FromImage(bmp);
    g.Clear(Color.White);

    Pen penSumbu = new Pen(Color.Black, 1);
    Pen penData  = new Pen(Color.Red, 2);

    int originX = 40;                          // Titik asal sumbu X
    int originY = bmp.Height - 30;             // Titik asal sumbu Y (dari bawah)
    int lebarX  = (bmp.Width - 60) / data.Length;  // Jarak antar titik
    int skalaY  = (bmp.Height - 60) / 100;    // Skala nilai (0-100)

    // Gambar sumbu koordinat
    g.DrawLine(penSumbu, originX, 20, originX, originY);          // Sumbu Y (vertikal)
    g.DrawLine(penSumbu, originX, originY, bmp.Width - 10, originY); // Sumbu X (horizontal)

    // Hubungkan setiap titik data dengan garis
    for (int i = 0; i < data.Length - 1; i++)
    {
        //  Titik awal garis                  Titik akhir garis
        int x1 = originX + i * lebarX;       int x2 = originX + (i + 1) * lebarX;
        int y1 = originY - data[i] * skalaY;  int y2 = originY - data[i + 1] * skalaY;
        //       ↑ Y dikurangi karena Y layar terbalik!

        g.DrawLine(penData, x1, y1, x2, y2);
    }

    pictureBox1.Image = bmp;

    penSumbu.Dispose();
    penData.Dispose();
    g.Dispose();
}

Visualisasi cara kerja loop:

data = [20, 50, 30, 80, 60]

Iterasi 0: Gambar garis dari titik[0]=20 ke titik[1]=50
Iterasi 1: Gambar garis dari titik[1]=50 ke titik[2]=30
Iterasi 2: Gambar garis dari titik[2]=30 ke titik[3]=80
Iterasi 3: Gambar garis dari titik[3]=80 ke titik[4]=60

Hasil: Grafik garis yang menghubungkan 5 titik!

12.7 Perbandingan: Chart vs DrawLine

Aspek	Komponen Chart	DrawLine Manual
🎯 Kemudahan	Sangat mudah, siap pakai	Lebih kompleks, perlu hitung koordinat
🎮 Kontrol	Terbatas pada fitur bawaan	Kontrol penuh atas setiap piksel
📊 Jenis Grafik	Banyak pilihan bawaan	Hanya yang Anda program sendiri
🎨 Kustomisasi	Terbatas	Tidak terbatas
📚 Pemahaman	Abstrak, tidak tahu cara kerja	Memahami dasar komputasi grafis
🎯 Cocok untuk	Aplikasi bisnis, dashboard	Game, simulasi, editor grafis

LATIHAN DAN TUGAS

Latihan 1: Data Logging Dasar

🎯 Tujuan

Mahasiswa mampu membuat program data logging sederhana dengan input dari keyboard.

📋 Instruksi

Buat program C# yang:

Meminta input nama mahasiswa dan nilai ujian dari keyboard
Menyimpan data ke file hasil.csv dengan format: Tanggal,Waktu,Nama,Nilai
Menampilkan pesan konfirmasi setelah data berhasil disimpan
Membaca kembali isi file dan menampilkannya di konsol

🗺️ Panduan Alur Program

START
  │
  ▼
Tulis header CSV (jika file belum ada)
  │
  ▼
Input: nama mahasiswa ──→ simpan ke variabel nama
  │
  ▼
Input: nilai ujian ──────→ simpan ke variabel nilai
  │
  ▼
Ambil DateTime.Now → format tanggal & waktu
  │
  ▼
Gabungkan: "tanggal,waktu,nama,nilai"
  │
  ▼
File.AppendAllText("hasil.csv", data + "\n")
  │
  ▼
Tampilkan pesan: "✅ Data tersimpan!"
  │
  ▼
Baca file dengan File.ReadAllText() → tampilkan isi
  │
  ▼
END

📁 Contoh Output yang Diharapkan:

Nama mahasiswa: Ahmad
Nilai: 88
✅ Data tersimpan ke hasil.csv

=== ISI FILE hasil.csv ===
Tanggal,Waktu,Nama,Nilai
18-05-2026,10:35:22,Ahmad,88

💡 Petunjuk Kode:

// Cek dan buat header
if (!File.Exists("hasil.csv"))
    File.WriteAllText("hasil.csv", "Tanggal,Waktu,Nama,Nilai\n");

// Baca semua isi file
string isi = File.ReadAllText("hasil.csv");
Console.WriteLine(isi);

Latihan 2: Simulasi Sensor Otomatis

🎯 Tujuan

Mahasiswa mampu membuat program logging otomatis dengan perulangan dan delay.

📋 Instruksi

Kembangkan program simulasi sensor dengan fitur:

Membaca 10 data suhu secara otomatis (gunakan Random) dengan interval 2 detik
Menyimpan setiap data ke sensor_log.txt beserta timestamp
Menghentikan logging otomatis setelah 10 data tersimpan
Menghitung dan menampilkan nilai rata-rata, minimum, dan maksimum suhu

🗺️ Panduan Alur Program

START
  │
  ▼
Buat array int[] dataSuhu = new int[10]
Buat variabel: total = 0, min = 999, max = 0
  │
  ▼
for (i = 0; i < 10; i++):
  │
  ├─ Baca suhu = Random.Next(20, 40)
  ├─ Simpan ke dataSuhu[i]
  ├─ Update total, min, max
  ├─ Tulis log ke file: "timestamp | Suhu: X°C"
  ├─ Tampilkan di konsol
  └─ Thread.Sleep(2000)
  │
  ▼
Hitung: rata = total / 10
  │
  ▼
Tampilkan laporan:
"=== RINGKASAN ==="
"Rata-rata: X°C"
"Minimum: X°C"
"Maksimum: X°C"
  │
  ▼
END

📊 Contoh Output yang Diharapkan:

🔄 Memulai logging 10 data sensor...

2026-05-18 10:00:00 | Suhu: 28°C → disimpan
2026-05-18 10:00:02 | Suhu: 31°C → disimpan
2026-05-18 10:00:04 | Suhu: 25°C → disimpan
... (10 data total)

=== RINGKASAN DATA SENSOR ===
Total data : 10 record
Rata-rata  : 29.3°C
Minimum    : 23°C
Maksimum   : 36°C

💡 Petunjuk Kode:

// Update min dan max
if (suhu < min) min = suhu;
if (suhu > max) max = suhu;
total += suhu;

// Hitung rata-rata (gunakan double agar ada desimal)
double rata = (double)total / 10;
Console.WriteLine("Rata-rata: " + rata.ToString("F1") + "°C");

Latihan 3: Grafik 2D dengan Komponen Chart

🎯 Tujuan

Mahasiswa mampu membuat grafik sederhana menggunakan komponen Chart pada Windows Forms.

📋 Instruksi

Buat aplikasi Windows Forms yang:

Menampilkan dua Series dalam satu grafik (nilai UTS dan UAS mahasiswa)
Menggunakan jenis grafik berbeda untuk setiap Series (satu Line, satu Column)
Menampilkan legenda untuk membedakan kedua Series
Menggunakan nama mahasiswa sebagai label sumbu X

🗺️ Panduan Setup di Visual Studio

LANGKAH SETUP WINDOWS FORMS:

1. Buat proyek baru → "Windows Forms App (.NET)"
2. Toolbox → drag komponen Chart ke Form
3. Ubah ukuran Chart agar cukup besar (misal: 600 x 400 px)
4. Klik dua kali Form → tulis kode di event Form_Load

STRUKTUR KODE:
Form_Load()
  │
  ├─ chart1.Series.Clear()          ← hapus series default
  │
  ├─ Buat series1 "Nilai UTS"
  │    ChartType = Column
  │    Tambahkan data dengan AddXY(nama, nilai)
  │
  ├─ Buat series2 "Nilai UAS"
  │    ChartType = Line
  │    Tambahkan data dengan AddXY(nama, nilai)
  │
  ├─ chart1.Series.Add(series1)
  ├─ chart1.Series.Add(series2)
  │
  └─ chart1.Legends.Add("Legenda")

💻 Template Kode Awal:

private void Form1_Load(object sender, EventArgs e)
{
    chart1.Series.Clear();

    // Data mahasiswa
    string[] nama   = { "Andi", "Budi", "Citra", "Dani", "Eva" };
    int[]    nilaiUTS = { 75, 82, 68, 90, 77 };
    int[]    nilaiUAS = { 80, 85, 72, 88, 83 };

    // === Buat Series 1: Nilai UTS (Column/Batang) ===
    Series s1 = new Series("Nilai UTS");
    s1.ChartType = SeriesChartType.Column;
    for (int i = 0; i < nama.Length; i++)
        s1.Points.AddXY(nama[i], nilaiUTS[i]);

    // === Buat Series 2: Nilai UAS (Line/Garis) ===
    Series s2 = new Series("Nilai UAS");
    s2.ChartType = SeriesChartType.Line;
    s2.BorderWidth = 3; // Tebalkan garis agar terlihat
    for (int i = 0; i < nama.Length; i++)
        s2.Points.AddXY(nama[i], nilaiUAS[i]);

    chart1.Series.Add(s1);
    chart1.Series.Add(s2);
    chart1.Titles.Add("Perbandingan Nilai UTS dan UAS");
    chart1.Legends.Add("Legenda");
}

📊 Tampilan Grafik yang Diharapkan:

Perbandingan Nilai UTS dan UAS
                                          ● = Garis UAS
100 ┤                         ●           ■ = Batang UTS
 90 ┤            ■            ■
 80 ┤  ■    ■────●────●  ■────
 70 ┤  ●         ■    ●
 60 ┤
    └────┬─────┬─────┬─────┬─────
        Andi  Budi  Citra  Dani

Latihan 4: Grafik Real-time Terintegrasi

🎯 Tujuan

Mahasiswa mampu mengintegrasikan data logging dan visualisasi grafik dalam satu aplikasi.

📋 Instruksi

Buat sistem monitoring suhu yang:

Membaca data suhu setiap 1 detik menggunakan Timer
Menampilkan data dalam grafik Spline real-time
Menyimpan setiap data ke file log.csv bersamaan
Menampilkan nilai suhu terkini, rata-rata, dan status di Label

🗺️ Arsitektur Program

┌────────────────────────────────────────────────────────────┐
│                   FORM MONITORING SUHU                     │
│                                                            │
│  ┌──────────────────────────────────────┐  ┌───────────┐  │
│  │              CHART                  │  │  STATUS   │  │
│  │   Grafik Spline Suhu Real-time      │  │           │  │
│  │                          ╭──╮       │  │ Suhu: 29° │  │
│  │              ╭──╮       ╭╯  ╰──     │  │ Rata: 28° │  │
│  │         ╭──╮╭╯  ╰──────╯           │  │ Status:   │  │
│  │    ─────╯  ╰╯                       │  │ ✅ Normal  │  │
│  └──────────────────────────────────────┘  └───────────┘  │
│                                                            │
│  [▶ MULAI]  [⏸ BERHENTI]  [🗑️ RESET]                     │
└────────────────────────────────────────────────────────────┘
            │
            ▼
        📁 log.csv (tersimpan permanen)

💻 Template Kode Awal:

// Variabel global
Random sensor = new Random();
int xPos = 0;
double totalSuhu = 0;
int jumlahData = 0;

private void timer1_Tick(object sender, EventArgs e)
{
    int suhu = sensor.Next(20, 40);

    // ① Update grafik
    chart1.Series["Suhu"].Points.AddXY(xPos++, suhu);
    if (chart1.Series["Suhu"].Points.Count > 30)
        chart1.Series["Suhu"].Points.RemoveAt(0);

    // ② Simpan ke file log
    string log = DateTime.Now.ToString("HH:mm:ss") + "," + suhu;
    File.AppendAllText("log.csv", log + "\n");

    // ③ Update label info
    totalSuhu += suhu;
    jumlahData++;
    double rata = totalSuhu / jumlahData;

    lblSuhu.Text = "Suhu: " + suhu + "°C";
    lblRata.Text = "Rata-rata: " + rata.ToString("F1") + "°C";

    // ④ Tampilkan status
    if (suhu >= 35)
        lblStatus.Text = "⚠️ WARNING: Suhu Tinggi!";
    else if (suhu <= 22)
        lblStatus.Text = "🔵 WARNING: Suhu Rendah!";
    else
        lblStatus.Text = "✅ Normal";
}

🏆 Tugas Proyek Akhir: Mini Smart Factory Monitoring

📋 Deskripsi Proyek

Bangun sistem Smart Factory Monitoring yang mengintegrasikan data logging otomatis dengan visualisasi grafik real-time.

┌─────────────────────────────────────────────────────────────┐
│              SISTEM SMART FACTORY MONITORING                │
│                                                             │
│  SENSOR SIMULASI         PEMROSESAN           OUTPUT        │
│  ┌──────────────┐        ┌──────────┐         ┌─────────┐  │
│  │ Suhu Mesin   │───────▶│          │────────▶│ Grafik  │  │
│  │ Tekanan      │───────▶│  Program │────────▶│ Real-   │  │
│  │ Konsumsi kWh │───────▶│   C#     │────────▶│  time   │  │
│  └──────────────┘        │          │         └─────────┘  │
│                          └────┬─────┘                       │
│                               │                             │
│                               ▼                             │
│                          📁 factory_log.csv                 │
│                          (rekaman permanen)                 │
└─────────────────────────────────────────────────────────────┘

✅ Kriteria Penilaian

Komponen	Bobot	Deskripsi
📁 Data Logging	25%	Data tersimpan dengan benar beserta timestamp
📊 Visualisasi Grafik	25%	Grafik tampil dan diperbarui secara real-time
💻 Kualitas Kode	20%	Terstruktur, menggunakan `Dispose()`, bebas error
⭐ Fitur Tambahan	15%	Filter data, ekspor laporan, alarm, atau fitur kreatif
🎤 Presentasi	15%	Penjelasan cara kerja sistem secara lisan

💡 Ide Fitur Tambahan (Bonus)

🔔 Alarm otomatis jika suhu melebihi batas tertentu
📉 Tombol ekspor laporan harian ke CSV
📆 Filter data berdasarkan tanggal/jam
🗄️ Simpan data ke database SQL Server
📡 Baca data dari Arduino via Serial Port

REFERENSI

🎬 Video 1 — Pemrograman C# Bab 11: Grafik 2D Menggunakan Chart
<https://www.youtube.com/watch?v=c2j9NVprU28>
🎬 Video 2 — Pemrograman C# Bab 12: Membuat Grafik 2D Menggunakan Line
<https://www.youtube.com/watch?v=EnNfGHCZIZA>
📚 Microsoft Docs — System.IO Namespace
<https://docs.microsoft.com/en-us/dotnet/api/system.io>
📚 Microsoft Docs — System.Drawing Namespace
<https://docs.microsoft.com/en-us/dotnet/api/system.drawing>
📚 Microsoft Docs — Chart Control (Windows Forms)
<https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.datavisualization.charting>

BAGIAN 1 — DATA LOGGING

1.1 Apa Itu Data Logging?​

🗒️ Analogi: Buku Harian Seorang Dokter​

Sumber Data yang Dapat Di-log:​

1.2 Tujuan Data Logging​

1.3 Contoh Implementasi Nyata​

1.4 Proses Data Logging​

🚦 Analogi: Kamera CCTV di Jalan Raya​

1.5 Media Penyimpanan Data​

1.6 Library C# untuk Data Logging​

1.7 Contoh Program​

📝 Program 1: Data Logging Sederhana ke File TXT​

🧩 Analogi: Kotak Surat​

💻 Kode Program:​

📁 Hasil file log.txt setelah 3 kali dijalankan:​

🤖 Program 2: Data Logging Otomatis (Simulasi Sensor)​

🧩 Analogi: Termometer Digital Otomatis​

💻 Kode Program:​

⚠️ Kenapa Harus Ada Thread.Sleep()?​

📊 Program 3: Data Logging Format CSV​

🧩 Analogi: Daftar Hadir di Lembar Excel​

💻 Kode Program:​

📁 Isi file data.csv:​

1.8 Keuntungan Data Logging​

1.9 Kesalahan Umum dan Cara Mengatasinya​

1.10 Pengembangan Lanjutan​

BAGIAN 2 — VISUALISASI DATA: GRAFIK 2D

MODUL 11: Grafik 2D dengan Komponen Chart

11.1 Pengenalan Komponen Chart​

🧩 Analogi: Dasbor Mobil​

Jenis Grafik yang Tersedia:​

11.2 Konsep Series pada Chart​

🧩 Analogi: Legenda Peta​

11.3 Kustomisasi Tampilan Chart​

11.4 Contoh Kode: Grafik Real-time dengan Timer​

🧩 Analogi: Monitor Jantung di Rumah Sakit (EKG)​

11.5 Integrasi Chart + Data Logging​

MODUL 12: Grafik 2D dengan DrawLine (Garis Manual)

12.1 Konsep Dasar Menggambar Garis​

🧩 Analogi: Kertas Milimeter​

12.2 Sistem Koordinat Layar​

⚠️ Hati-hati: Koordinat Layar ≠ Koordinat Matematika!​

🧩 Analogi: Membaca Buku vs Peta​

12.3 Komponen untuk Menggambar​

12.4 Pentingnya Dispose()​

🧩 Analogi: Mencuci Piring Setelah Makan​

12.5 Contoh Kode: Menggambar Garis Dasar​

12.6 Contoh Kode: Membuat Grafik dari Data Array​

🧩 Analogi: Menghubungkan Titik-titik di Buku Mewarnai​

12.7 Perbandingan: Chart vs DrawLine​

LATIHAN DAN TUGAS

Latihan 1: Data Logging Dasar​

🎯 Tujuan​

📋 Instruksi​

🗺️ Panduan Alur Program​

📁 Contoh Output yang Diharapkan:​

💡 Petunjuk Kode:​

Latihan 2: Simulasi Sensor Otomatis​

🎯 Tujuan​

📋 Instruksi​

🗺️ Panduan Alur Program​

📊 Contoh Output yang Diharapkan:​

💡 Petunjuk Kode:​

Latihan 3: Grafik 2D dengan Komponen Chart​

🎯 Tujuan​

📋 Instruksi​

🗺️ Panduan Setup di Visual Studio​

💻 Template Kode Awal:​

📊 Tampilan Grafik yang Diharapkan:​

Latihan 4: Grafik Real-time Terintegrasi​

🎯 Tujuan​

📋 Instruksi​

🗺️ Arsitektur Program​

💻 Template Kode Awal:​

🏆 Tugas Proyek Akhir: Mini Smart Factory Monitoring​

📋 Deskripsi Proyek​

✅ Kriteria Penilaian​

💡 Ide Fitur Tambahan (Bonus)​

REFERENSI

1.1 Apa Itu Data Logging?

🗒️ Analogi: Buku Harian Seorang Dokter

Sumber Data yang Dapat Di-log:

1.2 Tujuan Data Logging

1.3 Contoh Implementasi Nyata

1.4 Proses Data Logging

🚦 Analogi: Kamera CCTV di Jalan Raya

1.5 Media Penyimpanan Data

1.6 Library C# untuk Data Logging

1.7 Contoh Program

📝 Program 1: Data Logging Sederhana ke File TXT

🧩 Analogi: Kotak Surat

💻 Kode Program:

📁 Hasil file `log.txt` setelah 3 kali dijalankan:

🤖 Program 2: Data Logging Otomatis (Simulasi Sensor)

🧩 Analogi: Termometer Digital Otomatis

💻 Kode Program:

⚠️ Kenapa Harus Ada `Thread.Sleep()`?

📊 Program 3: Data Logging Format CSV

🧩 Analogi: Daftar Hadir di Lembar Excel

💻 Kode Program:

📁 Isi file `data.csv`:

1.8 Keuntungan Data Logging

1.9 Kesalahan Umum dan Cara Mengatasinya

1.10 Pengembangan Lanjutan

11.1 Pengenalan Komponen Chart

🧩 Analogi: Dasbor Mobil

Jenis Grafik yang Tersedia:

11.2 Konsep Series pada Chart

🧩 Analogi: Legenda Peta

11.3 Kustomisasi Tampilan Chart

11.4 Contoh Kode: Grafik Real-time dengan Timer

🧩 Analogi: Monitor Jantung di Rumah Sakit (EKG)

11.5 Integrasi Chart + Data Logging

12.1 Konsep Dasar Menggambar Garis

🧩 Analogi: Kertas Milimeter

12.2 Sistem Koordinat Layar

⚠️ Hati-hati: Koordinat Layar ≠ Koordinat Matematika!

🧩 Analogi: Membaca Buku vs Peta

12.3 Komponen untuk Menggambar

12.4 Pentingnya `Dispose()`

🧩 Analogi: Mencuci Piring Setelah Makan

12.5 Contoh Kode: Menggambar Garis Dasar

12.6 Contoh Kode: Membuat Grafik dari Data Array

🧩 Analogi: Menghubungkan Titik-titik di Buku Mewarnai

12.7 Perbandingan: Chart vs DrawLine

Latihan 1: Data Logging Dasar

🎯 Tujuan

📋 Instruksi

🗺️ Panduan Alur Program

📁 Contoh Output yang Diharapkan:

💡 Petunjuk Kode:

Latihan 2: Simulasi Sensor Otomatis

🎯 Tujuan

📋 Instruksi

🗺️ Panduan Alur Program

📊 Contoh Output yang Diharapkan:

💡 Petunjuk Kode:

Latihan 3: Grafik 2D dengan Komponen Chart

🎯 Tujuan

📋 Instruksi

🗺️ Panduan Setup di Visual Studio

💻 Template Kode Awal:

📊 Tampilan Grafik yang Diharapkan:

Latihan 4: Grafik Real-time Terintegrasi

🎯 Tujuan

📋 Instruksi

🗺️ Arsitektur Program

💻 Template Kode Awal:

🏆 Tugas Proyek Akhir: Mini Smart Factory Monitoring

📋 Deskripsi Proyek

✅ Kriteria Penilaian

💡 Ide Fitur Tambahan (Bonus)