[trick] menampilkan grafik dengan spidometer motor menggunakan php mysql


OK Kali Ini Gw coba post teknik menampilkan grafik dengan spidometer motor dengan menggunakan

PHP MYSQL. langsung saja >>

siapkan databases >>


lalu masuk ke kodingnya y >>

$data=mysql_fetch_array(mysql_query("select sum(data)/3 as jml from car"));

<!DOCTYPE html>
<title>Basic usage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >

<link href="examples-offline.css" rel="stylesheet">
<link href="kendo.dataviz.min.css" rel="stylesheet">

<script src="jquery.min.js"></script>
<script src="kendo.dataviz.min.js"></script>
<script src="console.js"></script>
<a href="../index.html">Back</a>
<div id="example">
<div id="gauge-container1">
<div id="gauge1"></div>

<input id="gauge-value1" value="<?php echo $data['jml'] ;?>" disabled>


function createGauge1() {

pointer: {
value: $("#gauge-value1").val()

scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180

$(document).ready(function() {


<style scoped>
#gauge-container1 {
background: transparent url("gauge-container-partial.png") no-repeat 50% 50%;
width: 386px;
height: 386px;
text-align: center;
margin: 0 auto 30px auto;

#gauge1 {
width: 350px;
height: 300px;
margin: 0 auto;

#gauge-container1 .k-slider {
margin-top: -11px;
width: 140px;



dan hasilnya seperti ini >>


selesai ..

download source code >>


Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: