[trick] menampilkan grafik dengan spidometer motor menggunakan php mysql

Bismillahirrahmanirrahim

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

PHP MYSQL. langsung saja >>

siapkan databases >>

speed

lalu masuk ke kodingnya y >>


<?php
mysql_connect("localhost","root","12345");
mysql_select_db("grafik");
$data=mysql_fetch_array(mysql_query("select sum(data)/3 as jml from car"));
?>

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</div>

<script>

function createGauge1() {
$("#gauge1").kendoRadialGauge({

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

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

$(document).ready(function() {
createGauge1();
});

</script>

<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;
}

</style>
</div>

</body>
</html>

dan hasilnya seperti ini >>

index

selesai ..

download source code >>

http://www.4shared.com/zip/AGwzA-GZ/car.html

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: