2013-08-30 1 views
0

여기에 시간이 하나 있습니다. json_encoded mySQL 배열에서 어떻게 차트를 그릴 수 있습니까?Google Charts from MySQL JSON 인코딩 된 배열

데이터 검색 (A PDO 쿼리에서 간단하게 연관 배열) :

if($cCt > 0){ 
     header('Content-Type:application/json');  
     $table['cols'] = array(
           array('id'=>'Date', 'label'=>'Date', 'type'=>'string'), 
           array('id'=>'Carbs', 'label'=>'Carbs', 'type'=>'number'), 
           array('id'=>'Sugar', 'label'=>'Sugar', 'type'=>'number'), 
           array('id'=>'Units', 'label'=>'Units', 'type'=>'number')); 
     for($i=0; $i<$cCt; ++$i){ 
      $W = (isset($_GET['which'])) ? (int)$_GET['which'] : 0; 
      switch($W){ 
       case 1: // weekly 
       case 2: // monthly 
       case 3: // yearly 
        $date = date('m/d', strtotime($CNums[$i]['Date'])); 
        break; 
       case 4: // daily 
        $date = date('m/d g:i a', strtotime($CNums[$i]['Date'])); 
        break; 
       default: 
        $date = date('m/d g:i a', strtotime($CNums[$i]['Date'])); 
        break; 
      } 
      $rows[] = array('c'=>array('v'=>$date, 'v'=>$CNums[$i]['Carbs'], 'v'=>$CNums[$i]['Sugar'], 'v'=>$CNums[$i]['Units'])); 
     } 
     $table['rows'] = $rows; 
     echo json_encode($table, JSON_NUMERIC_CHECK); 
    }else{ 
     echo ErrorBox('Please login to see your charts.'); 
    } 

코드 시도 :

<script type="text/javascript"> 

    google.load('visualization', '1.0', {'packages':['corechart']}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var $dUrl = "/assets/php/charts/chart.data.php?_=<?php echo time(); ?>&which=<?php echo (isset($which)) ? $which : 4; ?>&d=<?php echo (isset($d)) ? $d : null; ?>&dl=<?php echo (isset($dl)) ? $dl : null; ?>"; 

     jQuery.getJSON($dUrl, function(d){ 
      // Create a new blank DataTable   
      var data = new google.visualization.DataTable(d); 
      // Create our columns 
      /* 
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'Carbs'); 
      data.addColumn('number', 'Sugar'); 
      data.addColumn('number', 'Units'); 
      // Create our Rows 
      jQuery.each(d, function(i) { 
       data.addRows([d[i].Dates, d[i].Carbs, d[i].Sugar, d[i].Units]); 
      }); 
      */  
      var options = { 
       'colors': ['red', 'blue', 'yellow'], 
       'width': '98%', 
       'height': 280, 
       'backgroundColor': 'none', 
       'hAxis': {'textStyle': {fontName: 'Calibri', 
        fontSize: '12'}}, 
       'vAxis': {'textStyle': {fontName: 'Calibri', 
        fontSize: '12'}}, 
       'legendTextStyle': {fontName: 'Calibri', 
        fontSize: '12'} 
      }; 
      //var chart = new google.visualization.ColumnChart(document.getElementById('<?php echo $where; ?>')); 
      var chart = new google.visualization.ColumnChart(document.getElementById('weekly_chart_div')); 
      chart.draw(data, options); 

     }).fail(function(msg){console.log('Error pulling in the data.' + msg);}); 

    } 
</script> 

원래 JSON $dUrl에서 : 데이터 후

{"cols":[{"id":"Date","label":"Date","type":"string"}, 
    {"id":"Carbs","label":"Carbs","type":"string"}, 
    {"id":"Sugar","label":"Sugar","type":"string"}, 
    {"id":"Units","label":"Units","type":"string"}], 
"rows":[["08\/23","40.0000000","256.0000000","9.0000000"], 
    ["08\/24","33.8333333","102.5000000","4.6666667"], 
    ["08\/25","38.2000000","290.2000000","10.6000000"], 
    ["08\/26","36.0000000","322.0000000","12.0000000"], 
    ["08\/28","23.6666667","348.3333333","9.6666667"], 
    ["08\/29","31.3333333","214.1666667","7.3333333"], 
    ["08\/30","16.0000000","154.0000000","4.0000000"]]} 

새로운 JSON 검색 업데이트 :

012 3,516,
{"cols":[{"id":"Date","label":"Date","type":"string"}, 
    {"id":"Carbs","label":"Carbs","type":"number"}, 
    {"id":"Sugar","label":"Sugar","type":"number"}, 
    {"id":"Units","label":"Units","type":"number"}], 
"rows":[{"c":{"v":9}},{"c":{"v":4.6666667}},{"c":{"v":10.6}},{"c":{"v":12}},{"c":{"v":9.6666667}},{"c":{"v":7.3333333}},{"c":{"v":4}}]} 

예, 지금 내가 오류 this.J[a].c is undefined 얻고 있지만, 그것은 단지 차트를로드 할 위치 표시가 없습니다 ... 방화범

내가 무엇을 목표로하고하는 것은이 같은 것입니다 : 예 : http://o7th.com/Image3.png

답변

1

행의 형식이 잘못되었습니다. 행은 각 객체가 "c"(셀 배열) 및 선택적 "p"(특성 객체) 매개 변수를 갖는 객체 배열입니다. 셀 배열은 "v"(열 데이터 유형, 셀 값) 및 선택적 "f"(문자열, 셀의 형식 값) 및 "p"(매개 변수 객체) 속성이있는 객체의 배열입니다. 일례로서

데이터의 첫 번째 행은 다음과 같이 표시한다 :

$row = array(
    'c' => array(
     array('v' => '08\/23'), 
     array('v' => 40, 'f' => "40.0000000"), 
     array('v' => 256, 'f' => "256.0000000"), 
     array('v' => 9, 'f' => "9.0000000") 
    ) 
); 
:

는 JSON 인코딩 PHP 배열에서 그 생성하기 위해
{"c":[{"v":"08\/23"},{"v":40,"f":"40.0000000"},{"v":256,"f":"256.0000000"},{"v":9,"f":"9.0000000"}]} 

, 어레이는 다음과 같이 할 것이다 기본적으로

는, MySQL은 문자열로 모든 숫자를 출력, 그래서 당신의 int로 캐스팅 할 필요하거나 숫자로 출력하기 위해 다음과 같이 순서대로 수레 :

$foo = '33.333333'; // $foo == '33.333333' 
$bar = (int) $foo; // $bar == 33 
$cad = (float) $foo; // $cad == 33.333333 

형식화 된 값을 원하지 않으면 변경하거나 제거 할 수 있습니다 (차트의 툴팁에 표시되는 값).

편집 :

당신은이 세포 배열의 자신의 배열의 각 셀을 줄 필요가

; 사용해보십시오.

$rows[] = array(
    'c'=>array(
     array('v'=>$date), 
     array('v'=>$CNums[$i]['Carbs']), 
     array('v'=>$CNums[$i]['Sugar']), 
     array('v'=>$CNums[$i]['Units']) 
    ) 
); 
+0

이제는 JSON이 올바른 값을 반환하지 않습니다. 위의 코드를 – Kevin

+0

위의 게시 된 데이터 검색 위에 올릴 것입니다 ... 반환 된 json이 반환 한 것과 같지 않습니다 ... PHP 5.3이 설치되어 있으므로 JSON_NUMERIC_CHECK를 추가하여'json_encode'를 적절하게 포맷합니다. 나를위한 숫자 :) – Kevin

+0

각 셀은 자체 배열이 필요합니다. 시도해 볼 PHP가있는 게시물을 업데이트하겠습니다. – asgallant