Menggunakan Foxcharts untuk Menampilkan Grafik dengan Lebih Cantik

FoxChart adalah salah satu komponen yang dikembangkan oleh codeplex.com dan bisa digunakan secara gratis dengan mengikuti aturan yang telah ditetapkan. Dengan menggunakan FoxChart kita bisa menampilkan grafik dengan tampilan yang lebih cantik. Bila di posting Menampilkan Grafik di Form & Report dengan MS Graph kita butuh ActiveX kontrol untuk menampilkan grafik, tetapi dengan FoxChart kita tidak memerlukan ActiveX tetapi memanfaatkan fungsi GDI+ untuk menampilkan grafik. Sebelum mencoba Foxchart silahkan download dulu project yang berisi class dan sample formnya di link di bawah ini :


Untuk menggunakan dan menambahkan FoxChart, teman - teman bisa mengikuti contoh langkah - langkah berikut :

  1. Buat Project dan tambahkan Form yang akan digunakan untuk menampilkan FoxChart 
  2. Copykan file foxcharts.vcx, foxcharts.vct, gdiplusx.vcx, gdiplusx.vct, system.drawing.h (file - file tersebut dapat teman - teman temukan di folder Source di dalam project FoxChart yang telah teman - teman download) selain file tersebut copykan juga file foxchartsedit.vcx dan foxchartsedit.vct (yang berada di folder Samples) ke folder tempat teman - teman menyimpan project dan form yang sudah teman - teman buat tadi. Bila ingin menaruh file - file class tadi ke folder tersendiri harus mengatur set path to <folder> tempat teman - teman menyimpan file - file class tersebut.
  3. Tambahkan file class tadi ke dalam project
  4. Tambahkan class FoxCharts ke dalam form
  5. Ketikkan syntak ke bawah ini di dalam procedure init milik kontrol FoxCharts yang telah ditambahkan
  6. && Membuat cursor yang digunakan sebagai contoh sumber data yang akan ditampilkan
    && di Chart
    CREATE CURSOR PNJ(laptop n(8,2), pc n(8,2))
    INSERT INTO PNJ VALUES(10, 25)
    INSERT INTO PNJ VALUES(19, 15)
    LOCAL loChart
    loChart = This
    WITH loChart as FoxCharts of FoxCharts.Vcx
    && Mengatur jenis Chart (1-17) &&
    .ChartType = 2
    && Mengatur jumlah chart sesuaikan dengan jumlah field yang tersedia di cursor &&
    .ChartsCount = 2
    && Mengatur sumber data chart sesuaikan dengan nama cursor &&
    .SourceAlias = "PNJ"
    && Menentukan field yang akan ditampikan di Axis
    .FieldAxis2 = "laptop"
    && Mengatur chart pertama &&
    && Nama field pertama di cursor &&
    .Fields(1).FieldValue = "laptop"
    && Teks yang ditampilkan di legend pertama &&
    .Fields(1).Legend = "Laptop"
    && Warna dari chart pertama &&
    .Fields(1).Color = RGB(100,175,213)
    && Mengatur chart kedua &&
    && Nama field kedua di cursor &&
    .Fields(2).FieldValue = "pc"
    && Teks yang ditampilkan di legend kedua &&
    .Fields(2).Legend = "PC"
    && Warna dari chart kedua &&
    .Fields(2).Color = RGB(100,175,213)
    && Tampilan Title Chart &&
    .Title.Caption = "Laporan Penjualan" 
    && Tampilan SubTitle Chart &&
    .SubTitle.Caption = "PT Maju Mundur"
    && Huruf yang digunakan di Chart &&
    .FontName = "Tahoma"
    && Mengatur tampilan 3 Dimensi Chart &&
    .Depth = 2
    && Mengatur Warna Background Chart &&
    .BackColor = RGB(255,255,255)
    && Mengatur Tingkat Transparansi Background (1-255) &&
    .BackColorAlpha = 128
    && Mengatur Warna Chart secara Random &&
    .ColorType = 2
    && Mengatur Jenis Pewarnaan Chart secara Gradient &&
    .BrushType = 2
    && Mengatur Caption XAxis &&
    .XAxis.Caption = "X"
    && Mengatur Caption YAxis &&
    .YAxis.Caption = "Y"
    && Mengatur Tampilan Axis Legend &&
    .AxisLegend2.Alignment = 0
    .AxisLegend2.Rotation = 45
    .AxisLegend2.FontName = "Verdana"
    .AxisLegend2.FontSize = 6
    && Mengatur Agar Legend ditampilkan &&
    .ShowSideLegend = .T.
    && Menggambar Chart sesuai Setingan yang dilakukan &&
    .DrawChart()
    ENDWITH
  7. Jalankan form, untuk melihat Chart yang ingin ditampilkan. Bila ingin menambahkan kotak editing Chart, tambahkan Class FoxChartsEdit ke dalam form, sehingga teman - teman bisa menggunakannya untuk melakukan modifikasi Chart saat runtime tanpa harus menambahkan source code editing sendiri.
Langkah - langkah di atas adalah langkah - langkah dasar untuk mencoba penggunaan dari FoxCharts, Selanjutnya teman - teman bisa bereksplorasi dengan melihat sample - sample form yang sudah tersedia di project FoxChart yang sudah teman - teman download, untuk lebih detail mengetahui variasi dan pengembangan lebih lanjut dari pemakaian FoxCharts. Selain itu bila ingin mempelajari tutorial yang lebih detail bisa download filenya di Tutorial Versi Doc, Tutorial Versi CHM atau Tutorial Versi Video.



SEMOGA BERMANFAAT...!!

12 Response to "Menggunakan Foxcharts untuk Menampilkan Grafik dengan Lebih Cantik"

Kita Kita mengatakan...

Om cth FoxCharts v1.20 koq grafiknya g muncul ya... Mohon pencerahannya!

Andy Prasetyo Utomo mengatakan...

@kita : sistem operasi yg di pake apa bro???...apa sudah pake VFP 9 sp2 dan bukan yg portable???, dalam kondisi normal grafiknya pasti nampak...klo tidak nampak kemungkinan fungsi GDI+ di sistem operasi nya yg bermasalah.

Kita Kita mengatakan...

Pake WS7 pro, trus VFP 9 instalan bkn portable, klo fngsi GDI gmn ngatasinya Om..??

Andy Prasetyo Utomo mengatakan...

saya dah coba pake di win 7 dan gk ada masalah mas, kemungkinan ada yg gk beres di win7 yg mas pakai, mungkin klo ada pesan eror yang bisa ditunjukkan akan bisa membantu.

boyo mengatakan...

Mas andy, sy jg pernah coba di W7 kok gak jalan jg yahh? ada pesan erorr tp lupa. Hasil googling sih katanya install VFPSP2RT.exe di W7 nya. Tapi blm coba lagi sih :) Pa betul Mas?

Andy Prasetyo Utomo mengatakan...

@belum pernah coba juga mas utk install VFPSP2RT.exe coz selama ini coba dengan win 7 yg ada di laptop gk ada masalah, mungkin setting UAC milik win 7 juga berpengaruh. Maklum belum tau detail juga tentang win 7 jd blm bisa ekplorasi lebih lanjut..:D

@kita :mungkin bisa coba masukan mas boy juga untuk instal VFPSP2RT.exe.

Thony.R mengatakan...

Mas mohon pencerahannya, saya udah coba, tapi selalu muncul pesan error "Property Value is Out Of Bounds" saat menambahkan container foxchart ke form... apa kira-kira masalahnya... thanks..

MyBlog mengatakan...

Mas Andy, Saya sudah melakukan langkah-langkah yang mas Andy berikan seperti contoh diatas, tapi setelah saya jalankan formnya, muncul error "Unknown member SYSTEM."
Apa yang salah dalam form saya??
Atau apa yang kurang dari perintah saya???

trims.

jlw ansori mengatakan...

Mantaabb donk thank's Infonya
Ok sdh aq coba lancar Semua and jalan sesuai infonya

arie mengatakan...
Komentar ini telah dihapus oleh pengarang.
arie mengatakan...

MAS andy....
sebelumnya terimakasih atas pencerahnya.
saya sudah coba melakukan langkah2 yg mas andy berikan dan berhasil.

namu ketika saya ganti sricp ini
CREATE CURSOR PNJ(laptop n(8,2), pc n(8,2))
INSERT INTO PNJ VALUES(10, 25)
INSERT INTO PNJ VALUES(19, 15)

dengan :
SELECT tanggal,SUM(netto) netto FROM tbl_tb GROUP BY tanggal INTO CURSOR pnj
LOCAL loChart
loChart = This
WITH loChart as FoxCharts of FoxCharts.Vcx
&& Mengatur jenis Chart (1-17) &&
.ChartType = 3
&& Mengatur jumlah chart sesuaikan dengan jumlah field yang tersedia di cursor &&
.ChartsCount = 2
&& Mengatur sumber data chart sesuaikan dengan nama cursor &&
.SourceAlias = "PNJ"
&& Menentukan field yang akan ditampikan di Axis
.FieldAxis2 = "Tanggal"
&& Mengatur chart pertama &&
&& Nama field pertama di cursor &&
.Fields(1).FieldValue = "tanggal"
&& Teks yang ditampilkan di legend pertama &&
.Fields(1).Legend = "Tanggal"
&& Warna dari chart pertama &&
.Fields(1).Color = RGB(100,175,213)
&& Mengatur chart kedua &&
&& Nama field kedua di cursor &&
.Fields(2).FieldValue = "netto"
&& Teks yang ditampilkan di legend kedua &&
.Fields(2).Legend = "Ku Tebu"
&& Warna dari chart kedua &&
.Fields(2).Color = RGB(100,175,213)
&& Tampilan Title Chart &&
.Title.Caption = "Laporan Pemasukan Tebu "
&& Tampilan SubTitle Chart &&
.SubTitle.Caption = "PT Rajawali II"
&& Huruf yang digunakan di Chart &&
.FontName = "Tahoma"
&& Mengatur tampilan 3 Dimensi Chart &&
.Depth = 2
&& Mengatur Warna Background Chart &&
.BackColor = RGB(255,255,255)
&& Mengatur Tingkat Transparansi Background (1-255) &&
.BackColorAlpha = 128
&& Mengatur Warna Chart secara Random &&
.ColorType = 2
&& Mengatur Jenis Pewarnaan Chart secara Gradient &&
.BrushType = 2
&& Mengatur Caption XAxis &&
.XAxis.Caption = "Tangal"
&& Mengatur Caption YAxis &&
.YAxis.Caption = "Netto"
&& Mengatur Tampilan Axis Legend &&
.AxisLegend2.Alignment = 0
.AxisLegend2.Rotation = 45
.AxisLegend2.FontName = "Verdana"
.AxisLegend2.FontSize = 6
&& Mengatur Agar Legend ditampilkan &&
.ShowSideLegend = .T.
&& Menggambar Chart sesuai Setingan yang dilakukan &&
.DrawChart()
ENDWITH

ketika di jalankan muncul error
unhandle structured exeption
ErrorNo : 2071
Message : User Thrown Error
UserValue : (Object)


nah itu apanya ya mas Andy, terimakasih sebelumnya.

ISO DINKES DIY mengatakan...

Saya kok gak bisa ya mindahin class foxcharts ke form. Selalu muncul property values is out of bounds.

Poskan Komentar

Bila komentar tidak tampil, silahkan ke page Welcome dan beritahukan melalui email yang tertera disana, kemungkinan komentar anda dianggap sebagai spam, biar nanti admin yang akan merubahnya, Terima kasih.

Related Posts Plugin for WordPress, Blogger...