Show Table of Contents
Table of Contents
Membuat Grafik Dengan Chart.js – Grafik merupakan sebuah unsur atau fitur yang paling menambah nilai jual sebuah aplikasi. dengan adanya fitur yang menampilkan data dalam bentuk grafik sangat membantu pengguna dalam membaca jumlah persentase sebuah kumpulan data. Banyak keuntungan dalam menggunakan grafik. termasuk dapat membuat aplikasi yang kita buat menjadi lebih terlihat profesional. karena data yang awalnya hanya berupa angka bisa terlihat lebih visual. apalagi dengan adanya animasi dan efek yang keren yang membuat tampilan grafik lebih terlihat menarik. Namun yang pasti menjadi pertanyaan bagi teman-teman adalah, sulitkah membuat grafik ? Jawabannya tidak, karena sekarang sudah ada banyak plugin javascript yang dapat membantu kita dalam membuat sebuah grafik, apalagi masing-masing plugin grafik mempunyai kelebihan dan kekurangannya masing-masing. Cara membuat grafik pada aplikasi atau website sangatlah mudah. teman-teman berada pada artikel yang tepat. karena pada tutorial malasngoding.com kali ini kita akan belajar cara membuat grafik dengan chart.js. Membuat Grafik Dengan Chart.jsTeman-teman yang baru mendengar chart.js pasti bingung apa sih chart.js itu. silahkan teman-teman simak penjelasan berikut tentang pengertian chart.js dan bagaimana cara membuat grafik dengan chart.js dengan mudah dan gratis tentunya. Chart.js adalah salah satu plugin javascript yang dibuat untuk memudahkan atau membantu kita dalam membuat grafik dengan sangat mudah dan cepat. ada banyak sekali pilihan jenis grafik yang bisa kita buat dengan chart.js. diantaranya adalah grafik bar, line, pie dan banyak deh pokoknya. Teman-teman bisa langsung melihat demo dari jenis-jenis atau model grafik yang bisa kita buat dengan chart.js di website si chart.js ini yaitu di : http://www.chartjs.org/samples/latest/. membuat grafik dengan chartjs Oke langsung saja ya kita mulai tentang cara membuat grafik dengan chart.js Cara Membuat Grafik Dengan Chart.jsPada tutorial ini kita akan membuat beberapa jenis contoh grafik dengan menggunakan chart.js. Langsung saja teman-teman download dulu chart.js nya di https://github.com/chartjs/Chart.js/releases/tag/v2.7.2. pada saat tutorial ini dibuat, chartjs sudah sampai pada versi terbarunya yaitu versi v2.7.2. Saya mendownload yang chart.js nya saja. karena saya rasa kita belum membutuhkan package yang lainnya dulu. cara membuat grafik dengan chartjs Setelah di download, extrak dan rename nama foldernya menjadi chartjs. untuk apa kita rename? supaya lebih mudah kita hubungkan pada project kita. jadi gak perlu menulis sampai versi-versinya seperti v2.7.2 dan bla-bla . 😀 oh ya karena pada contohnya ini saya hanya menggunakan HTML saja dan tidak menggunakan PHP. silahkan teman-teman sesuaikan dengan kebutuhan masing-masing ja. karena saya hanya menggunakan HTML, maka project nya saya buat di desktop saja. projectnya saya buat dalam folder “grafik”. nanti teman-teman bisa mendownloadnya, link downloadnya sudah saya sertakan di bawah tutorial ini. cara install chartjs pada html atau php Selanjutnya buat sebuah file baru dengan nama index.html dalam folder grafik. Pada file index.html ini saya akan membuat sebuah contoh grafik menggunakan chart.js. index.html
Akan saya jelaskan dulu sedikit tentang syntax membuat grafik di atas. Pertama kita hubungkan dulu dengan file Chart.js yang sudah kita download tadi.
Selanjutnya kita buat sebuah element <canvas> .. </canvas> dan kita beri id dengan terserah kita. di sini saya memberi nama id nya dengan “myChart”.
kemudian terakhir pada bagian deklarasi chart.js nya kita perintahkan untuk membuat grafik “2d” pada id “myChart”.
dengan detail sebagai berikut.
kita menetapkan jenis type grafik yang akan kita buat adalah jenis grafik “bar”. dan untuk data grafik nya dan pengaturan warna yang teman-teman inginkan bisa di atur juga pada datasets berikut.
Penasaran dengan hasilnya? mari kita jalankan file index.html yang sudah kita buat di atas. membuat grafik dengan mudah pada html atau php Hasilnya keren kan. See the Pen Membuat grafik dengan menggunakan chart.js by Malas Ngoding (@malasngoding) on CodePen.0 seperti yang sudah saya jelaskan di atas tadi, ada banyak jenis grafik yang bisa kita buat dengan chart.js. selengkapnya bisa teman-teman lihat demo jenis grafiknya di http://www.chartjs.org/samples/latest/. dan dokumentasi lengkapnya di http://www.chartjs.org/docs/latest/. Nah, sampai di sini teman-teman telah bisa membuat grafik dengan menggunakan chart.js. selanjutnya akan kita bahas cara menampilkan data dari database dalam bentuk grafik seperti grafik di atas. tapi datanya bukan kita set secara manual seperti atas. tapi datanya akan kita ambil berdasarkan data pada database. Oke sekian dulu, terima kasih telah membaca tutorial Membuat Grafik Dengan Chart.js dari malasngoding.com. semoga bermanfaat. DEMO DOWNLOAD SOURCE CODE Incoming search terms:
Tags: cara install chart js, cara install chartjs, cara membuat chart, cara membuat grafik, cara membuat grafik batang di html, cara membuat grafik dengan bootstrap, cara menggunakan chart js, chart bundle js download, chart js codeigniter, chart js example, chart js vertical bar, chart.js data from database, download chart.js, membuat grafik chart menggunakan php + highchart, membuat grafik dari database menggunakan php, membuat grafik di codeigniter dari database, membuat
grafik dinamis di php dengan mysql, pie chart js TUTORIAL MENARIK LAINNYAMembuat Format Rupiah Dengan Javascript18 September 2018Membuat Format Rupiah Dengan Javascript Membuat Format Rupiah Dengan Javascript, Seperti yang kita sudah ketahui, javascript memiliki kegunaan yang besar dalam pengembangan sebuah website atau aplikasi. ... Membuat Form Validasi dengan Javascript4 May 2017Membuat Form Validasi dengan Javascript – Sebelumnya di www.malasngoding.com, saya sudah membuat tutorial cara membuat form validasi dengan PHP. dan juga sudah membuat form validasi ... |
Cara menggunakan CHARTS. pada JavaScript
Pos Terkait
Copyright © 2024 toptenid.com Inc.
