July 24, 2024

Membuat Grafik Dengan Menggunakan Jquery & Html

1 min read

Selamat pagi (sapaan kita semua agar tetap semangat). Kali ini kita akan membahas cara membuat grafik dengan menggunakan Jquery dan HTML.

Jquery adalah Javascript Library yang merupakan kumpulan kode Javascript  yang siap digunakan, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Secara standar,  apabila kita membuat kode Javascript , maka diperlukan kode yang cukup panjang. Oleh karena itu  Jquery digunakan untuk memanggil fungsi yang ada didalam Library, sehingga mempersingkat kode yang kita gunakan.

Ada beberapa hal yang harus diperhatikan dalam membuat grafik dengan menggunakan Jquery :

Langkah 1

Download 2 tipe jquery berikut :

  • [download id=”536″]
  • [download id=”537″]

Download tipe grafik :

  • [download id=”538″]

Perhatikan lokasi penyimpanan file ( didalam 1 folder terdapat file grafik yang merupakan file untuk membuat grafik).

g1

File didalam folder js terdapat file jquery-1.4.js, jquery.fusioncharts.js, dan FCF_MSColumn3D.

g2

Langkah 2

Buatlah file dengan tampilan sebagai berikut : (nama file disesuaikan, simpan satu folder dengan Jquery, seperti pada gambar 1 ).

g3

Buatlah kode berikut di tab code pada file grafik.html, perhatikan letak script berikut, perhatikan kode dari <head> sampai </head> untuk memanggil jquery dan tambahkan id=”grafik” didalam kode <table> untuk penamaan pada grafik.

g4

Dibawah kode </table> tambahkan script berikut :

g5

Berikut adalah detail kode pada tab code di dreamweaver :

[sourcecode languege=”html”]
<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.js"></script>
<script type="text/javascript" src="js/jquery.fusioncharts.js"></script>
</head>
<body>
<center>
<table id="grafik" border="1" align="center">
<tr> <th>&nbsp;</th>
<th>2009</th>
<th>2010</th>
<th>2011</th>
</tr>
<tr> <td>Product 1</td>
<td>25</td>
<td>35</td>
<td>35</td>
</tr>
<tr> <td>Product 2</td>
<td>21</td>
<td>35</td>
<td>45</td> </tr>
<tr>
<td>Product 3</td>
<td>33</td>
<td>34</td>
<td>53</td>
</tr>
</table>
<script type="text/javascript">
$(‘#grafik’).convertToFusionCharts({
swfPath: "js/",
type: "MSColumn3D",
data: "#grafik",
width:"500",
height:"400"
});
</script>
</center>
</body>
</html>
[/sourcecode]

Berikut adalah tampilan file grafik.html di browser :

[download id=”539″]

g6

Selamat mencoba :).

0 thoughts on “Membuat Grafik Dengan Menggunakan Jquery & Html

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.