Memvisualisasikan Data dengan Flot

Indonesian (Bahasa Indonesia) translation by Rohmat Trimanto (you can also view the original English article)

Ada banyak tutorial tentang cara membuat grafik batang CSS. Namun terkadang, grafik batang tidak cukup. Bagaimana jika jejak data kami berubah seiring waktu dan grafik garis lebih tepat? Atau mungkin kita tidak puas hanya dengan grafik batang. Masukkan Flot, ajQuery plugin yang memungkinkan kita membuat grafik dengan mudah.

Dalam dunia sentris data, kita sering harus menampilkan sejumlah besar data di web. Umumnya kami menampilkan tabel nilai dengan judul dan jika kami benar-benar ingin mendapatkan kesan mewah, kami akan menggunakan gambar grafik. Orang suka gambar. Saya suka gambar. Mengapa? Karena itu jauh lebih mudah untuk menginterpretasikan data ketika itu dalam bentuk visual. Namun, membuat grafik gambar dan memperbaruinya dengan data baru bisa sangat merepotkan. Dalam tutorial ini, kami akan menggunakan plugin jQuery bernama Flot untuk membuat grafik dengan cepat.

Langkah 1

Untuk memulai, kami membutuhkan beberapa data. Untuk tutorial ini, kami akan menggunakan beberapa data GDP untuk beberapa negara yang berbeda yang saya temukan di Wikipedia. Sayangnya, data hanya sampai tahun 2003, tetapi karena ini bukan pelajaran ekonomi, itu sudah cukup. Mari masukkan data ke dalam tabel sederhana dan tambahkan beberapa garis untuk mendeskripsikannya.

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2	<html xmlns="http://www.w3.org/1999/xhtml">
3	<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5	<title>Flot Tutorial</title>
6
7	</head>
8
9	<body>
10
11	<div id="plotarea">
12	<table>
13	<caption>GDP, based on exchange rates, over time. Values in billion USDs.</caption>
14	<tr>
15	<td></td>
16	<th scope="col">2003</th>
17	<th scope="col">2002</th>
18	<th scope="col">2001</th>
19	<th scope="col">2000</th>
20	<th scope="col">1999</th>
21	<th scope="col">1998</th>
22	</tr>
23	<tr>
24	<th scope="row">USA</th>
25	<td>10,882</td>
26	<td>10,383</td>
27	<td>10,020</td>
28	<td>9,762</td>
29	<td>9,213</td>
30	<td>8,720</td>
31	</tr>
32	<tr>
33	<th scope="row">EU</th>
34	<td>10,970</td>
35	<td>9,040</td>
36	<td>8,303</td>
37	<td>8,234</td>
38	<td>8,901</td>
39	<td>8,889</td>
40	</tr>
41	<tr>
42	<th scope="row">UK</th>
43	<td>1,765</td>
44	<td>1,564</td>
45	<td>1,430</td>
46	<td>1,438</td>
47	<td>1,460</td>
48	<td>1,423</td>
49	</tr>
50	<tr>
51	<th scope="row">China</th>
52	<td>1,575</td>
53	<td>1,434</td>
54	<td>1,345</td>
55	<td>1,252</td>
56	<td>1,158</td>
57	<td>1,148</td>
58	</tr>
59	<tr>
60	<th scope="row">India</th>
61	<td>599</td>
62	<td>510</td>
63	<td>479</td>
64	<td>457</td>
65	<td>447</td>
66	<td>414</td>
67	</tr>
68	</table>
69	</div>
70
71	<p>GDP, based on exchange rates, over time. Values in billion USDs.</p>
72
73	</body>
74	</html>

Perhatikan bahwa tabel terkandung dalam div dengan id dari "plotarea." Grafik yang akan kita buat nanti akan menggantikan tabel yang terdapat di dalam div ini. Tabel tampak agak jelek saat ini jadi mari tambahkan beberapa CSS agar lebih rapi.

<style type="text/css">
	body { font-family: Arial, Helvetica, sans-serif; }
	table { border-collapse: collapse; }
	td, th { border: 1px solid #222; padding: 5px; }
	
	/* Fix the legend */
	.legend td, .legend th { border: 0; padding: 2px; }
</style>

Anda harus memiliki sesuatu yang terlihat seperti ini.

Sekarang kita memiliki semua data dalam tabel, kita dapat mulai menambahkan dalam JavaScript yang akan membuat grafik untuk kita. Secara teknis, kita tidak harus memiliki meja, tetapi itu bagus karena dua alasan:

Aksesibilitas. Ada banyak pengguna web yang buta di luar sana dan penting untuk membuat segala sesuatu di situs web Anda ramah pembaca layar. Pembaca layar tidak dapat menafsirkan grafik yang dibuat oleh Flot.
Degradabilitas. Sejumlah kecil pengguna web menonaktifkan JavaScript. Meskipun ini adalah minoritas yang sangat kecil, tidak banyak lagi pekerjaan untuk menambahkan tabel sehingga mereka dapat melihat data juga.

Langkah 2

Tautkan pustaka JavaScript yang diperlukan. Ada dua di antaranya, ditambah satu lagi untuk dukungan IE. Kita perlu menghubungkan jQuery terlebih dahulu dan kemudian pustaka Flot karena itu tergantung pada jQuery. Karena Flot menggunakan elemen kanvas untuk menggambar grafik, kita perlu menyertakan skrip ExplorerCanvas yang mengemulasi elemen kanvas di IE. Pengguna Firefox, Opera, dan Safari tidak memerlukan ini jadi kami akan menggunakan komentar bersyarat untuk memastikan hanya pengguna IE yang mengunduhnya.

<script src="jquery.js" language="javascript" type="text/javascript"></script>

<script src="jquery.flot.pack.js" language="javascript" type="text/javascript"></script>

<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->

Membuat grafik dengan Flot cukup sederhana karena banyak opsi memiliki nilai default yang masuk akal. Ini berarti Anda dapat membuat grafik yang terlihat bagus dengan kerja minimal, tetapi juga dapat menyesuaikannya sesuai keinginan Anda. Untuk membuat grafik dasar, kita perlu menentukan elemen kontainer dan data yang akan digambarkan. Elemen penampung juga harus memiliki lebar dan tinggi yang ditentukan, jadi kami akan menggunakan jQuery untuk menetapkan div "plotarea" untuk memiliki lebar 500 piksel dan tinggi 250 piksel.

<script language="javascript" type="text/javascript">
$(function() {
	var plotarea = $("#plotarea");
	plotarea.css("height", "250px");
	plotarea.css("width", "500px");
	$.plot( plotarea , data );
});
</script>

Parameter pertama adalah objek jQuery dari elemen penampung. Elemen kedua adalah array 3-dimensi di mana array anak pertama adalah dataset dan array "cucu" adalah pasangan pesanan yang menetapkan nilai X dan Y untuk bidang Cartesian. Mari grafik data GDP untuk AS terlebih dahulu.

1	<script language="javascript" type="text/javascript">
2	$(function () {
3	var data = [ [[2003, 10882],
4	[2002, 10383],
5	[2001, 10020],
6	[2000, 9762],
7	[1999, 9213],
8	[1998, 8720]] ];
9
10	var plotarea = $("#plotarea");
11	plotarea.css("height", "250px");
12	plotarea.css("width", "500px");
13	$.plot( plotarea , data );
14	});
15	</script>

Tabel data yang kami miliki sebelumnya harus diganti dengan grafik tampilan yang bagus. Seperti yang Anda lihat, larik yang berisi kumpulan data terdapat dalam susunan induk lainnya. Untuk membuat grafik kumpulan data lainnya, kami hanya menambahkannya sebagai elemen lain ke array induk. Mari tambahkan data untuk negara lain yang kami miliki di tabel kami.

1	var data = [
2	[[2003, 10882],
3	[2002, 10383],
4	[2001, 10020],
5	[2000, 9762],
6	[1999, 9213],
7	[1998, 8720]],
8
9	[[2003, 10970],
10	[2002, 9040],
11	[2001, 8303],
12	[2000, 8234],
13	[1999, 8901],
14	[1998, 8889]],
15
16	[[2003, 1795],
17	[2002, 1564],
18	[2001, 1430],
19	[2000, 1438],
20	[1999, 1460],
21	[1998, 1423]],
22
23	[[2003, 1575],
24	[2002, 1434],
25	[2001, 1345],
26	[2000, 1252],
27	[1999, 1158],
28	[1998, 1148]],
29
30	[[2003, 599],
31	[2002, 510],
32	[2001, 479],
33	[2000, 457],
34	[1999, 447],
35	[1998, 414]]
36	];

Kami sekarang memiliki grafik yang cukup bagus, tetapi kami tidak tahu baris mana yang merupakan negara mana! Yang kita butuhkan adalah legenda. Untungnya, Flot mendukung ini dan adalah masalah menempatkan dataset kami dalam objek JSON dan menambahkan elemen label.

1	var data = [
2	{
3	label: "USA",
4	data: [[2003, 10882],
5	[2002, 10383],
6	[2001, 10020],
7	[2000, 9762],
8	[1999, 9213],
9	[1998, 8720]]
10	},
11
12	{
13	label: "EU",
14	data: [[2003, 10970],
15	[2002, 9040],
16	[2001, 8303],
17	[2000, 8234],
18	[1999, 8901],
19	[1998, 8889]]
20	},
21
22	{
23	label: "UK",
24	data: [[2003, 1795],
25	[2002, 1564],
26	[2001, 1430],
27	[2000, 1438],
28	[1999, 1460],
29	[1998, 1423]]
30	},
31
32	{
33	label: "China",
34	data: [[2003, 1575],
35	[2002, 1434],
36	[2001, 1345],
37	[2000, 1252],
38	[1999, 1158],
39	[1998, 1148]]
40	},
41
42	{
43	label: "India",
44	data: [[2003, 599],
45	[2002, 510],
46	[2001, 479],
47	[2000, 457],
48	[1999, 447],
49	[1998, 414]]
50	}
51	];

Langkah 3

Saya sebutkan sebelumnya bahwa meskipun Flot memiliki banyak default yang masuk akal. Meskipun mereka mungkin baik-baik saja bagi kebanyakan orang, legenda ini sebagian mengaburkan sebagian data. Flot memiliki parameter ketiga untuk melewatkan opsi dalam objek JSON.

1	$.plot( plotarea , data, options );

Untuk membuat data di ujung jauh grafik sedikit lebih terlihat, kami akan menyesuaikan opasitas latar belakang dan margin legenda.

var options = {
	legend: {
		show: true,
		margin: 10,
		backgroundOpacity: 0.5
	}
};

Beberapa orang (seperti saya) seperti dapat melihat secara tepat di mana titik data berada, jadi mari kita tentukan dalam opsi untuk menandai setiap titik dengan lingkaran radius tertentu.

var options = {
	legend: {
		show: true,
		margin: 10,
		backgroundOpacity: 0.5
	},
	points: {
		show: true,
		radius: 3
	}
};

Hebat, kami punya poin data, tapi kemana garisnya pergi ?! Mari secara eksplisit mengaktifkannya kembali.

var options = {
	legend: {
		show: true,
		margin: 10,
		backgroundOpacity: 0.5
	},
	points: {
		show: true,
		radius: 3
	},
	lines: {
		show: true
	}
};

Kode terakhir kami terlihat seperti ini:

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2	<html xmlns="http://www.w3.org/1999/xhtml">
3	<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5	<title>Flot Tutorial</title>
6
7	<style type="text/css">
8	body { font-family: Arial, Helvetica, sans-serif; }
9	table { border-collapse: collapse; }
10	td, th { border: 1px solid #222; padding: 5px; }
11
12	/* Fix the legend */
13	.legend td, .legend th { border: 0; padding: 2px; }
14	</style>
15
16	<script src="jquery.js" language="javascript" type="text/javascript"></script>
17	<script src="jquery.flot.pack.js" language="javascript" type="text/javascript"></script>
18	<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
19
20	<script language="javascript" type="text/javascript">
21	$(function () {
22	var data = [
23	{
24	label: "USA",
25	data: [[2003, 10882],
26	[2002, 10383],
27	[2001, 10020],
28	[2000, 9762],
29	[1999, 9213],
30	[1998, 8720]]
31	},
32
33	{
34	label: "EU",
35	data: [[2003, 10970],
36	[2002, 9040],
37	[2001, 8303],
38	[2000, 8234],
39	[1999, 8901],
40	[1998, 8889]]
41	},
42
43	{
44	label: "UK",
45	data: [[2003, 1795],
46	[2002, 1564],
47	[2001, 1430],
48	[2000, 1438],
49	[1999, 1460],
50	[1998, 1423]]
51	},
52
53	{
54	label: "China",
55	data: [[2003, 1575],
56	[2002, 1434],
57	[2001, 1345],
58	[2000, 1252],
59	[1999, 1158],
60	[1998, 1148]]
61	},
62
63	{
64	label: "India",
65	data: [[2003, 599],
66	[2002, 510],
67	[2001, 479],
68	[2000, 457],
69	[1999, 447],
70	[1998, 414]]
71	}
72	];
73
74	var options = {
75	legend: {
76	show: true,
77	margin: 10,
78	backgroundOpacity: 0.5
79	},
80	points: {
81	show: true,
82	radius: 3
83	},
84	lines: {
85	show: true
86	}
87	};
88
89	var plotarea = $("#plotarea");
90	plotarea.css("height", "250px");
91	plotarea.css("width", "500px");
92	$.plot( plotarea , data, options );
93	});
94	</script>
95	</head>
96
97	<body>
98
99	<div id="plotarea">
100	<table>
101	<caption>GDP, based on exchange rates, over time. Values in billion USDs.</caption>
102	<tr>
103	<td></td>
104	<th scope="col">2003</th>
105	<th scope="col">2002</th>
106	<th scope="col">2001</th>
107	<th scope="col">2000</th>
108	<th scope="col">1999</th>
109	<th scope="col">1998</th>
110	</tr>
111	<tr>
112	<th scope="row">USA</th>
113	<td>10,882</td>
114	<td>10,383</td>
115	<td>10,020</td>
116	<td>9,762</td>
117	<td>9,213</td>
118	<td>8,720</td>
119	</tr>
120	<tr>
121	<th scope="row">EU</th>
122	<td>10,970</td>
123	<td>9,040</td>
124	<td>8,303</td>
125	<td>8,234</td>
126	<td>8,901</td>
127	<td>8,889</td>
128	</tr>
129	<tr>
130	<th scope="row">UK</th>
131	<td>1,765</td>
132	<td>1,564</td>
133	<td>1,430</td>
134	<td>1,438</td>
135	<td>1,460</td>
136	<td>1,423</td>
137	</tr>
138	<tr>
139	<th scope="row">China</th>
140	<td>1,575</td>
141	<td>1,434</td>
142	<td>1,345</td>
143	<td>1,252</td>
144	<td>1,158</td>
145	<td>1,148</td>
146	</tr>
147	<tr>
148	<th scope="row">India</th>
149	<td>599</td>
150	<td>510</td>
151	<td>479</td>
152	<td>457</td>
153	<td>447</td>
154	<td>414</td>
155	</tr>
156	</table>
157	</div>
158
159	<p>GDP, based on exchange rates, over time. Values in billion USDs.</p>
160
161	</body>
162	</html>

Pikiran Penutup

Ada banyak kemungkinan dengan Flot. The Flot API merinci semua opsi berbeda yang tersedia untuk menyesuaikan grafik Anda termasuk menentukan jenis grafik yang berbeda, warna, kapak, dan bahkan mengaktifkan fitur interaktif seperti seleksi dan zooming. Kemungkinan lain adalah untuk membuat semuanya sepenuhnya dinamis dan menghasilkan kode JavaScript secara dinamis dengan data dari database menggunakan PHP.

Berlangganan NETTUTS RSS Feed untuk lebih banyak tuts pengembangan web harian dan artikel.