Ajax/JSON 다시 그리기 Google 차트

Question

Google 시각화 차트 api를 사용하여 여기에 https://developers.google.com/chart/interactive 잘 작동하는 것으로 보이는 서버 가동 시간 그래프를 만듭니다.

그러나 사용자가 날짜 범위를 선택한 다음 브라우저를 새로 고치지 않고도 그래프를 다시 그려 낼 수 있기를 바랍니다. 그리고 나는 이것에 작은 문제가 있습니다.

먼저 그래프를 초기 데이터로 그린 다음 사용자가 날짜 범위를 변경하면이 그래프를 다시 그려야합니다. 일부 샘플 데이터로 다시 그리기를 시도했지만 정상적으로 작동합니다. 그러나 나는 그것이 업데이트 된 데이터와 함께 작동하도록하는 것 같습니다.

/*mysql query striped*/ 
$uptime_result = mysql_query($query, $connection) or die(mysql_error()); 


$uptime_data = "['Day', 'Uptime'],"; 
while ($items = mysql_fetch_array($uptime_result)){ 
    $uptime_data.="['{$items['date']}',{$items['uptime']}], "; 
} 

// get average uptime 
/*mysql query striped*/ 
$uptime_result = mysql_query($query, $connection) or die(mysql_error()); 

$result_array = mysql_fetch_array($uptime_result); 
$avg_uptime = round($result_array['AVG(uptime)'],2); 

echo "{\"data\":\"{$uptime_data}\",\"average\":$avg_uptime}"; 

같은 것을 출력 :

는 지금은 DB에서 데이터를 가져 PHP 파일에 내가 같은 기간의 총 가동 시간뿐만 아니라이 기간 동안 모두 평균 가동 시간을 반환합니다 :

{"data":"['Day', 'Uptime'],['2012-05-31',100.00], ['2012-06-01',100.00], ['2012-05- 22',99.65], ['2012-05-21',99.65], ['2012-05-20',100.00], ['2012-05-31',100.00], ['2012-05-30',100.00], ['2012-05-29',100.00], ['2012-05-28',100.00], ['2012-05-27',100.00], ['2012-05-26',100.00], ['2012-05-25',100.00], ['2012-05-24',100.00], ['2012-05-23',100.00], ['2012-05-19',100.00], ['2012-05-18',100.00], ['2012-05-17',100.00], ['2012-05-16',100.00], ['2012-05-15',100.00], ['2012-05-14',100.00], ['2012-05-13',100.00], ['2012-05-12',100.00], ['2012-05-11',100.00], ['2012-05-10',100.00], ['2012-05-09',100.00], ['2012-05-08',100.00], ['2012-05-07',100.00], ['2012-06-02',100.00], ['2012-06-03',100.00], ['2012-06-04',100.00], ","average":99.98} 

즉 두 변수 데이터 및 평균 JSON 배열. 나는 그 두 가지를 독립적으로 가져올 수있다 :

$(function(){ 
      $('#from,#to').focusout(function(){ 

      var start=$('#from').val(); 
      var end=$('#to').val(); 
      $.ajax({ 
       type: 'POST', 
       data: ({from : start, to : end, id : <?php echo $id; ?>}), 
       url: 'fetchuptime.php', 
       success: function(data) { 
        //7 reulst goes here 
        //var json = data; 
        var obj = jQuery.parseJSON(data); 
        $('#uptime_span').html(obj.average +" %"); 
        $('#test').html(data); 
        chart_data = google.visualization.arrayToDataTable([ 
          obj.data 
         ]); 
         var ac = new google.visualization.AreaChart(document.getElementById('visualization')); 
         ac.draw(chart_data, { 
          colors : ['#00DB00'], 
          title : '', 
          isStacked: false, 
          width: 570, 
          height: 400, 
          'chartArea': {'width': '88%', 'height': '90%'}, 
          hAxis: {minValue: 0,showTextEvery: 6, slantedText: false}, 
          vAxis: { 
           viewWindowMode:'explicit', 
           viewWindow:{ 
            max:100, 
            min:90.65 
           } 
          }, 
          pointSize: 3, 
          legend: {position: 'none'} 
         }); 

      } 
     }); 
    }); 
}); 

예. obj.average 및 obj.data는 나에게 두 개의 문자열을 제공합니다. 그러나 이것은 작동하지 않는 것, 나는 데이터가 올바르게 전달되지 않는다고 생각합니다.

정적으로 삽입하려고 했으므로 실제 출력 데이터 (예 : obj.data)의 형식이 올바른지 테스트했습니다.

분명히 뭔가 잘못하고 있습니다. Google 차트에 배열이 필요하고 문자열을 전달하기 때문에 다양한 방법으로 수정하려고했지만 아직 작동하지 않는 문자열이 있다고 가정합니다.

아무도 도와 줄 수 있습니까?

Answer 1

당신의 JSON의 형식은 유효하지만 아마 당신이 원하는 것없는 것 :

data 값이라는 이름의 필드 개체를 나타냅니다

{"data":"['Day', 'Uptime'],['2012-05-31',100.00] ... ['2012-06-04',100.00], ", "average":99.98} 

는 문자열 (당신이 말한 것처럼). 아마 서버 측에서 배열을 만들고 싶을 것입니다. 큰 따옴표 대신 대괄호를 사용하십시오. 제거해야하는 후행 쉼표도 있습니다.

{"data":[['Day', 'Uptime'],['2012-05-31',100.00] ... ['2012-06-04',100.00]], "average":99.98}