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:

https://edugameapp.com/CodeExample/admobgraph.html

Semoga bermanfaat