Pagpresenta ng Datos Gamit ng Flot

() translation by (you can also view the original English article)

Maraming tutoryal tungkol sa paggawa ng bar graph sa CSS. Ngunit minsan, hindi sapat ang bar graph. Paano kung pagbago ang datos natin at mas angkop na ang line graph? O marahil hindi tayo kuntento sa bar graph lamang. Ang Flot, ajQuery plugin ay upang madaling gumawa ng magagandang mga graph.

Sa mundo na pinaiikot ng datos, madalas ay kailangan nating magpakita ng matataas na datos. Kadalasan ay kailangan nating magpakita ng hanay ng mga halaga na may pamulaan at kung gusto natin pagandahin ay maaaring gumamit ng larawan ng graph. Gusto ng tao ng mga larawan. Bakit? Dahil mas madaling magbasa ng datos kung nasa biswal na anyo. Ngunit maaaring maging mahirap ang paglikha ng picture graph at pag-update nito ng bagong datos. Sa tutoryal na ito, gagamit tayo ng jQuery plugin na tawag ay Flot upang agarang lumikha ng mga graph.

Hakbang 1

Kailangan natin ng datos upang makapagsimula. Sa tutoryal na ito, gagamit ng datos ng GDP sa ilang mga bansa na natagpuan sa Wikipedia. Sa kasamaang palad ay hanggang 2003 laman ang datos. Ngunit dahil hindi naman ito lekayon sa ekomomika, sasapat na iti. Ilagay ang datos sa simpleng tabke at magdagdag ng ilang linya upang ilarawan.

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>

Pansinin na ang table ay nasa loob ng div na may id na “plotarea.” Ang graph na gagawin mamaya ay papalitan ang table na nasa loob ng div. Hindi magandang tignan ang table sa ngayon kaya magdagdag ng CSS upang maging mas presentable.

<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>

Dapat ay maging ganito ang itsura.

Ngayon na nasa table na lahat ng datos, maaari nan idagdag ang JavaScript na gagawa ng graph. Hindi istriktong pangagailangan ang table ngunit magandang mayroon dahil sa dalawang dahilan:

Madaling makapasok. Maraming bulag na web user at mahalaga na lahat ng nasa website ay madaling basahin. Ang mga nagbabasa sa screen ay madaling mababasa ang mga graph na ginawang Flot.
Pagbaba ng grado. May maliit na bilang ng web user na hindi pinapagana ang JavaScript. Bagaman maliit lang na bilang ay hindi naman mahirap na magdagdag ng table upang maaari nilang makita ang mga datos.

Hakbang 2

I-link ang mga kailangang JavaScrip library. Mayroong dalawa, saka isa pa para sa suporta ng IE. Kailangang i-link muna ang jQuery pagkatapos ay ang Flot library dahil nakadepende ito sa jQuery. Dahil ay FLot ay ginagamit ang canvas na elemento upang iguhit ang mga graph, kailangang isali ang ExplorerCanvas script na ginagaya ang canvas na elemento sa IE. Hindi ito kailangan ng mga gumagamit ng Firefox, Opera at Safari kaya gagamit ng kondisyonal na komento upang siguraduhing ang mga gumagamit lang ng IE ang mag-download.

<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]-->

Simple lang ang paglikha ng graph sa Flot dahil marami sa mga opsyon ay may makabuluhang awtomatikong halaga. Ang ibig-sabihin nito ay kayang gumawa ng magandang graph nang kaunti lang ang gagawin, ngunit maaari ring ayusin ayon sa kagustuhan. Upang gumawa ng simpleng graph, kailangang tumukoy ng container element at ang datos na ilalagay sa graph. Kailangang ay may nakatukoy na lapad at tangkad ang container element kaya gagamit ng jQuery upang ang “plotarea” div ay mayroong lapad na 500px at tangkad na 250px.

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

Ang unang parametro ay isang jQuery object ng container element. Ang ikalawang elemento ay array na may tatlong dimensyon kung saan ang unang child array ay mga dataset at ang granchild array ay ordered pari na tinutukoy ang X at Y na halaga para sa Cartesian plane. Ilagay muna sa graph ang datos ng GDP ng US.

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>

Ang data table na mayroon tayo noon ay dapat palitan ng magandang graph. Ang array na naglalaman ng dataset ay nasa loob ng isa pang parent array. Upang makagawa ng graph ng iba pang dataset, idadagdag lang bilang isa pang elemento sa parent array. Idagdag ang datos para sa ibang bansa sa table.

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	];

Ngayon ay mayroon nang maganda-gandang graph, ngunit hindi natin alam kung aling linya ang para sa aling bansa! Kailangan natin ng gabay. Sinusuportahan ito ng Flot at kailangan lang ilagay ang mga dataset sa isang JSON object at magdagdag ng label element.

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	];

Hakbang 3

Nabaggit na dati na ang Flot ay maraming makabuluhang default. Bagaman ayos lang para sa karamaihan, pinapalabo ng gabay ang ilan sa mga datos. Ang Flot ay mayroong ikatlong parametro para sa mga opsyon sa JSON object.

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

Para maging mas madaling makita ang datos sa malayong dulo ng graph, aayusin ang background opacity at ang mga margin ng gabay.

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

Ang ilan (kagaya ko) ay gustong nakikita kung nasaan ang mga data point, kaya tukuyon sa mga pagpipilian na markahan ang bawat punto gamit ng bilog na may nakatukoy na radius.

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

Ngayon ay mayroon na tayong mga data point ngunit nasaan na ang mga linya?! Sadyaing buksan muli ang mga to.

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

Ang pinal na code ay ganito ang itsura:

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>

Konklusyon

Maraming posibilidad sa Flot. Ang Flot API dinetetalye ang iba’t ibang mga opsyon na mayroon para sa pag-ayos ng graph, kabilang ang pagtukoy ng iba’t ibang tipo, kulay, axes ng graph, at pati ang pagbuhay ng mga interactive feature gaya ng selection at zoom. Ang isa pang posibilidad ay ang gawin itong dinamika at gumawa ng JavaScript code na may datos mula sa database gamit ng PHP.

Mag-subscribe sa NETTUTS RSS Feed para sa mas marami pang tutoryal at artikulo tungkol sa web development.