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

Cara Penggunaan Memcached pada Aplikasi Rails

Apa itu Memcached ? 

Memcached adalah sebuah technologi yang digunakan sebagai suatu sistem penyimpanan dan pendistribusian data didalam memory server (RAM). Contoh website yang memakai memcached adalah detik.com. Search enginenya yg sangat cepat itu di code dengan memcached. Cara kerja memcached sangatlah simple karena fungsinya hanya cache server dan mengurangi load ke database server dan data yang di simpan oleh memcached disimpan di memory sehingga akses kedata tersebut akan jauh lebih cepat daripada akses ke database server.

Install Memcached di Ubuntu

Update Package

$ sudo apt-get update

Kemudian menginstal Memcached dan paket terkait

$ sudo apt-get install memcached

Configuration of the Memcached Installation

Gunakan perintah berikut untuk melihat informasi mengenai perintah memcached:

$ memcached -h

File konfigurasi default dapat ditemukan di:

$ vi /etc/memcached.conf

Saat start, Memcached akan start pada port 11211 secara default sesuai dengan file konfigurasi default. Untuk mengganti port, cukup ubah nomor di file konfigurasi. Jika singin menjalankan Memcached pada port 1337, dengan memori 4GB, dan memungkinkan maksimal 2.000 koneksi, Ubahlah sesuai code berikut:

-p 1337
-m 4096
-c 2000 

Keluar dan simpan file konfigurasi, lalu restart Memcached

$ sudo service memcached restart

Implementasi Pada ROR

Mulai dari awal buat project baru

$ rails new memcached_coba -d postgresql

$ cd memcached_coba

$ rails g scaffold post title:string description:text

$ rake db:create

$ rake db:migrate

Mulai setup memcache

Tambahkan gem 'dalli' pada file Gemfile lalu bundle install

Edit File  config/environments/development.rb tambahkan atau rubah:

    config.cache_store = :dalli_store

Buat file 'memcached.rb' pada folder config/initializers/memcached.rb isi file seperti berikut:

CACHE = Dalli::Client.new('127.0.0.1', { :namespace => 'memcached_coba', :expires_in => 3600, :socket_timeout => 3, :compress => true })

Dasar Penggunaan memcached

# Menyimpan memcached

 CACHE.set(key, value)

# Mengatur waktu expire

 CACHE.set(key, value, time_expire)

# Menggunakan memcached

 CACHE.get(key, value)

 # Menghapus memcached

 CACHE.delete(key)

# Menghapus semua memcached

 CACHE.flush_all

Berikut adalah sreenshoot hasil percobaan saya di rails console:

Selanjutnya kita akan mencoba menyimpan data post menggunakan memcached

Sebelum menggunakan memcached buatlah data post terlebih dahulu http://localhost:3000/posts/

Mari kita lihat log server sebelum penggunaan memcached berikut screenshootnya

Gambar Sebelum menggunakan memcached

Sekarang kita pasang memcached pada detil posts

Ubah code method set_post pada file app/controllers/posts_controller.rb

    def set_post
      @post = CACHE.get("post-#{params[:id]}")
      if @post.nil?
         @post = Post.find(params[:id])
         CACHE.set("post-#{params[:id]}", @post)
       end
    end

Mari kita lihat log server setelah penggunaan memcached berikut screenshootnya

Gambar setelah menggunakan memcached

Dari kedua gambar diatas kita bisa lihat perbedaanya bila menggunakan memcached saat pergi ke halaman detil post untuk kedua kalinya server tidak meload ke database terbukti dengan tidak adanya baris info load 'Post Load (2.4ms)  SELECT "posts".* FROM "posts" '

Dengan memanfaatkan memcached kita bisa membuat web kita menjadi lebih cepat . Sekian dulu postingan kali ini bila ada yang bertanya atau menambahkan yang kurang  silahkan comment dibawah.