Tutorial Membuat Line Chart atau Diagram

Tutorial Membuat Line chart atau Diagram

Halo sahabat koding ID, kali ini kita akan membuat Line chart atau Diagram pada website. apa itu line chart atau diagram? yaps ini adalah sebuah bagan yang memudahkan kita untuk melihat data.

tanpa basa basi langsung saja kita buat ^_^.

Disini kita menggunakan Chart.js, beberapa kelebihan nya :

• Line
• Bar
• Radar
• Area
• Mixed

Dan lain lain.

Sebelum memulai buatlah dulu file HTML nya lalu pada Text editor  favorit kamu sisipkan kode ini pada tag sebelum </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

Maka kode untuk Line chartnya adalah seperti 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 hasilnya akan seperti berikut :





Pembahasan Kode :

1. 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 saat kita menginisialisasi chart tersebut.
2. Lalu ada kode berikut var ctx = document.getElementById("myChart").getContext('2d');kode ini untuk mengidentifikasikan elemen canvas mana yang akan digunakan 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 saat kita menginisialisasi chart tersebut.
3. Lalu ada kode 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.
4. Lalu ada kode type: 'line',kode ini untuk men-define jenis chart yang akan digambar oleh Chart.js.
5. Lalu ada kode data: {kode ini untuk men-define data yang akan kita tampilkan pada chart dalam bentuk object.
6. Di dalam key datamaka ada labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],kode ini merupakan key untuk men-set label untuk data dan dituliskan dalam array.
7. Lalu ada kode datasets: [{kode ini untuk men-define data yang akan kita tampilkan pada chart.
8. Di dalam kode datasets ada labelkode ini untuk memberikan keterangan pada data.
9. 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 kode tersebut, berarti kita memiliki 6 data, dalam kata lain kita memiliki 6 titik pada chart.
10. Lalu ada kode backgroundColor: [kode ini untuk menentukan warna latar belakang pada chart.
11. Lalu ada kode borderColor: [kode ini untuk menentukan warna dari garis data pada char.
12. Lalu ada kode borderWidth: 1kode ini untuk menentukan ukuran dari garis.
Sebuah chart yang dibangun oleh Chart.js sudah pasti responsive, dalam artian ketika kamu buka pada perangkat yang berbeda ukuran maka ia akan menyesuaikan.

Mudah 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/

Share This :