[trick] Membuat Grafik dengan Php Jquery KendoUI

bismillah .

langung saja seiapkan database >

lagi

masukan kodenya >

1.index.html


<!DOCTYPE html>
<html>
<head>
 <title>Date axis</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>

<script>

 function createChart() {

 var internetUsers = [ {
 "country": "United States",
 "year": "2005",
 "value": 100
 }, {
 "country": "United States",
 "year": "2006",
 "value": 200
 }];
 $("#chart").kendoChart({

 dataSource: {
 transport: {
 read: "proses.php"
 },
 schema: {
 data: "data"
 }
 },

 series: [{
 type: "column",
 field: "Jumlah",
 name: "Produk",
 aggregate: "avg"
 }],
 categoryAxis: {
 baseUnit: "weeks",

 field: "Produk",

 majorGridLines: {
 visible: false
 }
 },
 valueAxis: {
 line: {
 visible: false
 }
 }
 });
 }

$(document).ready(function() {
 setTimeout(function() {
 // Initialize the chart with a delay to make sure
 // the initial animation is visible
 createChart();

$("#example").bind("kendo:skinChange", function(e) {
 createChart();
 });
 }, 400);

$(".configuration-horizontal").bind("change", refresh);
 });

function refresh() {
 var chart = $("#chart").data("kendoChart"),
 series = chart.options.series,
 categoryAxis = chart.options.categoryAxis,
 baseUnitInputs = $("input:radio[name=baseUnit]"),
 aggregateInputs = $("input:radio[name=aggregate]");

for (var i = 0, length = series.length; i < length; i++) {
 series[i].aggregate = aggregateInputs.filter(":checked").val();
 };

categoryAxis.baseUnit = baseUnitInputs.filter(":checked").val();

chart.refresh();
 }
 </script>

 </head>
<body>
 <a class="offline-button" href="../index.html">Back</a>

 <div id="example" class="k-content">
 <div class="chart-wrapper">
 <div id="chart"></div>
 </div>
 </div>

 </div>

</body>
</html>

2. jsonnya


<?php
mysql_connect("localhost", "root", "");
mysql_select_db("produk");

$arr = array();
$rs = mysql_query("SELECT * FROM t_produk1");

while($obj = mysql_fetch_object($rs)) {
 $arr[] = $obj;
}
header("Content-type: application/json");

echo "{\"data\":" .json_encode($arr). "}";
?>

hasilnya kira-kira seperti ini >

lagi2

download kodingan disini

Leave a comment

1 Comment

  1. htc

     /  05/08/2013

    Mantaps suratap gan… kendo ui…

    Reply

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: