Merhaba arkadaşlar;
Bu makalede de extjs 4 ile birlikte gelen chart nesnelerinin kullanımı göstericem.
Göstermekten kastım nesnelerin özellikleri değil.Onları zaten dökümantasyondan okuyabilirsin.Hem buraya yazmanın da bir anlamı yok.
Biz daha çok geliştirme kısmıyla ilgileniyor olucaz.Şimdilik getdata.php ile veritabanından çektiğimiz datasetleri json veya xml formatında okumak için kullanıcaz.
Getdata.php
<?php
class DB {
function GetDatasetAsJSON() {
$servername = ‘’;
$username = '';
$password = '';
$connectionID = mssql_connect($servername, $username, $password);
mssql_select_db("");
$Query="DECLARE @totalvote INT";
$Query.=" SET @totalvote=(SELECT SUM(VoteCount) FROM SurveyResults) ";
$Query.="SELECT AnswerText,VoteCount,(VoteCount*100)/@totalvote AS [Percent] FROM SurveyResults";
$result = mssql_query($Query);
$rows = array();
while ($row = mssql_fetch_assoc($result)) {
$rows[] = $row;
}
mssql_close($connectionID);
return json_encode($rows);
}
}
$db = new DB();
print '{
"Result":' . $db->GetDatasetAsJSON() . '}';
unset($db);
?>
Aşağıdakiler için birşeyler yazmaya gerek varmı bilemiyorum ?
index.php
<!DOCTYPE html>
<html>
<head>
<title>extjs chart php anket sonuç gösterimi</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="extjs dersleri,extjs örnekleri,extjs geliştirme" />
<meta name="keywords" content="ismail kocacan,extjs with php,extjs charts,extjs poll,extjs anket,yazılımcı bozuntusu" />
<link href="../extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../extjs/ext-all.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(function () {
var storeResults = Ext.create('Ext.data.JsonStore', {
fields: [
{ name: 'Percent', type: 'float' },
{ name: 'AnswerText', type: 'String'}],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'getdata.php',
reader: {
type: 'json',
root: 'Result'
}
}
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 350,
animate: true,
store: storeResults,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'Percent',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle('% :' + storeItem.get('Percent'));
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'AnswerText',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
});
</script>
</head>
<body>
</body>
</html>
Demo : http://yazilimarge.com/ext/pollwithextchart/
Kaynak Kod
Kaynaklar :
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.chart.series.Pie
İsmail Kocacan (Yazılımcı Bozuntusu)
ismailkocacan at gmail com