Plot Garis dengan HTML5 Canvas



Untuk keperluan analisis data, seringkali diperlukan membuat grafik, untuk melihat persebaran data.

Seperti yang penulis butuhkan dalam video di atas, untuk melihat performa iklan Admob dari aplikasi-aplikasi buatan penulis, penulis perlu melihat performa jumlah iklan yang dipanggil tiap waktunya.

Dengan teknologi HTML5 Canvas, ternyata membuat plotting garis sederhana dapat dilakukan dengan mudah.

Cukup dengan membuat field input file, memilih data yang akan ditampilkan, dan menggambar grafiknya dengan Canvas.

Fungsi berikut ini adalah perintah untuk membuat plotting dengan Canvas:

function plotting(name,x,min,max)
{
	var c = document.createElement('canvas');
	c.width=300;
	c.height=200;
	var ctx = c.getContext("2d");
	ctx.font = "14px Arial";
	ctx.fillText(name+" "+x.length,5,16);
	ctx.beginPath();
	for(var i=0;i<x.length;i++){
		if(i==0){			
			ctx.moveTo(Math.round(1.0*i*c.width/x.length),Math.round(c.height-1.0*(x[i]-min)*c.height/(max-min)));
		}else{
			ctx.lineTo(Math.round(1.0*i*c.width/x.length),Math.round(c.height-1.0*(x[i]-min)*c.height/(max-min)));
		}
	}
	ctx.stroke();
	c.style="margin:10px;";
	document.getElementById("graphline").appendChild(c);
}

Sedangkan keseluruhan kode dari demo video di atas, dapat dicoba dan di download pada link di bawah ini:


Semoga bermanfaat

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Jasa Penjadwalan Semester, UTS dan UAS Perguruan Tinggi menggunakan Google Sheet

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Kumpulan Source Code Greenfoot

Fitnah Covid dengan Swab Test

Menambahkan Random Key sebagai ID Pembeda di Google Sheet dengan Apps Script

Cek Sertifikat Tanah dengan Peta Publik BPN

Apps Script untuk Mengirimkan Notifikasi Approval

Algorithma Java Mencari KPK dan FPB

Menghilangkan Karakter Baris Baru di Google Sheets dengan Apps Script