Menambahkan Chart ke Projek Rails dengan Canvasjs

Chart (grafik) adalah suatu objek graifk 2D atau 3D yang mempresentasikan suatu nilai atau hasil perhitungan ke dalam bentuk batang, kolom, garis, dan sebagainya. Chart biasanya digunakan untuk data dukungan ketika proses presentasi dan memberikan gambaran atau perkembangan dari suatu hasil perhitungan yang sudah ditetapkan sebelumnya, mencakup ke perkembangan dari masa lalu atau masa yang akan datang.

Buat Project Baru 

1. Membuat project baru

   $ rails new Chart

   $ cd Chart

2. $ bundle install

Membuat CRUD untuk User

1. Buat CRUD untuk User dengan menggunakan fungsi Scaffold

   $ rails generate scaffold Siswa nama:string kelas:string skor_uts:integer skor_uas:integer rata_rata:float

2. Buat database baru lalu migrate untuk generate table Siswa
   

   $ rake db:create

   $ rake db:migrate

   $ rails s 

3. Silahkan cek localhost:3000/siswas, untuk memastikan kalau aplikasi kita bisa dibuka
4. Sebelum membuat beberapa data silahkan tambahkan kode berikut di, views/siswas/_form.html.erb agar field rata-rata bisa terisi otomatis setelah skor UAS diinputkan

5. <script>
     $(document).ready(function(){
       $("#siswa_skor_uas").change(function(){
         var_skor_uts = parseInt($("#siswa_skor_uts").val());
         var_skor_uas = parseInt($("#siswa_skor_uas").val());
         $("#siswa_rata_rata").val((var_skor_uts * 0.3) +( var_skor_uas * 0.7));
       });
     });
   </script>

6. Buat beberapa data untuk nanti di implementasikan ke dalam Chart

Implementasi Chart Dengan Canvasjs

1. Kita akan membuat chart pada halaman, views/siswas/show.html.erb
2. Pertama - tama buat file dengan nama "canvasjs.min.js" pada folder assets/javascripts, lalu copy kan kode yang ada pada link ini canvasjs.min.js
3. Lalu edit assets/javascripts/application.js, tambahkan kode berikut sebelum "//= require_tree ."

   //= require canvasjs.min
   //= require Chart
   //= require_tree .

4. Untuk menampilkan grafik nya edit file views/siswas/show.html.erb, dan tambahkan kode berikut di baris paling bawah

   <div id="grafik_siswa" style="height:400px;width:50%;"></div>
   <script>
     $(function () {
       var graph = {
         title: {
           text: "Grafik Nilai <%= @siswa.nama %>"
         },
         animationEnabled: true,
         data: [
         {
           type: "splineArea",
           dataPoints: [
             { y: parseInt("<%= @siswa.skor_uts %>"), label: "UAS"},
             { y: parseInt("<%= @siswa.skor_uas %>"), label: "UTS"},
             { y: parseInt("<%= @siswa.rata_rata %>"), label: "Rata-rata"}
           ]
         }
         ]
       };
       $("#grafik_siswa").CanvasJSChart(graph);
     });
   </script>

5. Berikut tampilan dari grafik yang muncul pada halaman show 
   

Implementasi Chart Dengan Chartjs

1. Kita akan membuat chart pada halaman, views/siswas/show.html.erb dengan menggunakan chartjs
2. Pertama - tama buat file dengan nama "Chart.js" pada folder assets/javascripts, lalu copy kan kode yang ada pada link ini Chart.js
3. Untuk menampilkan grafik nya edit file views/siswas/show.html.erb, dan tambahkan kode berikut

   <div id="grafik_siswa" style="height:400px;width:50%;"></div>
   <br><br>
   <div><canvas id="grafik_siswa2" style="height:500px;width:100%;"></canvas></div>
   
   <script>
     $(function () {
       var graph = {
         title: {
           text: "Grafik Nilai <%= @siswa.nama %>"
         },
         animationEnabled: true,
         data: [
         {
           type: "splineArea",
           dataPoints: [
             { y: parseInt("<%= @siswa.skor_uts %>"), label: "UAS"},
             { y: parseInt("<%= @siswa.skor_uas %>"), label: "UTS"},
             { y: parseInt("<%= @siswa.rata_rata %>"), label: "Rata-rata"}
           ]
         }
         ]
       };
       $("#grafik_siswa").CanvasJSChart(graph);
     });
   
     $(function() {
       var ctx = document.getElementById("grafik_siswa2");
       var myChart = new Chart(ctx, {
         type: 'bar',
         data: {
           labels: ["UAS", "UTS", "Rata-rata"],
           datasets: [{
             label: '# Nilai ',
             data: [parseInt("<%= @siswa.skor_uts %>"), parseInt("<%= @siswa.skor_uas %>"), parseInt("<%= @siswa.rata_rata %>")],
             backgroundColor: [
                   'rgba(255, 99, 132, 0.2)',
                   'rgba(54, 162, 235, 0.2)',
                   'rgba(255, 206, 86, 0.2)'
               ],
             borderColor: [
                   'rgba(255,99,132,1)',
                   'rgba(54, 162, 235, 1)',
                   'rgba(255, 206, 86, 1)'
               ],
             borderWidth: 1
           }]
         },
         options: {
           scales: {
             yAxes: [{
               ticks: {
                 beginAtZero:true
               }
             }]
           },
           title: {
             display: true,
             text: 'Grafik Nilai <%= @siswa.nama %>',
             fontSize: 24
           },
           tooltips: {
             enabled: true,
             mode: 'single',
             callbacks: {
               label: function(tooltipItems, data) {
                 var ylabel = tooltipItems.yLabel;
                 return " # Nilai : " + ylabel;
               }
             }
           }
         }
       });
     });
   </script>

4. Berikut tampilan dari grafik yang muncul pada halaman show 
   

Untuk dokumentasi Chartjs : Chartjs
My project source code Chart

Happy Coding! :)

muhammad.romadhan@doterb.com | Developer at Doterb Solution