Membuat Grafik Dinamis dengan VB6 dan MS Access


Salam programming,

Walaupun masih dalam suasana UAS di kampus tercinta, namun rasa-rasanya yang namanya menulis ini mutlak tidak bisa ditinggalkan. Seolah-olah ada daya magnetisme yang sangat kuat di dalam sanubari saya untuk selalu berbagi apa saja yang sudah saya pelajari sebelumnya. Apa itukah yang namanya obsesi seorang penulis ya…

Namun, terlepas dari apapun alasannya I love to share something new, that’s it. Dan pada kesempatan kali ini saya akan menjelaskan suatu cara yang dapat digunakan untuk menampilkan data dalam bentuk grafik. Yach, sesuai dengan judul posting kali ini kita akan belajar bagaimana membuat suatu grafik dengan VB6 dan MS Access sebagai data storagenya. Sebelumnya, saya sering menemukan artikel pemrograman di internet yang membahas tentang cara membuat grafik baik itu dengan menggunakan data statis maupun data dinamis tapi saya rasa artikel saya kali ini akan sangat berbeda. Untuk itu tetaplah mengikuti tutorial ini sampai akhir ya…

Program kali ini adalah menampilkan data suhu atau temperature suatu kota dengan menggunakan tool MSCHART-nya Microsoft VB6 dimana setiap kali ada penambahan data kota beserta dengan suhu-suhunya maka grafik secara otomatis juga akan berubah sesuai dengan data yang baru masuk ke database.

1. Langkah 1: Membuat Database dan tabelnya.

Saya menggunakan MS Access sebagai tempat penyimpanan datanya karena memang tujuannya hanyalah untuk proses pelatihan saja meski Anda juga dapat menggunakan tool RDBMS yang lainnya. Struktur tabelnya kira-kira sebagai berikut ini:

tbl

2. Langkah 2: Membuat rutin untuk koneksi ke database.

Buat sebuah module, lalu isi dengan kode di bawah ini. Mungkin cara ini sudah sangat terlalu umum dan sering digunakan untuk menghubungkan aplikasi VB6 dengan MS Access:

Public CONN As ADODB.Connection
Public RS As ADODB.Recordset
Public SQL As String

' koneksi ke database
Public Sub CONNECT()
    Set CONN = New ADODB.Connection
    Set RS = New ADODB.Recordset
    CONN.Open "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" & App.Path & "\Grafik.accdb;Persist Security Info=False;"
End Sub

3. Langkah 3: Membuat beberapa fungsi pembantu program

Saya tidak akan menjelaskan fungsi-fungsi apa saja, tetapi kira-kira berikut inilah adanya. Rutin ini juga diletakkan di dalam module koneksi di atas tepat di bawahnya saja.

' mengambil data grafik
Public Sub CITY_CHART(ByVal chart As MSChart)
    ' atur koneksi ke database
    Call CONNECT
    
    ' lakukan query ke tabel untuk mengambil data kota beserta nilai suhu-suhunya
    SQL = "SELECT * FROM tbl_suhu_suatu_kota"
    RS.Open SQL, CONN, adOpenDynamic, adLockOptimistic
    
    ' agar dapat menampilkan seluruh data
    RS.MoveNext
    
    ' masukkan data ke grafik
    Set chart.DataSource = RS
    
    ' pengaturan grafik
    chart.AllowSelections = False
    chart.DoSetCursor = True
    chart.MousePointer = VtMousePointerArrowQuestion
    chart.chartType = VtChChartType2dBar
    
    ' menampilkan legend
    chart.ShowLegend = True
    
    ' mengatur teks legend
    With chart.Plot.SeriesCollection(1)
        .LegendText = "Suhu Maksimum - (C)"
    End With
    With chart.Plot.SeriesCollection(2)
        .LegendText = "Suhu Minimum - (C)"
    End With
    With chart.Legend
        .Location.LocationType = VtChLocationTypeTop
        .TextLayout.HorzAlignment = VtHorizontalAlignmentCenter
        .VtFont.VtColor.Set 255, 0, 0
        .Backdrop.Fill.Style = VtFillStyleBrush
        .Backdrop.Fill.Brush.Style = VtBrushStyleSolid
        .Backdrop.Fill.Brush.FillColor.Set 219, 230, 255
    End With
    
    ' mengatur judul grafik
    chart.Title = "Perbandingan Suhu Kota di Indonesia"
    With chart.Title.VtFont
        .Name = "Calibri"
        .Size = 20
        .Effect = VtFontEffectUnderline
    End With
    
    ' mengatur title untuk sumbu x dan y
    With chart.Plot.Axis(1, 1)
        .AxisTitle.VtFont.Size = 9
        .AxisTitle.VtFont.Name = "Calibri"
        .AxisTitle.VtFont.Effect = Bold
        .AxisTitle.Visible = True
        .AxisTitle.Text = "Suhu dalam derajat Celcius"
    End With
    
    With chart.Plot.Axis(0, 1)
        .AxisTitle.VtFont.Size = 9
        .AxisTitle.VtFont.Name = "Calibri"
        .AxisTitle.VtFont.Effect = Bold
        .AxisTitle.Visible = True
        .AxisTitle.Text = "Nama Kota"
    End With
    
    ' mengatur footnote grafik
    chart.Footnote = "Sumber Data: Badan Metereologi Cuaca Batam - 2014"
    
    ' mengatur warna grafik
    With chart.Plot.SeriesCollection(1)
        .DataPoints(-1).Brush.FillColor.Set 45, 44, 78
    End With
    
    ' mengatur warna background grafik
    With chart.Backdrop.Fill
        .Style = VtFillStyleBrush
        .Brush.FillColor.Set 255, 255, 255
    End With
    
End Sub

4. Langkah 4: Membuat form utama

Langkah ini merupakan langkah terakhir dimana setelah selesai mendesign tampilan form lalu kita masukkan kode programmnya sebagai berikut dimana semuanya diletakkan di form utama:

' rutin ini akan membersihkan seluruh fields
Public Sub CLEAR()
    Text1.Text = ""
    Text2.Text = ""
    Text3.Text = ""
End Sub

' rutin ini akan mengaktifkan seluruh fields
Public Sub ENABLE()
    Text1.Enabled = True
    Text2.Enabled = True
    Text3.Enabled = True
End Sub

' rutin ini akan menonaktifkan seluruh fields
Public Sub DISABLE()
    Text1.Enabled = False
    Text2.Enabled = False
    Text3.Enabled = False
End Sub

' rutin ini yang akan dijalankan pertama kali setelah form diload
Public Sub STATE()
    CLEAR
    DISABLE
    Command1.Caption = "&Tambah Data Kota"
    Command2.Caption = "&Tutup Aplikasi"
End Sub

Private Sub Check1_Click()
    If Check1.Value = 1 Then
        MSChart1.ShowLegend = True
        Check1.Caption = "Sembunyikan Legend Grafik"
    Else
        MSChart1.ShowLegend = False
        Check1.Caption = "Tampilkan Legend Grafik"
    End If
End Sub

Private Sub Combo1_Click()
    MSChart1.chartType = Combo1.ListIndex
End Sub

Private Sub Command1_Click()
    If Command1.Caption = "&Tambah Data Kota" Then
        Command1.Caption = "&Simpan Data Kota"
        Command2.Caption = "&Batalkan Aksi"
        ENABLE
        CLEAR
        Text1.SetFocus
    Else
        If Text1 = "" Or Text2 = "" Or Text3 = "" Then
            MsgBox "Harap mengisi informasi yang dibutuhkan", vbCritical, "Pemberitahuan !"
        Else
            Call CONNECT
            SQL = "INSERT INTO tbl_suhu_suatu_kota VALUES('" & Text1 & "','" & Text2 & "','" & Text3 & "')"
            CONN.Execute SQL
            MsgBox "Data kota baru beserta nilai suhunya berhasil disimpan", vbInformation, "Pemberitahuan !"
            
            ' panggil rutin CITY_CHART
            Call CITY_CHART(MSChart1)
            
            ' atur ulang form
            CLEAR
            STATE
        End If
    End If
End Sub

Private Sub Command2_Click()
    Select Case Command2.Caption
        Case "&Batalkan Aksi"
            Command1.Caption = "&Tambah Data Kota"
            Command2.Caption = "&Tutup Aplikasi"
            CLEAR
            STATE
        Case "&Tutup Aplikasi"
            MsgBox "Terimakasih telah menggunakan program ini. Semoga hari Anda menyenangkan.", vbInformation, "Pemberitahuan !"
            Unload Me
    End Select
End Sub

Private Sub Form_Load()
    ' konfigurasi awal form ketika diload
    STATE

    ' atur posisi form
    Me.Left = (Screen.Width - Me.Width) / 2
    Me.Top = (Screen.Height - Me.Height) / 2
    
    ' mengisi jenis grafik
    With Combo1
        .AddItem "3D Bar"
        .AddItem "2D Bar"
        .AddItem "3D Line"
        .AddItem "2D Line"
        .AddItem "3D Area"
        .AddItem "2D Area"
        .AddItem "3D Step"
        .AddItem "2D Step"
        .AddItem "3D Combination"
        .AddItem "2D Combination"
        .ListIndex = 1 'default:2D Bar
    End With
    
    ' panggil rutin CITY_CHART
    Call CITY_CHART(MSChart1)
    
End Sub

Private Sub MSChart1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
    Dim Partie As Integer, Index1 As Integer, Index2 As Integer, Index3 As Integer, Index4 As Integer
    MSChart1.ToolTipText = ""
    MSChart1.SelectPart 4, 0, 0, 0, 0
    MSChart1.TwipsToChartPart X, Y, Partie, Index1, Index2, Index3, Index4
    For i = 1 To 4
        If Partie = 5 And Index1 = i Then
            MSChart1.SelectPart 7, i, 0, 0, 0
            MSChart1.TwipsToChartPart X, Y, Partie, Index1, Index2, Index3, Index4
            If Index1 <> 0 And Index2 <> 0 Then
                MSChart1.Column = Index1
                MSChart1.Row = Index2
                MSChart1.ToolTipText = MSChart1.Data & " C°"
            End If
        End If
    Next i
End Sub

Private Sub Text1_KeyPress(KeyAscii As Integer)
    KeyAscii = Asc(UCase(Chr(KeyAscii)))
    If KeyAscii = 13 Then Text2.SetFocus
End Sub

Private Sub Text2_KeyPress(KeyAscii As Integer)
    KeyAscii = Asc(UCase(Chr(KeyAscii)))
    If KeyAscii = 13 Then Text3.SetFocus
End Sub

Private Sub Text3_KeyPress(KeyAscii As Integer)
    KeyAscii = Asc(UCase(Chr(KeyAscii)))
    If KeyAscii = 13 Then Command1.SetFocus
End Sub

Dan, berikut ini adalah kira-kira bentuk tampilan programnya:

grafik-suhu-kota-1

grafik-suhu-kota-2

grafik-suhu-kota-3

Untuk mendownload file latihan di atas, silahkan klik link berikut ini:

Download File Latihan: Membuat Grafik Dinamis dengan VB6 dan MS Access

Okay guys, kira-kira begitulah cara sederhana untuk meng-generate sebuah chart dari database dengan menggunakan VB6 dan Access. Silahkan dikembangkan agar menjadi lebih kompleks lagi.

6 thoughts on “Membuat Grafik Dinamis dengan VB6 dan MS Access

    1. Public Sub STUDENT_CHART(ByVal chart As MSChart)

      Call Connect
      SQL = “SELECT * FROM student”
      RS.Open SQL, Conn, adOpenDynamic, adLockOptimistic
      RS.MoveNext
      Set chart.DataSource = RS

      chart.AllowSelections = False
      chart.DoSetCursor = True
      chart.MousePointer = VtMousePointerArrowQuestion
      chart.chartType = VtChChartType2dBar
      chart.ShowLegend = True

      With chart.Plot.SeriesCollection(1)
      .LegendText = “Male”
      End With
      With chart.Plot.SeriesCollection(2)
      .LegendText = “Female”
      End With

      nah masalahnya data tidak tampil pada grafik, tp klo databasenya Ms Access kok bisa.
      mohon pencerahannya
      terima kasih.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s