Mungkin
Chart atau Grafik reader sekalian sudah banyak yg mengetahui, terutama di Ms. Excel. Selain berguna untuk menampilkan laporan secara grafik juga berfungsi untuk mempermudah memantau laporan dengan lebih cepat dan efisien.

Dalam kesempatan ini saya hendak berbagi cara membuat Chart di VB .Net. Secara sistem dan cara kerja Chart pada VB .Net tidak berbeda dengan Chart pada Ms. Excel yakni sama2 harus menyediakan data yg akan ditampilkan menggunakan datasource atau table

Untuk lebih lengkapnya silahkan perhatikan artikel dibawah ini:

1) Pertama, tambahkan Chart ke dalam Form melalui Toolbox disamping. Berhubung kita juga akan membuat tombol save, maka tambahkan juga Button dan FolderBrowseDialog.


Sesuaikan name dari object yg sudah ditambahkan sesuai gambar di atas. FolderBrowseDialog berfungsi untuk

2) Kedua, tambahkan koding untuk menampilkan Chart
    Sub isi_chart()
        'deklarasi variable
        Dim arrayPrd() As String = {"01", "02", "03", "04"}
        Dim arrayKet() As String = {"SI", "SK", "MI", "TK"}
        Dim arraySeminar() As String = {"Seminar Proposal", "Seminar Hasil", "Sidang"}

        With Chart1
            'untuk membuat chart fill sesuai size form
            .Dock = DockStyle.Fill

            'deklarasi dan menambah Chartarea
            Dim ca As ChartArea = New ChartArea()
            ca.Name = "ChartArea1"
            ca.BackColor = Color.White
            ca.BorderColor = Color.FromArgb(26, 59, 105)
            ca.BorderWidth = 0
            ca.BorderDashStyle = ChartDashStyle.Solid
            ca.AxisX = New Axis()
            ca.AxisY = New Axis()
            .ChartAreas.Add(ca)

            'membuat judul chart
            .Titles.Add("BAGI INFO - Membuat Chart VB .Net")

            'menambahkan dan memunculkan keterangan kelompok
            .Legends.Add("Legends1")

            'membersihkan dan menambah kembali series (kelompok)
            .Series.Clear()
            For i As Integer = 0 To arraySeminar.Length - 1
                .Series.Add(arraySeminar(i))
            Next

            'mereset Chartarea
            .ChartAreas(0).AxisX.Interval = 1
            .ChartAreas(0).AxisX.IsStartedFromZero = True

            'menghilangkan gridline
            .ChartAreas(0).AxisX.MajorGrid.LineWidth = 0
            .ChartAreas(0).AxisY.MajorGrid.LineWidth = 0

            'mengedit dan memformat tampilan series (kelompok)
            For Each seri As Series In .Series
                seri.ChartType = SeriesChartType.Column
                seri.XValueType = ChartValueType.String
                seri.YValueType = ChartValueType.Double
                seri.IsValueShownAsLabel = True
                seri.BorderDashStyle = ChartDashStyle.Solid
                seri.BorderWidth = 0
                seri.ShadowColor = Color.FromArgb(128, 128, 128)
                seri.ShadowOffset = 1
            Next

            'menampilkan data ke series (kelompok)
            For i As Integer = 0 To arraySeminar.Length - 1
                For y As Integer = 0 To arrayKet.Length - 1
                    .Series(i).Points.AddXY(arrayKet(y), 20 * (i + y))  '.Series(i).Points.AddXY([kelompok],[value yg ingin ditampilkan])
                Next y
            Next
        End With
    End Sub
Copykan koding di atas ke dalam Form Code, selanjutnya akan dipanggil pada Form_load

    Private Sub FrmChart_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Call isi_chart()
    End Sub

3) Ketiga,
tambahkan koding untuk tombol save. Ini untuk menyimpan Chart menjadi Image dan disimpan ke folder yg kita inginkan
    Private Sub btnsave_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnsave.Click
        On Error GoTo handler
        If FolderBrowserDialog1.ShowDialog = Windows.Forms.DialogResult.OK Then
            Chart1.SaveImage(FolderBrowserDialog1.SelectedPath & "\Chart_" & Format(Date.Now, "ddMMyyyyHHmmss") & ".Png", ChartImageFormat.Png)
            MsgBox("Export selesai." & vbCrLf & "File ada di : " & FolderBrowserDialog1.SelectedPath & "\Chart_" & Format(Date.Now, "ddMMyyyyHHmmss") & ".Png", MsgBoxStyle.Information + MsgBoxStyle.OkOnly, "Save")
        End If
        Exit Sub
handler:
        MsgBox("Terjadi kesalahan saat proses export.", MsgBoxStyle.Critical + MsgBoxStyle.OkOnly, "Save")
    End Sub

Untuk koding full nya dapat copy paste kan koding di bawah ini ke Form Code
Imports System.Windows.Forms.DataVisualization.Charting

Public Class FrmChart
    Sub isi_chart()
        'deklarasi variable
        Dim arrayPrd() As String = {"01", "02", "03", "04"}
        Dim arrayKet() As String = {"SI", "SK", "MI", "TK"}
        Dim arraySeminar() As String = {"Seminar Proposal", "Seminar Hasil", "Sidang"}

        With Chart1
            'untuk membuat chart fill sesuai size form
            .Dock = DockStyle.Fill

            'deklarasi dan menambah Chartarea
            Dim ca As ChartArea = New ChartArea()
            ca.Name = "ChartArea1"
            ca.BackColor = Color.White
            ca.BorderColor = Color.FromArgb(26, 59, 105)
            ca.BorderWidth = 0
            ca.BorderDashStyle = ChartDashStyle.Solid
            ca.AxisX = New Axis()
            ca.AxisY = New Axis()
            .ChartAreas.Add(ca)

            'membuat judul chart
            .Titles.Add("BAGI INFO - Membuat Chart VB .Net")

            'menambahkan dan memunculkan keterangan kelompok
            .Legends.Add("Legends1")

            'membersihkan dan menambah kembali series (kelompok)
            .Series.Clear()
            For i As Integer = 0 To arraySeminar.Length - 1
                .Series.Add(arraySeminar(i))
            Next

            'mereset Chartarea
            .ChartAreas(0).AxisX.Interval = 1
            .ChartAreas(0).AxisX.IsStartedFromZero = True

            'menghilangkan gridline
            .ChartAreas(0).AxisX.MajorGrid.LineWidth = 0
            .ChartAreas(0).AxisY.MajorGrid.LineWidth = 0

            'mengedit dan memformat tampilan series (kelompok)
            For Each seri As Series In .Series
                seri.ChartType = SeriesChartType.Column
                seri.XValueType = ChartValueType.String
                seri.YValueType = ChartValueType.Double
                seri.IsValueShownAsLabel = True
                seri.BorderDashStyle = ChartDashStyle.Solid
                seri.BorderWidth = 0
                seri.ShadowColor = Color.FromArgb(128, 128, 128)
                seri.ShadowOffset = 1
            Next

            'menampilkan data ke series (kelompok)
            For i As Integer = 0 To arraySeminar.Length - 1
                For y As Integer = 0 To arrayKet.Length - 1
                    .Series(i).Points.AddXY(arrayKet(y), 20 * (i + y))  '.Series(i).Points.AddXY([kelompok],[value yg ingin ditampilkan])
                Next y
            Next

        End With
    End Sub

    Private Sub FrmChart_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Call declare_con()

        Call isi_chart()
    End Sub

    Private Sub btnsave_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnsave.Click
        On Error GoTo handler
        If FolderBrowserDialog1.ShowDialog = Windows.Forms.DialogResult.OK Then
            Chart1.SaveImage(FolderBrowserDialog1.SelectedPath & "\Chart_" & Format(Date.Now, "ddMMyyyyHHmmss") & ".Png", ChartImageFormat.Png)
            MsgBox("Export selesai." & vbCrLf & "File ada di : " & FolderBrowserDialog1.SelectedPath & "\Chart_" & Format(Date.Now, "ddMMyyyyHHmmss") & ".Png", MsgBoxStyle.Information + MsgBoxStyle.OkOnly, "Save")
        End If
        Exit Sub
handler:
        MsgBox("Terjadi kesalahan saat proses export.", MsgBoxStyle.Critical + MsgBoxStyle.OkOnly, "Save")
    End Sub
End Class


Jika tidak terjadi kesalahan dalam proses copy paste, harusnya Chart sudah dapat berjalan dengan baik seperti gambar di atas. Silahkan dipahami, diganti-ganti sesuai dengan kasus yg reader semua alami.

Semoga bermanfaat buat reader sekalian.

Post a Comment

let me see your comments . . .

Previous Post Next Post