기록해! 정리해!

HTML -- 그래프 본문

Visual studio (PHP)

HTML -- 그래프

zsuling 2022. 6. 29. 15:34

06/29

 

º A_school 학생등록,  학생목록/수정 만들기 

  (list.php / form

º meta 태그

새로고침을 하고 링크로 이동하게끔 해줌

C_admin에 Refresh.php

1. IP 고정 방법

<html>
<meta http-equiv="refresh"
            content="0; url=http://127.0.0.1/index.php" />
</html>

2. 

<?
$host = $_SERVER['HTTP_HOST'];
$path = "http://".$host;
?>
<html>
<meta http-equiv="refresh"
            content="0; url=<?=$path?>/index.php" />
</html>

login_ok.php에는

<script> 
          alert('로그인 성공'); 
           location.href="<?=$path?>/C_admin/Refresh.php";
       </script>

 

º 관리자모드가 아닌데 리스트에 접근하려고 하면 접근오류 뜨게 하기

 

D_include에  login_check.php

<?
$host = $_SERVER['HTTP_HOST'];
$path = "http://".$host
if ($_SESSION["id"] != "admin" ) {
  Header("Location:$path/D_include/error.php");
  }
  ?>

D_include에  error.php

<div align=center>
    <br><br><br><br>
    <H1>접근오류</H1>
</div>

º 성적 결과 그래프

result.php

<? include $_SERVER["DOCUMENT_ROOT"]."/D_include/top.php" ?>

<section>
<br>
<div align="center">

<html>

  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script> 
  <script src="http://code.highcharts.com/modules/data.js"></script>     

<body>
<section>
<div align=center>
<?
$servername = "localhost" ;
$username = "root";
$password ="autoset";
$dbname="korea";

$conn = new mysqli($servername, $username, $password, $dbname ); 
$SQL = "select sname, round((kor+eng+math+hist)/4,0) as avgT from examtbl" ;
$result = $conn -> query($SQL);

?>
 <div id=body1>
	 <div id = hidden style="display:none"> 
	 <!-- 표는 숨겨준다.!!  -->
		 <table border=1  width=550  id='datatable' >
		
		   <tr><td> 학생 </td>  <td> 평균성적 </td> </tr> 
           <?  
           while( $row = $result -> fetch_assoc()) {
		   ?>
		   <tr><td> <?=$row["sname"] ?>   </td> <td> <?=$row["avgT"] ?> </td>  </tr>
		
		   <? 
		     }
		   ?>
		</table>
	</div>
</div>
<br>
<div id="container" style="width: 600px; height: 430px; margin: 0 auto;"></div>
<script language="JavaScript">
$(document).ready(function() { 
   var data = {
      table: 'datatable'
   };
   var chart = {
      type: 'column'
   };
   var title = {
      text: '2022년 학생 기말고사 성적'   
   };      
   var yAxis = {
      allowDecimals: false,
      title: {
         text: '100점 만점'
      }
   };
   var tooltip = {
      formatter: function () {
         return '<b>' + this.series.name + '</b><br/>' +
            this.point.y + ' ' + this.point.name.toLowerCase();
      }
   };
   var credits = {
      enabled: false
   };  
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.data = data;
   json.yAxis = yAxis;
   json.credits = credits;  
   json.tooltip = tooltip;  
   $('#container').highcharts(json);
});
</script>
</div>
</section>
</body>
</html>
</div>
<br>
</section>

<? include $_SERVER["DOCUMENT_ROOT"]."/D_include/bottom.php"?>

<tr><td> <?=$row["sname"] ?>   </td> <td> <?=$row["avgT"] ?> </td>  </tr> -- x축 y축

 

 tooltip : 풍선도움말

 

º 평균성적을 각 과목의 성적으로 바꿔보기

$conn = new mysqli($servername, $username, $password, $dbname ); 
$SQL = "select sname, kor, eng, math, hist, round((kor+eng+math+hist)/4,0) as avgT from examtbl order by sno desc " ;
$result = $conn -> query($SQL);

?>
 <div id=body1>
	 <div id = hidden style="display:none"> 
	 <!-- 표는 숨겨준다.!!  -->
		 <table border=1  width=550  id='datatable' >
		
		   <tr><td> 학생 </td>  <td> 국어 </td>
               <td> 영어 </td><td> 수학 </td> <td> 역사 </td> 
           </tr> 
           <?  
           while( $row = $result -> fetch_assoc()) {
		   ?>
		   <tr><td> <?=$row["sname"] ?> </td>
               <td> <?=$row["kor"] ?> </td>  
               <td> <?=$row["eng"] ?> </td> 
               <td> <?=$row["math"] ?> </td> 
               <td> <?=$row["hist"] ?> </td> 
           </tr>
		
		   <? 
		     }
		   ?>

º 학번 오름차순 정렬

$SQL = "select sname, kor, eng, math, hist, round((kor+eng+math+hist)/4,0) as avgT from examtbl order by sno asc " ;

 

<div id="container" style="width: 700px; height: 430px; margin: 0 auto;"></div>

 

var title = {
      text: '2022년 학생 기말고사 성적 (학번 오름차순 정렬)'   
   };      

 

º 빅데이터 원형그래프 만들기

전공학생과 비전공학생 비율

 

    <a href="<?=$path?>/B_big/result.php">수강과목비율</a> &emsp;&emsp; 

 

result.php

<? include  $_SERVER["DOCUMENT_ROOT"]."/D_include/top.php" ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">

        <section>
            <div align="center">
            <br><br>
            <div class="chart-div" align=center >
            <canvas id="pieChartCanvas" width="500px" height="370px"></canvas>
            </div>

                <br>
                <h2> 전공학생 과 비전공학생 비율 </h2>

                <?php
                   $conn = new mysqli("localhost","root","autoset","korea");

                    $sql = "select count(etc) as tc1 from board0628 where etc='전공학생'";
                    $result = $conn->query($sql);
                    $row1 = $result->fetch_assoc();

                    $sql = "select count(etc) as tc2  from board0628 where etc='비전공학생'";
                    $result = $conn->query($sql);
                    $row2 = $result->fetch_assoc();
                    
                    $p1 = $row1['tc1'];
                    $p2 = $row2['tc2'];
                         
                    $conn->close();
                ?>

            </div>
        </section>


        <script>
					window.onload = function () {
						pieChartDraw();
					}
					 var data_tbl = {
						  table: 'listtable'
					   };

					let pieChartData = {
						labels: ['전공학생', '비전공학생'],
						datasets: [{
							data: [<?=$p1?>,<?=$p2?>],
							backgroundColor: ['rgb(255, 255, 250)', 'rgb(255, 255, 64)']
						}] 
					};

					let pieChartDraw = function () {
						let ctx = document.getElementById('pieChartCanvas').getContext('2d');
						
						window.pieChart = new Chart(ctx, {
							type: 'pie',
							data: pieChartData,
							options: {
								responsive: false
							}
						});
					};

        </script>
<? include $_SERVER["DOCUMENT_ROOT"]."/D_include/bottom.php" ?>

º 몇명인지 찍어보기

let pieChartData = {
labels: ['전공학생(<?=$p1?>)', '비전공학생(<?=$p2?>)'],

º 원형그래프 만들기

 

우선 asp 중급, 자바초급 비율 늘리기 

inset.php에  $title_array=array('asp 중급','자바 초급','asp 중급','자바 초급', '자바 초급');

 

result.php

<? include  $_SERVER["DOCUMENT_ROOT"]."/D_include/top.php" ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">

        <section>
            <div align="center">
            <br><br>
            <div class="chart-div" align=center >
            <canvas id="pieChartCanvas" width="500px" height="370px"></canvas>
            </div>

                <br>
                <h2> 전산과 학생 수강과목 비율 </h2>

                <?php
                   $conn = new mysqli("localhost","root","autoset","korea");

                    $sql = "select count(title) as tc1 from board0628 where title='asp 중급'";
                    $result = $conn->query($sql);
                    $row1 = $result->fetch_assoc();

                    $sql = "select count(title) as tc2 from board0628 where title='자바 초급'";
                    $result = $conn->query($sql);
                    $row2 = $result->fetch_assoc();

                    $sql = "select count(title) as tc3 from board0628 where title='데이터베이스 튜닝'";
                    $result = $conn->query($sql);
                    $row3 = $result->fetch_assoc();

                    $sql = "select count(title) as tc4 from board0628 where title='전산 실무'";
                    $result = $conn->query($sql);
                    $row4 = $result->fetch_assoc();

                    $sql = "select count(title) as tc5 from board0628 where title='웹프로그램 고급'";
                    $result = $conn->query($sql);
                    $row5 = $result->fetch_assoc();

                    
                    $p1 = $row1['tc1'];
                    $p2 = $row2['tc2'];
                    $p3 = $row3['tc3'];
                    $p4 = $row4['tc4'];
                    $p5 = $row5['tc5'];
                         
                    $conn->close();
                ?>

            </div>
        </section>


        <script>
					window.onload = function () {
						pieChartDraw();
					}
					 var data_tbl = {
						  table: 'listtable'
					   };

					let pieChartData = {
						labels: ['asp 중급(<?=$p1?>)', '자바 초급(<?=$p2?>)','데이터베이스 튜닝(<?=$p3?>)','전산 실무(<?=$p4?>)','웹프로그램 고급(<?=$p5?>)'],
						datasets: [{
							data: [<?=$p1?>,<?=$p2?>,<?=$p3?>,<?=$p4?>,<?=$p5?>],
							backgroundColor: ['rgb(255, 255, 250)', 'rgb(255, 255, 64)','rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']
						}] 
					};

					let pieChartDraw = function () {
						let ctx = document.getElementById('pieChartCanvas').getContext('2d');
						
						window.pieChart = new Chart(ctx, {
							type: 'pie',
							data: pieChartData,
							options: {
								responsive: false
							}
						});
					};

        </script>
<? include $_SERVER["DOCUMENT_ROOT"]."/D_include/bottom.php" ?>

º 막대그래프로 나타내기

 

result2.php

<? include  $_SERVER["DOCUMENT_ROOT"]."/D_include/top.php" ?>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/data.js"></script>     

<section>
<br>
<div align="center">


<?php
$conn = new mysqli("localhost","root","autoset","korea");

 $sql = "select count(title) as tc1 from board0628 where title='asp 중급'";
 $result = $conn->query($sql);
 $row1 = $result->fetch_assoc();

 $sql = "select count(title) as tc2 from board0628 where title='자바 초급'";
 $result = $conn->query($sql);
 $row2 = $result->fetch_assoc();

 $sql = "select count(title) as tc3 from board0628 where title='데이터베이스 튜닝'";
 $result = $conn->query($sql);
 $row3 = $result->fetch_assoc();

 $sql = "select count(title) as tc4 from board0628 where title='전산 실무'";
 $result = $conn->query($sql);
 $row4 = $result->fetch_assoc();

 $sql = "select count(title) as tc5 from board0628 where title='웹프로그램 고급'";
 $result = $conn->query($sql);
 $row5 = $result->fetch_assoc();

 
 $p1 = $row1['tc1'];
 $p2 = $row2['tc2'];
 $p3 = $row3['tc3'];
 $p4 = $row4['tc4'];
 $p5 = $row5['tc5'];
      
 $conn->close();
?>

 <div id=body1>
	 <div id = hidden style="display:none"> 
	 <!-- 표는 숨겨준다.!!  -->
		 <table border=1  width=550  id='datatable' >
		
		   <tr><td> 학생 수 </td>        <td> 과목이름 </td></tr> 
           <tr><td> 자 바 </td>         <td><?=$p1?> </td></tr>
           <tr><td> ASP </td>           <td><?=$p2?> </td></tr>
           <tr><td> 데이터베이스 </td>   <td><?=$p3?> </td></tr>
           <tr><td> 전산실무 </td>       <td><?=$p4?> </td></tr>
           <tr><td> 웹프로그램 </td>     <td><?=$p5?> </td></tr>
         
		</table>
	</div>
</div>
<br>
<div id="container" style="width: 700px; height: 430px; margin: 0 auto;"></div>
<script language="JavaScript">
$(document).ready(function() { 
   var data = {
      table: 'datatable'
   };
   var chart = {
      type: 'column'
   };
   var title = {
      text: '과목별 학생 비율'   
   };      
   var yAxis = {
      allowDecimals: false,
      title: {
         text: '학생 수'
      }
   };
   var tooltip = {
      formatter: function () {
         return '<b>' + this.series.name + '</b><br/>' +
            this.point.y + ' ' + this.point.name.toLowerCase();
      }
   };
   var credits = {
      enabled: false
   };  
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.data = data;
   json.yAxis = yAxis;
   json.credits = credits;  
   json.tooltip = tooltip;  
   $('#container').highcharts(json);
});
</script>
</div>
<br>
</section>

<? include $_SERVER["DOCUMENT_ROOT"]."/D_include/bottom.php" ?>

 

º 

Comments