2017-09-14 7 views
2

私はMorrisドーナッツチャートを作ろうとしています。私は空白のページを取得しています。私は2つの別々のファイルを持っています、Chart.phpは、グラフを表示するためのSQL文とメールファイルを含んでいます。php mysqlを使った動的なmorrisドーナツチャート

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

下回っているあなたは、あなたが見ているエラーの種類を共有することはできますか?空白のページが表示された場合、JavaScriptのコンソールは何を言いますか?レンダリングされるページのソースは何ですか? – tristansokol

+0

@tristansokol am getting未定義変数:データ –

答えて

1

を$データを受信するための私のjavascriptのコードです。

$data = json_encode($array); 

$data = json_encode($data); 

を交換し、あなたは正しくJavaScriptコードに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

Javascriptコードはchart.phpファイルにある必要があります。 –

+0

答えを更新して、すべてのものを1ページに含める。 –

関連する問題