2017-09-14 1 views
2

Morris 도넛 차트를 만들려고 노력하고 있으며 알려지지 않은 이유로 빈 페이지가 나타납니다. 두 개의 개별 파일이 있고, Chart.php는 SQL 문을 포함하고 차트를 표시하기위한 메일 파일을 포함합니다.PHP mysql을 사용한 동적 모리스 도넛 차트

Chart.php 코드

try { $stmt = $db->prepare(" SELECT gender, count(*) as no_of_gender FROM 
members GROUP BY gender ORDER BY memberID ASC "); 
     $stmt->execute(); 
     } 
    catch(PDOException $e) { 
     echo '<p class="bg-danger">'.$e->getMessage().'</p>'; 
     } 

    $data = array(); 

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
     $array[] = array(
      'lable' => $row['gender'], 
      'value' => $row['no_of_gender'] 
     ); 
     } 

$data = json_encode($data); 

여기 당신은 빈 배열을 인코딩하는 chart.php 파일에서 $ 데이터 Chart.php

<script type="text/javascript" language="javascript" > 

     $(document).ready(function(){ 

     var donut_chart = Morris.Donut({ 
      url :"charts.php", 
      element: 'chart', 
      data: <?php echo $data; ?> 
       }); 
      }) 

    </script> 
+0

이하? 빈 페이지가 나타나면 자바 스크립트 콘솔에 무엇이 표시됩니까? 렌더링되는 페이지의 소스는 무엇입니까? – tristansokol

+0

@tristansokol am getting 정의되지 않은 변수 : 데이터 –

답변

1

를 받기위한 내 자바 스크립트 코드입니다.

$data = json_encode($array); 

$data = json_encode($data); 

를 교체하고 제대로 자바 스크립트 코드에 chart.php 파일에서 $의 데이터를 전달되었는지 확인합니다.

실제로 동작하는 코드는 당신이보고있는 오류의 종류를 공유 할 수

<html> 
<head> 
    // if you have downloaded these files to your project, change the path to include them. 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
</head> 
<body> 

<?php 
try { $stmt = $db->prepare(" SELECT gender, count(*) as no_of_gender FROM 
members GROUP BY gender ORDER BY memberID ASC "); 
     $stmt->execute(); 
     } 
    catch(PDOException $e) { 
     echo '<p class="bg-danger">'.$e->getMessage().'</p>'; 
     } 

    $data = array(); // define array 

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
     $data[] = array(
      'lable' => $row['gender'], 
      'value' => $row['no_of_gender'] 
     ); 
     } 

//print_r($data); // to check the array data 
$json_data = json_encode($data); // convert to json array 
?> 
<div id="chart" style="height: 250px;"></div> 

<script type="application/javascript"> 

    Morris.Donut({ 
     element: 'chart', // div id 
     data: <?php echo $json_data; ?>, 
     xkey: 'lable', 
     ykeys: ['value'], 
     labels: ['Value'] 
    }); 

</script> 


</body> 
</html> 
+0

오전 점점 정의되지 않은 변수 : 데이터 –

+0

자바 스크립트 코드는 chart.php 파일에 있어야합니다. –

+0

대답을 업데이트하여 모든 것을 단일 페이지에 포함하십시오. –