Tarih aralığı değişkenini dinamik olarak nasıl ayarlayabilirim ve bir Google grafiğini yeniden çizebilir miyim?

Question

Bir Google Satır Grafiği oluşturmak için bir tarih aralığı ayarlamak için PHP kullanıyorum. Aralıktaki her tarih için, bir veritabanındaki verileri kullanarak çizgi grafikteki noktaları oluşturmak için bir değişken ayarlanır ($ running_balance). Aslında, tarih aralığını dinamik olarak belirleyen $ end değişkenini ayarlayabilmek isterdim, ancak grafiklerin bu yeni aralığa göre yeniden çizilebilmesi için bunu nasıl yapacağımı bilmiyorum. Grafiği yeniden çizmek için drawChart();'u içeren yeni bir işlev oluşturabileceğimin farkındayım ve tarih aralığını 1 yıl, 3 ay veya 1 ay olarak ayarlamak için üç düğme kullanıyorum, ancak nasıl koyacağımı bilmiyorum Bütün bunlar birlikte.

$begin = new DateTime(date('Y-m-d', strtotime('+1 days'))); 
$end = new DateTime(date('Y-m-d', strtotime('+365 days'))); 
$interval = DateInterval::createFromDateString('1 day'); 
$period = new DatePeriod($begin, $interval, $end); 

foreach ($period as $dt) { 

$date_display = $dt->format("D j M"); 

..... code to generate $running_balance ..... 

$temp = array(); 

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

$table['rows'] = $rows; 
$jsonTable = json_encode($table); 

<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); 

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

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

     // 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> 

Answer 1

Tamam, sizi doğru anlama ediyorsam, sorun hamile olan ve bu eylemlerin parçaları sunucu tarafı (PHP) ve hangi parçanın ne olduğunu tasarlarken: İşte şu anda sahip olduğu kodudur istemci tarafı (Javascript) ve daha sonra istemci-sunucu iletişim stratejisi. Bu yaygın bir hız topu. Bununla başa çıkmanın birkaç yolu var.

İlk (ve daha az tercih edilen) bir form oluşturmak ve yeni bir tarih aralığı ile tüm sayfayı yeniden olabilir:

// we're looking for '+1 year', '+3 months' or '+1 month'. if someone really 
// wants to send another value here, it's not likely to be a security risk 
// but know your own application and note that you might want to validate 
$range = isset($_GET['range'])&&$_GET['range']?$_GET['range']:'+1 year'; 

$begin = new DateTime(date('Y-m-d', strtotime('+1 days'))); 
$end = new DateTime(date('Y-m-d', strtotime($range))); 
// ... the rest of your code to build the chart. 
?> 
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="get"> 
    <select name="range" size="1"> 
     <option value="+1 year">1 year</option> 
     <option value="+3 months">3 months</option> 
     <option value="+1 month">1 month</option> 
    </select> 
    <input type="submit" name="action" value="Redraw Chart"> 
</form> 

... az tercih var o bütün bir yenileme neden olduğu olmasının sebebi sayfa.

Tüm sayfa yenilemesinden kaçınmak istiyorsanız, hemen hemen aynı şeyi yapıyorsunuz, ancak ajax ile yapın. Kurulum neredeyse özdeş, sadece birkaç küçük değişiklikler: netlik için

// between building the data table and the javascript to build the chart... 
$jsonTable = json_encode($table); 
if (isset($_GET['ajax']) && $_GET['ajax']) { 
    echo json_encode(array('table' => $table)); 
    exit; 
} 
// remainder of your code, then our new form from above 
?> 
<form id="redraw_chart_form" action="<?= $_SERVER['PHP_SELF']; ?>" data-ajaxaction="forecast.php" method="get"> 
    <? foreach ($_GET as $key => $val) { ?> 
    <input type="hidden" name="<?= $key; ?>" value="<?= $val; ?>"> 
    <? } ?> 
    <input type="hidden" name="ajax" id="redraw_chart_form_ajax" value="0"> 
    <select name="range" size="1"> 
     <option value="+1 year">1 year</option> 
     <option value="+3 months">3 months</option> 
     <option value="+1 month">1 month</option> 
    </select> 
    <input type="submit" name="action" value="Redraw Chart"> 
</form> 
<script> 
    // I'm assuming you've got jQuery installed, if not there are 
    // endless tutorials on running your own ajax query 
    $('#redraw_chart_form').submit(function(event) { 
     event.preventDefault(); // this stops the form from processing normally 
     $('#redraw_chart_form_ajax').val(1); 
     $.ajax({ 
      url: $(this).attr('data-ajaxaction'), 
      type: $(this).attr('method'), 
      data: $(this).serialize(), 
      complete: function() { $('#redraw_chart_form_ajax').val(0); }, 
      success: function(data) { 
       // referring to the global table... 
       table = data.table; 
       drawChart(); 
      }, 
      error: function() { 
       // left as an exercise for the reader, if ajax 
       // fails, attempt to submit the form normally 
       // with a full page refresh. 
      } 
     }); 
     return false; // if, for whatever reason, the preventDefault from above didn't prevent form processing, this will 
    }); 
</script> 

---

Düzenleme:

birinciden aşağıdaki kod bloğunu kullanmayı unutmayın

1. (sayfa yenileme) örneği, aksi takdirde hiç formu kullanarak değiliz:

   $range = isset($_GET['range'])&&$_GET['range']?$_GET['range']:'+1 year';

   $begin = new DateTime(date('Y-m-d', strtotime('+1 days')));

   $end = new DateTime(date('Y-m-d', strtotime($range)));

2. geri gönderiyorlar sadece verileri grafik bina verisi herhangi önce, programın üst kısmında olması gerekiyor demektir json kodlanmış blok ise Ajax yalnızca çalışacaktır Sayfa şablonunuz da dahil olmak üzere HTML çıkışı başlatıldı. Çizelgenin kodunu komut dosyasının en üstüne koyamazsanız, bunu tümüyle ayrı bir komut dosyasına eklemeniz gerekir. Tümüyle, grafik için verileri hesaplarsınız ve daha sonra geri dönebilirsiniz. ajax verileri sayfadaki diğer tüm HTML'ler olmadan. Eğer bunlardan hiçbirini yapamazsanız, sadece Ajax bitini kapatmanız ve tam sayfa yenilemesi yapmanız gerekir.

---

Düzenleme 2: Ben <form> elemana data-ajaxaction niteliğini eklendi, bu sadece ajax için farklı bir etki sağlamak için yapılmış bir kullanıcı tanımlı niteliktir. Ayrıca, action özniteliği yerine bu özniteliği kullanmak için $.ajax() aramasını değiştirdim.