jquery下统计图表的显示应用

jscharts.js图标有三种表现形式，pie、bar、line,具体可查看JS-Charts的demo

 

 

代码如下：

test.php:

<SCRIPT LANGUAGE=”JavaScript” src=”jquery.js”></SCRIPT>
<SCRIPT LANGUAGE=”JavaScript” src=”jscharts.js”></SCRIPT>

<form>
<input type=’button’ value=’统计’ id=”button”></input>
</form>

<SCRIPT LANGUAGE=”JavaScript”>
$(document).ready(function(){
$(“#button”).click(function(){
$.ajax({
url:”count.php“,
type:”get”,
data:”pid=1″,

success:function(data){
one_array=tmp=new Array();
one_array=data.split(“–”);
for(i=0;i<one_array.length;i++)
{
arr=one_array[i].split(“,”)
var a=[arr[0], parseInt(arr[1])];
tmp.push(a);
}
var colors = ['#FACC00', '#FB9900', '#FB6600', '#FB4800'];
var myChart = new JSChart(‘graph’, ‘pie’);
myChart.setDataArray(tmp);
myChart.colorizePie(colors);
myChart.setTitleColor(‘#FB9900′);
myChart.setPieUnitsColor(‘#9B9B9B’);
myChart.setPieValuesColor(‘#6A0000′);
myChart.draw();
}
});
});
});
</SCRIPT>

<div id=”graph”>Loading graph…</div>

 

count.php：

<?php
$pid = $_GET['pid'];

$con=mysql_connect(“localhost”,”root”,”123456″);
mysql_select_db(“test”,$con);
mysql_query(“set names ‘utf8′”);
$result=mysql_query(“select * from chart”);

$city_list=”";
while($query=mysql_fetch_array($result))
{
$city_list.=($query['display'].”,”.$query['count']).”–”;
}

$city_list=substr($city_list,0,-2);
echo ($city_list);
?>

 

sql如下：

– —————————-
– Table structure for `chart`
– —————————-
DROP TABLE IF EXISTS `chart`;
CREATE TABLE `chart` (
`display` varchar(20) character set utf8 NOT NULL,
`count` varchar(20) character set utf8 NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

– —————————-
– Records of chart
– —————————-
INSERT INTO `chart` VALUES (‘xxx’, ’50′);
INSERT INTO `chart` VALUES (‘yyy’, ’10′);
INSERT INTO `chart` VALUES (‘zzz’, ’100′);
INSERT INTO `chart` VALUES (‘kkk’, ’6′);