Как установить переменную диапазона дат динамически и перерисовать диаграмму Google?
Я использую PHP для установки диапазона дат для создания линейной диаграммы Google. Для каждой даты в диапазоне задается переменная ($running_balance) для создания точек на линейном графике с использованием данных в базе данных. Я хотел бы иметь возможность динамически устанавливать переменную $end, которая по существу определяет диапазон дат, но я не уверен, как это сделать, чтобы диаграмма была перерисована в соответствии с этим новым диапазоном. Я знаю, что могу создать новую функцию, которая включает drawChart();
для перерисовки диаграмма, и я бы использовал три кнопки, чтобы установить диапазон дат в 1 год, 3 месяца или 1 месяц, но я не уверен, как все это собрать. Вот код, который у меня в настоящее время есть:
$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>
1 ответов
хорошо, если я правильно вас понимаю, у вас возникли проблемы с пониманием и разработкой того, какие части этих действий являются серверными (PHP) и какие части являются клиентскими (Javascript), а затем стратегией связи клиент-сервер. Это общий speedbump. Есть несколько способов справиться с этим.
сначала (и менее предпочтительно) вы можете создать форму и перезагрузить всю страницу с новым диапазоном дат:
// 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>
... причина это менее предпочтительный это потому, что это вызывает целое обновление страницы.
если вы хотите избежать обновления всей страницы, Вы делаете почти то же самое, но делаете это с ajax. Настройка практически идентична, всего пара незначительных изменений:
// 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>
редактировать для ясности:
-
не забудьте использовать следующий блок кода из первого примера (обновление страницы), иначе вы не используете форму в все:
$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)));
Ajax будет работать, только если только данные, которые вы отправляете обратно, - это кодированный блок json, что означает, что ваши данные для построения диаграммы должны быть в верхней части скрипта до любой вывод HTML запускается, включая шаблон страницы. Если вы не можете поместить код построения диаграммы в верхней части скрипта, вам придется добавить его в целое отдельное скрипт, который все, что он делает, это вычислить данные для диаграммы, а затем вы можете вернуть данные ajax без всех других HTML на странице. Если вы не можете сделать ни одну из этих вещей, вам просто нужно отключить бит Ajax и обновить всю страницу.
Edit 2: я добавил до <form>
element, это пользовательский атрибут, который я составил, чтобы предоставить другое действие только для ajax. Я также изменил $.ajax()
звоните использовать этот атрибут, а не .