Belajar pemrograman berbasis web php dhtmlx part 5 grafik

Belajar Pemrograman Web
menggunakan DHTMLX Part 5
“Grafik / Chart”
(SOURCE CODE)

GRAFIK /CHART
Pada tulisan kali ini akan dibahas bagaimana caranya menggunakan grafik (chart) pada DHTMLX
Framework dengan mengunakan komponen dhtmlxChart. Cara pertama bisa dilakukan dengan
mengambil data langsung dari database lalu ditampilkan pada Grafik/Chart. Cara kedua data
dari database ditampilkan ke dalam grid (dhtmlxGrid) terlebih dahulu lalu grafik akan
menampilkan data dari grid, jadi ada hubungan antara Grid dan Grafik. Cara kedua memiliki
kelebihan diantaranya bisa melakukan filter pada Grid dan Grafik menampilkan data sesuai Grid
yang sudah di-filter tersebut.
Komponen utama yang digunakan yaitu:
- dhtmlxLayout ( untuk menempatkan komponen)
- dhtmlxGrid (menampilkan data berupa tabel)
- dhtmlxChart (menampilkan grafik)
Kita menulis kode program pada 2 file terpisah yaitu:
1. index.html (untuk view)
2. grid.php (untuk controller grid)
Langsung saja pada kode program,
1. index.html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Grafik/Chart</title>
5. <script src="../../codebase/dhtmlx.js"></script>
6. <link rel="stylesheet" href="../../codebase/dhtmlx.css"></link>
7. <style type="text/css">
8. html,body {
9. width: 100%;
10. height: 100%;
11. overflow: hidden;
12. margin: 0px;
13. }
14. </style>
15. </head>
16. <body>
17. <script type="text/javascript">
18.
19. //Buat layout utama
20. var myLayout = new dhtmlXLayoutObject({
21. parent: document.body,
22. pattern: "2U",
23. cells: [
24. {id: "a", text: "Grid"},
25. {id: "b", text: "Chart"}
26. ]

27. });
28.
29. //Grid dengan mengambil data dari database
30. var myGrid = myLayout.cells("a").attachGrid();
31. myGrid.setHeader("Tahun, Ouput");
32. myGrid.attachHeader("#text_filter,#select_filter");
33. myGrid.setColTypes("ro,ro");
34. myGrid.init();
35.
36. //Chart pada layout kanan (b)
37. var myChart = myLayout.cells("b").attachChart({
38. view: "bar", //bar,pie,line
39. color: "#66ccff",
40. gradient: "3d",
41. value: "#data1#", //#data0# -> kolom pertama grid
42. label: "#data0#, #data1#", //#data1# -> kolom kedua grid
43. tooltip: "#data0#, #data1#", //info ketika mouse over
44. width: 30,
45. origin: 0,
46. yAxis: {
47. title: "Output",
48. start: 0,
49. step: 20,
50. end: 200
51. },
52. xAxis: {
53. title: "Tahun",
54. template: "#data0#"
55. }
56. });
57.
58. //Integrasi Grid & Chart
59. function refresh_func() {
60. myChart.clearAll();
61. myChart.parse(myGrid, "dhtmlxgrid");
62. }
63.
64. //Event saat memuat data ke grid & perubahan(filter)
65. myGrid.load("data/grid.php", refresh_func);
66. myGrid.attachEvent("onGridReconstructed", refresh_func);
67.
68. </script>
69. </body>
70. </html>
Penjelasan index.html
- Baris 38, View bisa berupa bar,line,pie. View berupa radar,scatter mempunyai
konfigurasi yang berbeda dengan bar/line/pie
- Baris 41-43, #data0# merupakan kolom pertama dari grid, #data1# kolom kedua
- Baris 46,52, yAxis untuk vertical, xAxis untuk horizontal
- Baris 59, Fungsi untuk menghapus data yang ada pada Chart saat itu lalu muat data baru
sesuai Grid

LINE
Bila ingin warna berdasarkan jumlah output misalkan output dibawah 40 berwarna merah,
GANTI BARIS 39 dari color: "#66ccff", MENJADI:
color: function(obj) {
if (obj.data1 < 40) {
return "red";
} else return "#66ccff";
},

2. grid.php
1. <?php
2. include ("../../../codebase/connector/grid_connector.php");
3. include ("../../../codebase/connector/db_pdo.php");
4.
5. $dbtype = "mysql";
6. $dbhost = "127.0.0.1";
7. $dbname = "test";
$dbuser = "root";
8. $dbpassword = "";
9. $dbcharset = "utf8";
10.
11. $dsn = "mysql:host=$dbhost;dbname=$dbname;charset=$dbcharset";
12. $dbconn = new PDO($dsn, $dbuser, $dbpassword);
13.
14. $data = new GridConnector($dbconn, "PDO");
15. $data->render_table("produksi", "id", "tahun,output");
16. ?>
Demikianlah pembahasan Grafik/Chart dan integrasinya dengan Grid dengan menggunakan
DHTMLX.
• Demo bisa dicoba di http://dhxapps.web.id/tutorial/5/index.php
• Source code dapat diperoleh di http://dhxapps.web.id/tutorial/5/grafik.zip
PENULIS
Manuppak L. Tobing
Masih Newbie dalam DHTMLX Programming
http://dhxapps.web.id – Membahas DHTMLX, PHP dan MySQL
Email: lumban.tobing.m@gmail.com

Belajar pemrograman berbasis web php dhtmlx part 5 grafik

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Similar to Belajar pemrograman berbasis web php dhtmlx part 5 grafik

Similar to Belajar pemrograman berbasis web php dhtmlx part 5 grafik (20)

Belajar pemrograman berbasis web php dhtmlx part 5 grafik