Tutorial Menciptakan Line Chart Atau Diagram
Tutorial Membuat Line chart atau Diagram
Halo sobat koding ID, kali ini kita akan menciptakan Line chart atau Diagram pada website. apa itu line chart atau diagram? yaps ini ialah sebuah denah yang memudahkan kita untuk melihat data.
tanpa basa kedaluwarsa pribadi saja kita buat ^_^.
Disini kita memakai Chart.js, beberapa kelebihan nya :
Baca Juga
- Line
- Bar
- Radar
- Area
- Mixed
Sebelum memulai buatlah dulu file HTML nya kemudian pada Text editor favorit kau sisipkan aba-aba ini pada tag sebelum </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> Maka aba-aba untuk Line chartnya ialah menyerupai berikut.
<canvas id="myChart" width="400" height="200"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script> var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', ], borderColor: [ 'rgba(255,99,132,1)', ], borderWidth: 1 }] } }); </script>Maka balasannya akan menyerupai berikut :
Pembahasan Kode :
- Baris pertama terdapat kode
<canvas id="myChart" width="400" height="200"></canvas>kode ini merupakan tag dari HTML5 dan nantinya akan dimanipulasi oleh Chart.js menjadi sebuah chart dengan tampilan yang sesuai dengan pada ketika kita menginisialisasi chart tersebut. - Lalu ada aba-aba berikut
var ctx = document.getElementById("myChart").getContext('2d');kode ini untuk mengidentifikasikan elemen canvas mana yang akan dipakai untuk menampilkan sebuah chart..getContext()merupakan sebuah method yang memiliki return drawing context, dengan method ini nantinya Chart.js akan di-allow untuk menggambar chart yang sesuai dengan pada ketika kita menginisialisasi chart tersebut. - Lalu ada aba-aba berikut
var myChart = new Chart(ctx, {kode ini adalah class dari Chart.js untuk menginisialisasi chart. Pada kasus ini kita mengisinya dengan 2 parameter yaitu element dan object untuk mendefinisikan chart yang akan kita buat dan Chart.js akan menggambarkannya sesuai dengan object yang kita definisikan. - Lalu ada kode
type: 'line',kode ini untuk men-define jenis chart yang akan digambar oleh Chart.js. - Lalu ada kode
data: {kode ini untuk men-define data yang akan kita tampilkan pada chart dalam bentuk object. - Di dalam key
datamaka adalabels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],kode ini merupakan key untuk men-set label untuk data dan dituliskan dalam array. - Lalu ada kode
datasets: [{kode ini untuk men-define data yang akan kita tampilkan pada chart. - Di dalam kode
datasetsadalabelkode ini untuk memperlihatkan keterangan pada data. - Lalu ada kode
data: [12, 19, 3, 5, 2, 3],kode tersebut untuk men-define jumlah data untuk setiap titik dan dituliskan dalam bentuk array. Terlihat dari aba-aba tersebut, berarti kita mempunyai 6 data, dalam kata lain kita mempunyai 6 titik pada chart. - Lalu ada kode
backgroundColor: [kode ini untuk memilih warna latar belakang pada chart. - Lalu ada kode
borderColor: [kode ini untuk memilih warna dari garis data pada char. - Lalu ada kode
borderWidth: 1kode ini untuk memilih ukuran dari garis.
Sebuah chart yang dibangun oleh Chart.js sudah pasti responsive, dalam artian ketika kau buka pada perangkat yang berbeda ukuran maka ia akan menyesuaikan.
Praktis bukan?
Jika kalian mengalami kesulitan silahkan tinggalkan komentar dengan format berikut ya
#Help
#Nomor_WA
#Link_Facebook
Team koding kami akan menghubungi kalian secepatnya ^_^
Terimakasih sudah berkunjung.
##
Refrence by : Its kodinger
Tutorial by : Its kodinger
Line chart data by : chart.js => https://www.chartjs.org/
