- Back to Home »
- Cara membuat Chart/Grafik dengan Code Igniter
Posted by : Fariz
Jumat, 12 Oktober 2018
Hello teman2
Pada kesempatan kali ini saya ingin sharing tentang membuat chart atau grafik menggunakan framework codeigniter. Grafik atau chart merupakan penyajian informasi dengan cara yang sangat menarik dan mudah dipahami dari pada melihat report (laporan) yang memiliki teks yang kompleks dan terkadang membosankan.
Untuk membuat chart atau grafik menggunakan codeigniter, kita memerlukan semacam library atau plugin. Disini saya menggunakan chart.js
Cara download library nya temen2 tinggal klik chart.js yang ada di atas lalu Ctrl + S lalu arahkan ke folder project temen2 yang ada di htdocs masukan k folder assets
Contoh :
Chart.js merupakan library javascript yang sangat banyak digunakan oleh developer web dalam mebuat grafik atau chart. Chart.js sangat mudah digunakan dan mudah di cutomize.
Sekarang saya akan membuat Chart untuk memantau stok barang berdasarkan merk atau brand.
Sebelum masuk ke pembuatan ada beberapa Hal yang harus disiapkan : Xampp, Framework CodeIgniter, Sublime Text/Atom dll (TextEditor)
Sekarang kita masuk ke Proses coding !
1. Buat Database dan Tabel baru dan isi tabel seperti gambar dibawah :
2. Jangan Lupa Set Config/Database.php
3. Buat Folder assets didalam Folder Project lalu pindahkan Library chart.js yang temen2 udah download tadi
4. Buat Model dengan nama M_grafik.php dengan kode sebagai berikut :
5. Buat Controller dengan nama Grafik.php dengan kode sebagai berikut :
5. Buat Controller dengan nama Grafik.php dengan kode sebagai berikut :
6. Buat View dengan nama v_grafik.php dengan kode sebagai berikut :
7. Lalu buka Link berikut untuk mengecek Chart yang sudah kita buat
http://localhost/ukk2/index.php/grafik
note: ukk2 adalah nama project Code igniter temen2 yaa
Hasilnya seperti gambar dibawah :
Ouhh iyaa untuk mengubah Chart/Grafik menjadi grafik batang tinggal temen ganti kode berikut yang ada di Views/v_grafik.php . Kode dan Hasil di web :
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);
Sekian tutorial kali ini, Mohon Maaf jika ada kekurangan .
Wasalamualaikum !
Jika temen2 ingin mendownload Source kode didalamnya sudah ada Tabel beserta querynya temen2 tinggal import saja kedatabase :
insya allah ya
BalasHapuskalo webnya jadi putih ngeblank gitu apanya bang
BalasHapusitu error
HapusA PHP Error was encountered
BalasHapusSeverity: Notice
Message: Undefined variable: data
Filename: views/home.php
Line Number: 9
itu kenapa ya?
terimakasih banyak sudah berbagi ilmu, semoga menjadi pahala dan makin berkah ilmunya
BalasHapus