Belajar pemrograman berbasis web php dhtmlx part 5 grafik
7
Belajar Pemrograman Web menggunakan DHTMLX Part 5 “Grafik / Chart” (SOURCE CODE)
-
Upload
tobing-manuppak -
Category
Technology
-
view
165 -
download
4
Transcript of 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.html1. <!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 utama20. 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 database30. 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,line39. color: "#66ccff",40. gradient: "3d",41. value: "#data1#", //#data0# -> kolom pertama grid 42. label: "#data0#, #data1#", //#data1# -> kolom kedua grid43. tooltip: "#data0#, #data1#", //info ketika mouse over44. width: 30,45. origin: 0,46. yAxis: {47. title: "Output",48. start: 0,49. step: 20,50. end: 20051. },52. xAxis: {53. title: "Tahun",54. template: "#data0#"55. }56. });57.58. //Integrasi Grid & Chart59. 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
TAMPILAN GRAFIK
BAR
PIE
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.php1. <?php2. 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://tobingvps.com/tutorial/5/index.php
• Source code dapat diperoleh di http://tobingvps.com/tutorial/5/grafik.zip
PENULIS
Manuppak L. Tobing
Masih Newbie dalam DHTMLX Programming
http://tobingvps.com – Membahas DHTMLX, PHP dan MySQL
Email: [email protected]
