Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 107,511

HOME > PHP > PHP Forum > ถามหน่อยครับ ผมจะทำให้กดปุ่มให้ขึ้น+1 เเล้วเเสดงออกเป็นกราฟทำยังไงครับ





 

ถามหน่อยครับ ผมจะทำให้กดปุ่มให้ขึ้น+1 เเล้วเเสดงออกเป็นกราฟทำยังไงครับ

 



Topic : 133659



โพสกระทู้ ( 20 )
บทความ ( 0 )



สถานะออฟไลน์




ถามหน่อยครับ ผมจะทำให้กดปุ่มให้ขึ้น+1 เเล้วเเสดงออกเป็นกราฟทำยังไครับ

สมมุติ ผมกดปุ่ม+1 กราฟจะขึ้น 1 ถ้าผมกดปุ่ม-1 กราฟจะเป็น0 ถ้าผมกดปุ่ม-1อีกที กราฟจะเป็น -1 เป็นกราฟเส้นนะครับ

ต้องเขียนปนะมาณไหนครับเเนะนำหน่อยครับ



Tag : PHP









ประวัติการแก้ไข
2019-05-28 18:01:26
2019-05-28 19:33:58
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-05-28 15:41:56 By : 1768876979829526 View : 191 Reply : 9
 

 

No. 1



โพสกระทู้ ( 7,844 )
บทความ ( 1 )



สถานะออฟไลน์


คำค้น html canvas + javascript graphic library






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-05-28 16:16:42 By : Chaidhanan
 


 

No. 2

Guest


ตาม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-05-28 22:57:26 By : เอ
 

 

No. 3



โพสกระทู้ ( 20 )
บทความ ( 0 )



สถานะออฟไลน์


Code (PHP)
<script>
function addnum(){
document.all.txtint.value++;
}
function delnum(){
document.all.txtint.value--;
}
</script>
<input name="txtint" type="button" id="txtint1" value="0"/>
<br>
<a href="javascript:void(0);" onclick="addnum()"> ++ </a>
<br>
<a href="javascript:void(0);" onclick="delnum()"> - - </a>




Code (PHP)
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 1,      1],
          [ 2,      2],
          [ 3,      3],
          [ 4,      2],
          [ 5,      1],
          [ 6,      0]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 10},
          vAxis: {title: 'Weight', minValue: -5, maxValue: 5},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>



มีโค้ดบวกเลขกับกราฟ เเบบนี้ใช้ได้ไหมครับ

เเต่ผมจะเอามารวมกันยังไงครับ ให้กดที่บวกเลขเเล้วขึ้นที่กราฟ


ประวัติการแก้ไข
2019-05-29 08:42:24
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-05-29 08:42:00 By : 1768876979829526
 


 

No. 4



โพสกระทู้ ( 392 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

อันนี้ผมเขียนขึ้นมาเล่น ๆคับ ลองเอาไปรันดู

Code (PHP)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ChartJs</title>

  </head>
  <body>
  <div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="myChart" ></canvas> 
    <form name="frm" method="get" action="<?php echo $_SERVER['SCRIPT_NAME'];?>">
    <input type="text" id="txtint1" value="<?php echo $_GET["txtint"];?>" disabled/>
    <input name="txtint" type="hidden" id="txtint1" value="<?php echo $_GET["txtint"];?>"/>
<br>
<input type="submit" href="javascript:void(0);" onclick="addnum()" value="+1">
<br>
<input type="submit" href="javascript:void(0);" onclick="delnum()" value="-1"> 
    </form>
  </div>
  <script>
function addnum(){
document.all.txtint.value++;
}
function delnum(){
document.all.txtint.value--;
}
</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
	<script>
        var value1 = document.getElementById("txtint1").value;
		var ctx = document.getElementById("myChart");
		var myChart = new Chart(ctx, {
			type: 'line',
			data: {
                /*ค่าในแนวนอน*/
				labels: ["HTML", "PHP", "JAVA", "Python", "C#", "Dajago"],
				datasets: [{
					label: '# of Votes',
					data: [value1, 19, 3, 5, 2, 3],
					backgroundColor: [
						'rgba(255, 99, 132, 0.2)',
					],
					borderColor: [
						'rgba(255,99,132,1)',
					],
					borderWidth: 1
				}]
			},
			options: {
				scales: {
					yAxes: [{
						ticks: {
							beginAtZero:true
						}
					}]
				}
			}
		});
		</script>	
  </body>
</html>



ประวัติการแก้ไข
2019-05-30 10:08:46
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-05-30 10:07:04 By : nobetaking
 


 

No. 5

Guest


ตอบความคิดเห็นที่ : 4 เขียนโดย : nobetaking เมื่อวันที่ 2019-05-30 10:07:04
รายละเอียดของการตอบ ::
... ขอบคุณครับเดียวลองดูครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-05-30 18:16:05 By : เอ
 


 

No. 6



โพสกระทู้ ( 20 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 4 เขียนโดย : nobetaking เมื่อวันที่ 2019-05-30 10:07:04
รายละเอียดของการตอบ ::
ไม่ได้ครับ


คือเริ่มมากราฟต้องไม่ขึ้นเส้นนะครับตามรูป
1


เเล้วพอเรากดปุ่ม+1ให้กราฟมันขึ้นตามที่เรากดครับ ประมาณเเบบนี้ครับ
เเต่ถ้ากด-1 กราฟก็ลดลงทีละ1ตามที่กดครับ
2


เเบบนี้พอจะได้ไหมครับ


ประวัติการแก้ไข
2019-05-31 11:13:37
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-05-31 11:12:53 By : 1768876979829526
 


 

No. 7

Guest


มีใครพอจะมีเเนวทางไหนครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-06-01 19:39:21 By : เเ
 


 

No. 8



โพสกระทู้ ( 7,844 )
บทความ ( 1 )



สถานะออฟไลน์


คำค้น html canvas + javascript graphic library

ลองหาอ่านดูก่อนไหมครับ มันตรง concept ที่ต้องการ

กราฟคือการวาดรูป เมือวาดเป็น ก็จะได้รู้ว่าจะกำหนดมุมองศายังไงต่อไป

ตัวอย่างมันต้องใช้ความรู้เรื่อง การเชียนรูป ไปอ่าน document จากต้นฉบับเลย จะได้รู้เองทำเองได้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-06-01 19:49:33 By : Chaidhanan
 


 

No. 9



โพสกระทู้ ( 392 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ก็สร้างเป็นฐานข้อมูลแล้วดึงออกมาก็ได้ครับ
อันนี้ผมลองทำได้ผลแล้ว
1.สร้างฐานข้อมูล

Code (SQL)
CREATE TABLE `chart` (
  `id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `score` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `chart` (`id`, `title`, `score`) VALUES
(1, 'A', 5000),
(2, 'B', 3500),
(3, 'C', 2000),
(4, 'D', 4000);

ALTER TABLE `chart`
  ADD PRIMARY KEY (`id`);


2.สร้างหน้า test.php
Code (PHP)
<?php
$servername = "*****";
$username = "******";
$password = "*****";
$dbname = "******";
	$conn = mysqli_connect($servername, $username, $password, $dbname);

	if (!$conn) {
		die("Connection failed: " . mysqli_connect_error());
	}

	$sql = "SELECT * FROM chart";
	$result = mysqli_query($conn, $sql);

	if (mysqli_num_rows($result) > 0) {

		while($row = mysqli_fetch_assoc($result)) {
			
			$labels[] = $row['title'];
			
			$data[] = $row['score'];
		}
	}

?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ChartJs</title>

  </head>
  
  <body>
  
  <div class="chart-container" style="position: relative; height:40vh; width:80vw">
	<canvas id="myChart"></canvas>
  <table width="100" border="1">
  <tr>
    <td>
  <form action="../test/test2.php" method="POST">
   <input type="hidden" name="add" value="1">
   <button type="submit">+1</button>
  </form>
    </td>
    <td>
    <form action="../test/test2.php" method="POST">
   <input type="hidden" name="add" value="2">
   <button type="submit">-1</button>
  </form>
    </td>
  </tr>
  </table>
  </div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
	<script>
	var ctx = document.getElementById("myChart");
	var myChart = new Chart(ctx, {
		//type: 'bar',
		//type: 'line',
		type: 'line',
		data: {
			labels: <?=json_encode($labels)?>,
			datasets: [{
				label: 'Report',
				data: <?=json_encode($data, JSON_NUMERIC_CHECK);?>,
				backgroundColor: [
					'rgba(255, 99, 132, 0.2)',
				],
				borderColor: [
					'rgba(255,99,132,1)',
				],
				borderWidth: 0
			}]
		},
		options: {
			scales: {
				yAxes: [{
					ticks: {
						beginAtZero:true
					}
				}]
			},
			 responsive: true,
			 title: {
				display: true,
				text: 'ตัวอย่างการใช้งาน Chart Js'
			}
		}
	});
	</script>
		
  </body>
</html>


3.สร้างหน้า test2.php

Code (PHP)
<?php
  $servername = "*******";
  $username = "*************";
  $password = "**********";
  $dbname = "**********";
      $conn = mysqli_connect($servername, $username, $password, $dbname);
  
      if (!$conn) {
          die("Connection failed: " . mysqli_connect_error());
      }

  if($_POST['add']=='1'){
    $sql_new = "SELECT * FROM chart ORDER BY id DESC LIMIT 0,1";
    $query_new = mysqli_query($conn,$sql_new)or die ($sql_new);
    $result_new = mysqli_fetch_array($query_new);
    $score = $result_new['score']+1;
    $title = $result_new['title']+1;
    if($query_new==TRUE){
      $sql_add = "INSERT INTO chart (title,score)VALUES('$title','$score')";
      $objQuery = mysqli_query($conn,$sql_add) or die ($sql_add);
      header("Location: ../test/test.php");
    }
    
  }else if($_POST['add']=='2'){
    $sql_new = "SELECT * FROM chart ORDER BY id DESC LIMIT 0,1";
    $query_new = mysqli_query($conn,$sql_new)or die ($sql_new);
    $result_new = mysqli_fetch_array($query_new);
    $score = $result_new['score']-1;
    $title = $result_new['title']+1;
    if($query_new==TRUE){
      $sql_add = "INSERT INTO chart(title,score)VALUES('$title','$score')";
      $objQuery = mysqli_query($conn,$sql_add) or die ($sql_add);
      header("Location: ../test/test.php");
    }
  }
  
  ?>


ผลลัพธ์

กราฟ

ลองนำไปปรับดูครับ พอเป็นแนวทาง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-06-06 15:51:22 By : nobetaking
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ถามหน่อยครับ ผมจะทำให้กดปุ่มให้ขึ้น+1 เเล้วเเสดงออกเป็นกราฟทำยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่