การใช้ Ajax กับ JPgraph ครับ
หน้า Index ส่ง Array ไป โดยใช้ Ajax ไปให้ Server Server สร้าง กราฟ แล้วส่งค่ากลับมาแสดงที่หน้า Index อ่ะครับ เป็นไปได้หรือเปล่ามีข้อแนะนำหรือเปล่าครับ
จากที่ลองทำครับ ได้ผลคือ มันมีการส่งค่าไป แต่ว่าไม่สามารถส่งกราฟที่สร้างเสร็จแล้วมาแสดงได้ครับ ดูโค้ดให้หน่อยนะครับ
โค้ด Ajax ครับ
var qs = Array();
for(var i = 0 ; i < tds.length ; i++ )
{
qs[i] = tds[i].innerHTML;
}
var query = qs.join( ',' );
var req = Inint_AJAX();
req.onreadystatechange = function () {
if ( req.readyState == 4 && req.status == 200 ) {
//alert(query+"===>"+ req.responseText );
document.getElementById("test").innerHTML = req.responseText;
};
};
req.open( "GET", "preview_grp.php?data=" + query , true );
req.send( null );
return false;
โค้ด กราฟ ครับ
<?php
include ("Graph/jpgraph.php");
include ("Graph/jpgraph_line.php");
$num = $_GET['data'] ;
$ydata = explode(" ,",$num);
$ydata2 = array(1,19,15,7,22,14,5,9,21,19);
// Create the graph. These two calls are always required
$graph = new Graph(300,200,"auto");
$graph->SetScale("textlin",0,0);
$graph->yaxis->scale->SetGrace(20);
// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot2=new LinePlot($ydata2);
// Add the plot to the graph
$graph->Add($lineplot);
$graph->Add($lineplot2);
$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Example 4");
$graph->xaxis->title->Set("X-title");
$graph->yaxis->title->Set("Y-title");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);
$lineplot->SetColor("blue");
$lineplot->SetWeight(2);
$lineplot2->SetColor("orange");
$lineplot2->SetWeight(2);
$graph->yaxis->SetColor("red");
$graph->yaxis->SetWeight(2);
$graph->SetShadow();
// Display the graph
$graph->Stroke();
?>
ค่าที่ได้มันแสดงเป็นแบบนี้อ่ะครับ งงเลย ?PNG
ช่วยด้วยครับไม่แน่ใจเหมือนกัน ว่าวิธีนี้มันได้หรือเปล่า หรือ เขียนไม่ออกเอง ก็ไม่รู้ครับ อิอิ
จากที่ลองทำครับ ได้ผลคือ มันมีการส่งค่าไป แต่ว่าไม่สามารถส่งกราฟที่สร้างเสร็จแล้วมาแสดงได้ครับ ดูโค้ดให้หน่อยนะครับ
โค้ด Ajax ครับ
var qs = Array();
for(var i = 0 ; i < tds.length ; i++ )
{
qs[i] = tds[i].innerHTML;
}
var query = qs.join( ',' );
var req = Inint_AJAX();
req.onreadystatechange = function () {
if ( req.readyState == 4 && req.status == 200 ) {
//alert(query+"===>"+ req.responseText );
document.getElementById("test").innerHTML = req.responseText;
};
};
req.open( "GET", "preview_grp.php?data=" + query , true );
req.send( null );
return false;
โค้ด กราฟ ครับ
<?php
include ("Graph/jpgraph.php");
include ("Graph/jpgraph_line.php");
$num = $_GET['data'] ;
$ydata = explode(" ,",$num);
$ydata2 = array(1,19,15,7,22,14,5,9,21,19);
// Create the graph. These two calls are always required
$graph = new Graph(300,200,"auto");
$graph->SetScale("textlin",0,0);
$graph->yaxis->scale->SetGrace(20);
// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot2=new LinePlot($ydata2);
// Add the plot to the graph
$graph->Add($lineplot);
$graph->Add($lineplot2);
$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Example 4");
$graph->xaxis->title->Set("X-title");
$graph->yaxis->title->Set("Y-title");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);
$lineplot->SetColor("blue");
$lineplot->SetWeight(2);
$lineplot2->SetColor("orange");
$lineplot2->SetWeight(2);
$graph->yaxis->SetColor("red");
$graph->yaxis->SetWeight(2);
$graph->SetShadow();
// Display the graph
$graph->Stroke();
?>
ค่าที่ได้มันแสดงเป็นแบบนี้อ่ะครับ งงเลย ?PNG
ช่วยด้วยครับไม่แน่ใจเหมือนกัน ว่าวิธีนี้มันได้หรือเปล่า หรือ เขียนไม่ออกเอง ก็ไม่รู้ครับ อิอิ
ไม่รู้ว่า graph ให้ผลลัพท์เป็นอะไรนะสิ ถ้าให้เป็น รูปภาพ ก็อาจส่งกลับเป็น url ของ รูปภาพ graph ก็ได้ แต่คงต้อง save graph mได้เก็บไว้ก่อน ในความเป็นจริงยังมีอีกหลายวิครับ เช่น
<img src="graph.php?id=xabaaklaa" />
เป็นการสร้างรูปด่วย php ครับ สำหรับตัวอย่างก็เช่นพวกโค้ด antispam ครับ ลองศึกษาจาก GCMS ดู
<img src="grap.php"/> จะแสดงรูปกราฟ ได้ครับ
แต่ผมจะต้องทำไงต่อ เพราะผมส่งค่าไป ให้ server ได้แล้ว อ่ะครับ แต่จะทำไง
ที่จะให้ส่วน server ที่สร้างกราฟ นั้น ส่งค่ากับมาแสดงได้ อ่ะครับ ยัง งง ไม่ค่อยเข้าใจครับ
ช่วยแนะนำหน่อยนะครับ ขอบคุณครับ
ผลอยากให้การทำงานพอคลิ้กส่งค่า กราฟแสดงได้เลย ทำงานเป็น Ajax อ่ะครับ
แต่เดี้ยวลองก่อนนะครับ ขอบคุณครับ
img ก็ refresh ได้
ง่ายกว่าด้วย แค่กำหนด src ให้มันใหม่ มันก็ refresh แล้ว โดยไม่ต้องโหลดใหม่ทั้งหน้า งานนี้ไม่ได้ใช้ AJAX เลย ใช้แค่ Javascript
บอกไม่มีผิดเลย ขอบคุณมากๆๆครับ ^^