구글 라인 차트의 시작 값 설정 차트를 동적으로 다시 그리기

Question

아래 코드를 사용하여 예상 재무 잔액에 대한 꺾은 선형 차트를 생성하고 있습니다. 데이터는 MySQL 데이터베이스의 정보로 생성됩니다. 내가 뭘하고 싶은지는 페이지에 입력 필드가있는 양식을 사용하여 페이지가로드되면 사용자가 시작 잔액을 동적으로 설정할 수 있도록하여 차트가 올바른 시작 잔액으로 다시 그려지지만 이 작업을 수행하는 방법을 알아낼 수 없습니다.

$rows = array(); 
$table = array(); 
$table['cols'] = array(
    array('label' => 'Date', 'type' => 'string'), 
    array('label' => 'Amount', 'type' => 'number') 
); 

[code to generate data goes here - i.e. calculating a balance for each date in the chart] 

    $balance = $balance - $monthly - $weekly + $session_total; 
    $temp = array(); 

    $temp[] = array('v' => (string) $date_display); 
    $temp[] = array('v' => (string) $balance); 
    $rows[] = array('c' => $temp); 
} 

$table['rows'] = $rows; 
$jsonTable = json_encode($table); 
//echo $jsonTable; 
?> 

    <script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(<?=$jsonTable?>); 
                var formatter = new google.visualization.NumberFormat({fractionDigits:2,prefix:'\u00A3'}); 
     formatter.format(data, 1); 
     var options = { 
      pointSize: 5, 
      legend: 'none', 
      hAxis: { showTextEvery:31 }, 
      series: {0:{color:'2E838F',lineWidth:2}}, 
      chartArea: {left:50,width:"95%",height:"80%"}, 
      backgroundColor: '#F7FBFC', 
      height: 400 
     }; 
     // Instantiate and draw our chart, passing in some options. 
     //do not forget to check ur div ID 
     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 
    </script> 

     <div id="chart_div"></div> 

Answer 1

새 데이터를 사용할 수있을 때 차트를 새로 고치는 것이 좋습니다. PHP를 약간 변경하고 몇 가지 JavaScript를 수정해야합니다.

Google 차트를 사용할 때 좋은 점은 drawChart()을 다시 호출하여 다시 그릴 수 있다는 것입니다. 데이터를 수정하기 전에 데이터를 수정할 수 있어야합니다.

난 당신이 사용자의 입력에 따라 값을 변경하고자 할 때 당신은 항상 다시 참조 뭔가를 가질 수 있도록 PHP는, 원래의 값을 저장하는 것입니다 만들 것 변화 :

// display the date 
$temp[] = array('v' => (string) $date_display); 
// the data used by the chart 
$temp[] = array('v' => (string) $balance); 
// the original value 
$temp[] = array('v' => (string) $balance); 

테이블 데이터를 함수에 직접 그리는 것이 아니라 전역으로 만들 수도 있습니다. 이렇게하면 테이블 데이터를 변경하고 차트를 아주 쉽게 새로 고칠 수 있습니다. 버튼에

<form method="post" action="#" onsubmit="return false;"> 
    <input type="text" id="balance1" /> 
    <input type="text" id="balance2" /> 
    <button onclick="return refreshChart()">Go</button> 
</form> 

을 클릭하면 기본 동작을 취소하고 refreshChart()라는 함수를 호출

var table = <?php echo $jsonTable; ?>; 

function drawChart() { 
    var data = new google.visualization.DataTable(table); 
    ...... 
} 

나는 다음과 같습니다 기본 양식이 테스트. 이 함수의 값을 취하고 다시 드로잉 차트 전에 즉시 원래의 값에 추가한다 : 그것은 밸런스 입력 소요 table.rows[i].c['2'].v에 저장된 원래의 값에 가산 table.rows[i].c['1'].v 값을 덮어

function refreshChart() { 
    var balance1 = document.getElementById('balance1').value; 
    var balance2 = document.getElementById('balance2').value; 
    if(!balance1) { 
     balance1 = 0; 
    } 
    if(!balance2) { 
     balance2 = 0; 
    } 
    for(var i = 0, length = table.rows.length; i < length; i++) { 
     table.rows[i].c['1'].v = parseFloat(table.rows[i].c['2'].v) + parseFloat(balance1) + parseFloat(balance2); 
    } 
    drawChart(); 
    return false; 
} 

차트에 사용됩니다. 그런 다음 원래 drawChart() 함수를 호출하지만 새 데이터가 사용됩니다.

나는 약간의 기본 데이터로 놀았으며, 이것은 내가 JSFiddle으로 테스트 한 결과입니다.