grafik chart javascript js php dhtmlx

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

grafik line/line chart

2. Bar

grafik bar/bar chat

3. Area

grafik area/area chart

4. Radar

grafik radar/radar chart

5. Scatter

grafik scatter/scatter chart

6. Pie

grafik pie/pie chart

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 Grafik pada DHTMLX Click to collapse

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

Isi lengkap dari file index.html untuk menampilkan seperti di atas adalah:

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

DEMO

SOURCE