DHTMLX Suite menyediakan komponen untuk menampilkan grafik, yaitu dhtmlxChart. Ada 2 cara untuk menampilkan grafik dengan 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.
DHTMLXChart mendukung beberapa tipe grafik diantaranya:
1. Line
2. Bar
3. Area
4. Radar
5. Scatter
6. Pie
Kita akan menulis kode program pada 2 file terpisah, yaitu:
- index.html (untuk View)
- grid-chart.php (untuk controller Grid)
Database hanya menggunakan satu tabel produksi dengan field id,tahun,output (PERHATIAN: DHTMLX sangat menganjurkan primary key AUTOINCREMENT, dalam hal ini id). index.html ada pada bagian paling bawah tulisan ini
grid-chart.php
<?php
include ("codebase/connector/grid_connector.php");
include ("codebase/connector/db_pdo.php");
$dbtype = "mysql"; // mysql or pgsql
$dbhost = "127.0.0.1"; // database server
$dbname = "test"; // database name
$dbuser = "root"; // database user
$dbpassword = ""; // database password
$dbcharset = "utf8"; // database charset
$dsn = "mysql:host=$dbhost;dbname=$dbname;charset=$dbcharset"; //mysql or pgsql
$dbconn = new PDO($dsn, $dbuser, $dbpassword);
$data = new GridConnector($dbconn, "PDO");
$sql = "SELECT id,tahun,output FROM produksi";
$data->render_sql($sql, "id", "tahun,output");
?>
Adapun tampilan dari grid-chart.php ini saat dibuka dengan browser:
<rows> <row id="1"> <cell>2010</cell> <cell>40</cell> </row> <row id="2"> <cell>2011</cell> <cell>60</cell> </row> <row id="3"> <cell>2012</cell> <cell>50</cell> </row> <row id="4"> <cell>2013</cell> <cell>30</cell> </row> ... </rows>
Test Drive DHTMLX
Copy kode dibawah ini lalu paste ke Text Area kemudian klik Run
//Buat layout utama
var myLayout = new dhtmlXLayoutObject({
parent: "output",
pattern: "2U",
cells: [
{id: "a", text: "Grid"},
{id: "b", text: "Chart"}
]
});
//Grid dengan mengambil data dari database
var myGrid = myLayout.cells("a").attachGrid();
myGrid.setHeader("Tahun, Ouput");
myGrid.attachHeader("#text_filter,#select_filter");
myGrid.setColTypes("ro,ro");
myGrid.init();
//Chart pada layout kanan (b)
var myChart = myLayout.cells("b").attachChart({
view: "bar", //bar,pie,line
color:
function(obj) {
if (obj.data1 < 40) {
return "red";
} else return "#66ccff";
},
gradient: "3d",
value: "#data1#", //#data0# -> kolom pertama grid
label: "#data0#, #data1#", //#data1# -> kolom kedua grid
tooltip: "#data0#, #data1#", //info ketika mouse over
width: 30,
origin: 0,
yAxis: {
title: "Output",
start: 0,
step: 20,
end: 200
},
xAxis: {
title: "Tahun",
template: "#data0#"
}
});
//Integrasi Grid & Chart
function refresh_func() {
myChart.clearAll();
myChart.parse(myGrid, "dhtmlxgrid");
}
//Event saat memuat data ke grid & perubahan(filter)
myGrid.load("../tutorial/grid-chart.php", refresh_func);
myGrid.attachEvent("onGridReconstructed", refresh_func);
Text Area
Output
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<title>Grafik/Chart</title>
<script src="/codebase/dhtmlx.js"></script>
<link rel="stylesheet" href="/codebase/dhtmlx.css"></link>
<style type="text/css">
html,body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
}
</style>
</head>
<body>
<div id="output" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
//Buat layout utama
var myLayout = new dhtmlXLayoutObject({
parent: "output",
pattern: "2U",
cells: [
{id: "a", text: "Grid"},
{id: "b", text: "Chart"}
]
});
//Grid dengan mengambil data dari database
var myGrid = myLayout.cells("a").attachGrid();
myGrid.setHeader("Tahun, Ouput");
myGrid.attachHeader("#text_filter,#select_filter");
myGrid.setColTypes("ro,ro");
myGrid.init();
//Chart pada layout kanan (b)
var myChart = myLayout.cells("b").attachChart({
view: "bar", //bar,pie,line
color:
function(obj) {
if (obj.data1 < 40) {
return "red";
} else return "#66ccff";
},
gradient: "3d",
value: "#data1#", //#data0# -> kolom pertama grid
label: "#data0#, #data1#", //#data1# -> kolom kedua grid
tooltip: "#data0#, #data1#", //info ketika mouse over
width: 30,
origin: 0,
yAxis: {
title: "Output",
start: 0,
step: 20,
end: 200
},
xAxis: {
title: "Tahun",
template: "#data0#"
}
});
//Integrasi Grid & Chart
function refresh_func() {
myChart.clearAll();
myChart.parse(myGrid, "dhtmlxgrid");
}
//Event saat memuat data ke grid & perubahan(filter)
myGrid.load("../tutorial/grid-chart.php", refresh_func);
myGrid.attachEvent("onGridReconstructed", refresh_func);
</script>
</body>
</html>
