Menggunakan Foxcharts untuk Menampilkan Grafik dengan Lebih Cantik

Tuesday, May 3, 2011

Menggunakan Foxcharts untuk Menampilkan Grafik dengan Lebih Cantik

    No comments
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
  6. 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...!!

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )