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:

  1. index.html (untuk View)
  2. 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
 

 

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

Comments  

Tobing
0 #2 Tobing 2017-04-16 01:55
Quoting Dusty:
I needed to thank you for this excellent read!!
I definitely enjoying every small touch of it I have
you bookmarked to have a look at new material
you post.

Visit my web-site: shadow fight 2 hack ios (Dusty: Darkhacks24.com/shadow-fight-2-hack/)


Thanks bro...most of my articles using Bahasa Indonesia.I am very happy if you understand and know how to read my code because I just starting coding this dhtmlx.

Your website about game is it, I just sometimes playing vainglory he he he
Quote
Dusty
0 #1 Dusty 2017-04-15 14:58
I needed to thank you for this excellent read!!
I definitely enjoying every small touch of it I have
you bookmarked to have a look at new material
you post.

Visit my web-site: shadow fight 2 hack ios (Dusty: Darkhacks24.com/shadow-fight-2-hack/)
Quote

Add comment


Security code
Refresh

Tutorial DHTMLX

29 Agu 2015 07:33
1. Konstruksi DHTMLX
30 Agu 2015 07:33
2. CRUD sederhana
01 Sep 2015 10:08
3. Toko Online
02 Sep 2015 10:11
4. Galeri Gambar
03 Sep 2015 05:30
5. Grafik
04 Sep 2015 07:33
6. Export Grid

Visitor

Indonesia 78.0% Indonesia
United States 10.2% USA
Singapore 2.8% Singapore

Total:

53

Countries
002536
Today: 2
This Week: 32
This Month: 134