json을 사용하여 콤보 차트 표시

Question

json의 데이터를 사용하여 Google ComboChart를 만들려고합니다. 사용중인 쿼리가 SQL 엔진에서 제대로 작동하지만 차트가 표시되지 않습니다.

이것은 구글 차트 스크립트

<div id="ranking_panel"> 
      <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
      <script type="text/javascript"> 
       google.load('visualization', '1', {packages: ['corechart']}); 
      </script> 
      <script type="text/javascript"> 
       function drawVisualization() { 
       // Some raw data (not necessarily accurate) 
       var json = $.ajax({ 
          url: 'get_json_rank.php', 
          dataType: 'json', 
          async: false 
         }).responseText; 
       var data = new google.visualization.DataTable(json); 
       var options = { 
        title : 'Restaurant Ranking Stats', 
        vAxis: {title: "Business Growth"}, 
        hAxis: {title: "Restaurants"}, 
        seriesType: "bars", 
        series: {1: {type: "line"}} 
       }; 

       var chart = new google.visualization.ComboChart(document.getElementById('rank_chart')); 
       chart.draw(data, options); 
       } 
       google.setOnLoadCallback(drawVisualization); 
      </script> 
      <div id="rank_chart"></div> 
     </div> 

이것은 JSON 코드

<?php 
$con = mysql_connect('localhost', 'root', '') or die('Error connecting to server'); 
mysql_select_db('db_MarkitBerry', $con); 

$query = mysql_query('SELECT r_name, priority FROM tbl_restro ORDER BY priority DESC'); 
$table = array(); 
$table['cols'] = array(
    array('label' => 'Priority', 'type' => 'string'), 
    array('label' => 'Restaurants', 'type' => 'string') 
); 

$rows = array(); 
while($r = mysql_fetch_assoc($query)) { 
    $temp = array(); 
    // each column needs to have data inserted via the $temp array 
    $temp[] = array('v' => $r['priority']); 
    $temp[] = array('v' => $r['r_name']); 
    $temp[] = array('v' => $r['r_name']); 
    $rows[] = array('c' => $temp); 
}  
$table['rows'] = $rows;  
$jsonTable = json_encode($table);  
header('Cache-Control: no-cache, must-revalidate'); 
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); 
header('Content-type: application/json');  
echo $jsonTable; 
?> 

Answer 1

디버그!

php/json 측에서 'pre'태그와 print_r 함수를 사용하여 요청을 통해 출력되는 내용을 확인하십시오. Firefox에서 Firebug 확장 기능을 설치하고 네트워크 탭으로 이동하여 모든 요청을 기록하도록 설정하십시오. 페이지를 열면 Ajax 요청이 생성되고 아래로 스크롤하여 응답을 볼 수 있습니다.

Google API를 호출하는 Javascript 부분에서 console.log를 사용하고 Firebug 확장을 사용하여 모든 변수에 저장된 내용을 확인합니다.

function drawVisualization() { 
    // Some raw data (not necessarily accurate) 
    var json = $.ajax({ 
         url: 'get_json_rank.php', 
         dataType: 'json', 
         async: false 
        }).responseText; 
    **console.log(json);** 
    var data = new google.visualization.DataTable(json); 
    **console.log(data);** 
    var options = { 
     title : 'Restaurant Ranking Stats', 
     vAxis: {title: "Business Growth"}, 
     hAxis: {title: "Restaurants"}, 
     seriesType: "bars", 
     series: {1: {type: "line"}} 
    };    
    var chart = new google.visualization.ComboChart(document.getElementById('rank_chart')); 
    chart.draw(data, options); 
} 

Answer 2

두 가지 문제점이 있습니다. 먼저 (복사 오류를 세 번째는 중복 불구하고, 그래서 그냥되었을 수 있습니다), 당신은 당신의 DataTable에 두 개의 열을 만들 수 있지만 데이터의 세 개의 열을 추가

$temp[] = array('v' => $r['priority']); 
$temp[] = array('v' => $r['r_name']); 
$temp[] = array('v' => $r['r_name']); // <-- this is a duplicate, either add a third column or delete this line 

두 번째 문제는 당신이 있다는 것입니다 두 열 유형을 모두 'string'으로 설정하고 대부분의 차트 (ComboChart로 빌드 할 수있는 모든 것을 포함)에는 적어도 하나의 'number' 열이 필요합니다. 일반적으로 첫 번째 (도메인) 열을 문자열 유형으로 사용하여 차트를 만들 수 있지만 나머지는 모두 숫자 유형이어야합니다.