Все крутится здесь:
https://romanlyzhov.ru/dashboard/
Логика такая:
- по событию смены выбора радиокнопки выполняется функция 'drawCharts()', которая в обработчике charts_data.php формирует файл temp_charts_data.json
- В случае успеха (success) запускаются 2 функции отрисовки графиков - 'drawPieChart()' и 'drawLineChart()', которые должны отобразить новые графики.
Однако сколько не кликать по радиокнопкам - всегда отображаются графики на основании данных temp_charts_data.json, сформированных до последней перезагрузки страницы. При этом после каждой смены радиокнопки данные в temp_charts_data.json меняются на актуальные, я проверял, но скрипт строит графики на основании старых данных почему-то. Анимация отрабатывает при каждом выборе радиокнопки.
Думал, может, данные не успевают обновиться (js отрабатывает быстрее php). Пробовал unset($charts_data) вставлять перед обновлением из файла - не помогло, только скрипт стал ругаться на отсутствие данных для графика. Пробовал ставить задержку в drawCharts() перед отрисовкой графиков - тоже мимо. Прошу помочь.
// генерация json-файла по данным формы
function drawCharts() {
$.ajax({
type: 'get',
url: 'charts_data.php',
dataType: 'html',
data: $('#chart_choosing_form').serialize(),
cache: false,
beforeSend: function(){
$('.loading_chart').show();
},
success: function(data) {
$('.loading_chart').hide();
drawPieChart();
drawLineChart();
}
});
}
// событие выбора радиокнопки
$(document).on('change','input[type="radio"]',function(){
drawCharts();
});
Постройка графиков:
google.charts.load('current', {'packages':['corechart']});
function drawPieChart() {
// создание таблицы данных
var data = new google.visualization.DataTable();
data.addColumn('string', 'Источник траффика');
data.addColumn('number', 'Переходов');
data.addRows([
<?php
$charts_data = file_get_contents("temp_charts_data.json");
$charts_data = json_decode($charts_data, true);
foreach($charts_data['traffic_source'] as $key => $value) {
echo '["'.$traffic_names[$key].'", '.$value.'],';
}
?>
]);
// настройки графика
var options = {
'title' : 'Источники трафика <? echo $charts_data['id']; ?>:',
'legend':'top',
'width' : 500,
'height' : 470,
'is3D': true,
};
// создание экземпляра и рисование диаграммы
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
function drawLineChart() {
var data = google.visualization.arrayToDataTable([
['Дата', 'Google', 'Yandex'],
<?
foreach($charts_data['search_data'] as $day => $data) {
echo '["'.$day.'", '.$data['Google'].', '.$data['Yandex'].'],';
}
?>
]);
var options = {
title: 'Переходы из Yandex и Google <? echo $charts_data['id']; ?>',
animation:{
duration: 2000,
easing: 'out',
startup: true
},
width: 750,
height: 400,
/*curveType: 'function',*/
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
Очень прошу совета или помощи, в php шарю, а в js не особо. Подозреваю, что можно не городить огород и сформировать массив данных в drawPieChart() и drawLineChart() без php, но не знаю, как.
