Membuat berbagai macam chart menggunakan ~Toolkit.dll di C# - WPF

Sebelumnya kita telah membuat chart dari scratch {pie chart} seperti yang terdapat pada postingan ini. Nah di postingan ini akan dibuat chart kembali, tetapi dengan  menggunakan dll, yaitu System.Windows.Controls.DataVisualization.Toolkit.dll. Jadi silahkan download dulu dll tersebut lewat google atau kalau Hisoka sendiri, ngedownloadnya dari link ini. Di web tersebut donwload source code dari "DatavisualizationDemos.zip",

Nah setelah projectnya didownload, terus extract, terus kompile atw run projectnya {eeeh..klu g' dicompile sm di run juga gpp :D}, terus di project tersebut masuk ke folder toolkit, nah didalam folder toolkit ini tersimpan file dll-nya sesuai dengan versi net framework yang kita gunakan, silahkan dilihat-dilihat terus dipilih :D.

Ok setelah dll-nya ketemu, pertama-tama mari kita buat project baru di visual studio 2010.

Kemudian silahkan tempatkan toolkit.dll pada folder debug dalam project ini:

Terus tambahkan referensi, dengan klik kanan pada "Reference" pilih "Add Reference..." :

Pilih tab "Browse" dan arahkan ke lokasi dll tersebut berada :

Nah setelah menekan tombol "OK", maka referensi baru akan ditambahkan ke dalam project ini, seperti terlihat di bawah :

Naah..berarti kita telah dapat menggunakan dll tersebut untuk project yang kita gunakan saat ini.

Ok... Mari kita menata tampilan GUI-nya pertama kali. Masukkan tab control, dan atur konfigurasi tab control ini sebagai berikut :

Kemudian pada collection dibagian item, tambahkan 6 items yaitu, Bar Series, Line Series, Column Series, Area Series, Pie Series, & Scatter Series :

Untuk menambahkan tab-tab pada control, lebih jelasnya bisa dilihat disini, klu memang yang gambar diatas belum jelas. Nah sampai disini GUI yang telah dibuat seperti terlihat di bawah :

Terus pada file xml-nya, ganti "/>" pada tiap-tiap tab item menjadi </TabItem> :

Next, kita tambahkan element baru pada komponen xml main window yang mengacu ke file dll yang telah kita masukkan sebelumnya, element xml yang ditambahkan adalah :
xmlns:Poipo_DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit", seperti terlihat di bawah :

Komponen "Poipo_DVC" itulah yang akan kita gunakan untuk membuat chart pada project ini. Sebagai catatan, sebenarnya ada banyak jenis chart yang bisa dibuat dari dll tersebut, cuman yang baru dicobain baru 6 biji, jadi disini cuma dibuat 6 biji saja hehehe... :D, dan sebagai tambahan juga langkah-langkah untuk membuat masing-masing chart tersebut sama, cuma nama tiap chart aja yang dibedain. So, disini cuma diperlihatkan secara rinci satu cara saja untuk membuat chart, sedangkan chart-chart yang lainnya itu sama saja cuma namanya aja yang dibedain. Ok, mari kita buat chart yang pertama yaitu "bar series", pada TabItem bar series tambahkan :

Nah perhatikan, nama element untuk Poipo_DVC:Chart tersebut yaitu "barChartSeries" dengan fitur height dan width adalah auto. Sebenarnya masih ada beberapa fitur-fitur lain yang bisa kita tambahkan, seperti warna background, ukuran text, dsb yang bisa kita edit langsung dari propertiesnya, contoh :

Sow, silahkan edit-edit sendiri propertiesnya sesuai keinginan. Balik ke xml, tambahkan element berikut :

Terus dalam komponen Chart.Series diatas tambahkan :

Kemudian letakkan kursor pada komponen barChartSeries, kemudian pilih icon listrik(event) pada pada visual studio, cari "initialized", kemudian masukkan nama fungsi misalnya "barSeriesInitialized", ilustrasi :

Setelah memasukkan nama fungsi di bagian initialized, tekan enter, maka kita secara otomatis beralih ke file .xml.cs tepat didalam fungsi "barSeriesInitialized". Biar lebih aman, tambahkan "using System.Windows.Controls.DataVisualization.Charting; " , kemudian dalam fungsi tersebut tambahkan kode di bawah :

Perhatikan barChartSeries adalah nama dari chart yang telah kita buat sebelumnya pada file xml, kemudian ("Hisoka", 12 ) dkk.. adalah komponen yang akan ditampilkan pada bar chart ini. Hasilnya seperti terlihat di bawah :

Nah... Untuk chart-chart berikutnya, langkah-langkahnya persis sama. Ummm... sebenarnya ini cuma salah-satu cara saja yang digunakan, masih ada beberapa langkah atau kode lain yang bisa kita gunakan untuk memanfaatkan pembuatan chart dari file dll ini, cuman hisoka pake cara yang ini aja :D

Ok, , kemudian untuk line series, pada file xml tambahkan kode xml yang sama, cuman namanya aja yang dibedain, jenis chart dan  nama fungsi initializednya :

Terus dalam fungsi "lineSeriesInitialized", tambahkan kode yang sama juga, cuman namanya aja yang beda :

Hasilnya :

Beralih ke tab Column Series, kode xml-nya juga hampir sama seperti terlihat di bawah :

Kode untuk columnSeriesInitialized :

Hasilnya :

Terus beralih ke Area Series, kode xml :

Kode untuk fungsi areaSeriesInitialized :

Daan... Hasilnya :

Lanjut untuk pie chart series, kode xml :

Kode untuk fungsi pieSeriesInitialized :

Hasil yang diperoleh untuk pie chart :

Siip... Yang terakhir untuk project ini adalah Scatter series, kode xml-nya :

Kode untuk fungsi scatterSeriesInitialized :

Hasilnya :

Alhamdulillah.....Selesee... demikian pemaparan beberapa jenis chart yang terdapat pada file toolkit.dll ini, seperti yang disebutkan diawal tadi, masih ada banyak jenis chart yang lain. Jadi silahkan diexplore untuk jenis-jenis chart yang lain. :-)

Sekian... semoga bermanfaat.... :-)