|
 |
| |
ปัญหาสร้างกราฟ Javascript โดยใช้ php ดึงข้อมูลจาก database แสดงไม่ครบ |
| |
 |
|
|
 |
 |
|
สวัสดีครับผมมีปัญหาการแสดงข้อมูลของกราฟ Javascript ครับ
(รูปบน)จะเห็นว่ากราฟแสดงออกมาเพียง 1 แท่งครับ
(รูปบน)อันนี้เป็น database ที่ผมจะการเรียกออกมาแสดงใน javascript ครับใช้ php query mysql
ข้างล่างนี่เป็น php ครับแบบทั้งไฟล์
Code (PHP)
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<?php // content="text/plain; charset=utf-8"
$objConnect = mysql_connect("localhost","root","") or die("Error Connect to Database");
$objDB = mysql_select_db("decc");
mysql_query("SET NAMES utf8", $objConnect);
$strSQL = "SELECT * FROM tblsoftwareprice ORDER BY Decc_SoftwareID desc";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<?php
while($objResult = mysql_fetch_array($objQuery))
{
?>
<script type="text/javascript" src="fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts-suite-xt/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "1200",
"height": "800",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Total Price Software",
"subCaption": "D E C C",
"xAxisName": "Software Name",
"yAxisName": "Bath",
"theme": "fint"
},
"data": [
{
"label": "<?=$objResult["Decc_Sname"];?>",
"value": "<?=$objResult["Decc_Totalprice"];?>"
},
]
}
});
revenueChart.render();
})
</script>
<?php } ?>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>
อันนี้แค่ javascript เท่านั้น จากข้างบนครับ
Code (JavaScript)
<script type="text/javascript" src="fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts-suite-xt/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "1200",
"height": "800",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Total Price Software",
"subCaption": "D E C C",
"xAxisName": "Software Name",
"yAxisName": "Bath",
"theme": "fint"
},
"data": [
{
"label": "<?=$objResult["Decc_Sname"];?>",
"value": "<?=$objResult["Decc_Totalprice"];?>"
},
]
}
});
revenueChart.render();
})
</script>
สิ่งที่ผมต้องการคือให้กราฟแสดงข้อมูลใน database ทั้งหมดอ่าครับ ซึ่งตอนนี้มันโชว์แค่อันเดียว ผมไม่ค่อยเก่งเท่าไหร่ครับ เลยอยากขอความกรุณาพี่ๆช่วยบอกทีว่าผมใส่โค้ดอะไรผิดพลาดไปอ่าครับ เศร้าแก้มา 3 วันแล้วไม่ออกสักที
ก่อนหน้านี้ผมทำ jpgraph ครับทำสำเร็จไม่พบปัญหา แต่ภาพมันไม่สวยครับ แล้วก็ไม่มีชีวิต(เอาแมาส์ไปจี้แล้วมันไม่หือไม่อือ มันเป็นแค่รูปภาพ) แต่มัน dynamics ตาม database ครับมีการเพิ่มข้อมูลอะไรลงไปมันจะปรับให้อัตโนมัติ ถ้าท่านใดอยากได้วิธีทำ jpgraph คุยกับผมได้ครับผมพอจะแนะนำได้ แต่ javascript graph นี่ต้องขอให้พี่ๆใน ThaiCreate ช่วยครับ ขอขอบพระคุณทุกท่านล่างหน้าครับ ^^
หากท่านใดที่สนใจอยากลองทำ FusionCharts ลองไปดาว์นโหลดไฟล์ include มาได้จากที่นี่นะครับ
Tag : PHP, MySQL, JavaScript, CakePHP
|
ประวัติการแก้ไข
2015-05-14 11:06:08
2015-05-14 11:07:23
2015-05-14 14:58:19
2015-05-15 13:45:36
|
 |
 |
 |
 |
| Date :
2015-05-14 10:57:00 |
By :
damnern007 |
View :
5427 |
Reply :
3 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
|
ทำได้แล้วครับ Javascript Dynamic Database Graph ออกมาสวยฟรุ๊งฟริ๊งมากครับ
ผมใช้วิธีทำให้ php สร้างข้อความให้เหมือน array ที่กราฟต้องการครับ แล้วก็ยัด php เข้าไปใน js เลยครับ ตามโค้ดด้านล่างครับ
Code (PHP)
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts-suite-xt/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "1600",
"height": "800",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Total Price Software",
"subCaption": "D E C C",
"xAxisName": "Software Name",
"yAxisName": "Bath",
"theme": "fint"
},
"data": [
<?php
$objConnect = mysql_connect("localhost","root","") or die("Error Connect to Database");
$objDB = mysql_select_db("decc");
mysql_query("SET NAMES utf8", $objConnect);
$strSQL = "SELECT * FROM tblsoftwareprice ORDER BY Decc_SoftwareID desc";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<?php
while($objResult = mysql_fetch_array($objQuery))
{
?>
{"label": "<?=$objResult["Decc_Sname"]?>" , "value": "<?=$objResult["Decc_Totalprice"]?>"},
<?php
}
?>
]
}
});
revenueChart.render();
})
</script>
</head>
<body>
<div id="chartContainer" style="height: 700px; width: 80%;">FusionCharts XT will load here!</div>
</body>
</html>
รูปล่างเป็นหน้าตา Output ที่ php แสดงให้เหมือน array ครับ (ถ้าหาข้อมูลตามเว็ปนอกเขาจะทำให้เป็น XML ครับ แต่ผมว่า php ง่ายกว่านะ^^)
โค้ดข้างล่างเป็นโค้ด php ที่แทรกลงไปใน js ครับ
Code (PHP)
<?php
$objConnect = mysql_connect("localhost","root","") or die("Error Connect to Database");
$objDB = mysql_select_db("decc");
mysql_query("SET NAMES utf8", $objConnect);
$strSQL = "SELECT * FROM tblsoftwareprice ORDER BY Decc_SoftwareID desc";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<?php
while($objResult = mysql_fetch_array($objQuery))
{
?>
{"label": "<?=$objResult["Decc_Sname"]?>" , "value": "<?=$objResult["Decc_Totalprice"]?>"},
<?php
}
?>
ขอบพระคุณท่านแอดมินมากครับที่ช่วยแนะนำวิธีให้ผม
|
ประวัติการแก้ไข
2015-05-15 13:30:04
2015-05-15 13:41:28
2015-05-15 14:20:26
2015-05-15 14:20:57
2015-05-15 14:22:23
| |
|
|
| |
| Date :
2015-05-15 11:06:56 |
By :
damnern007 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
 จัดไปครับ
|
| |
|
|
| |
| Date :
2015-05-15 13:15:41 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
