postech
@postech
программист

Как заставить google charts построить график с новыми данными?

Все крутится здесь: https://romanlyzhov.ru/dashboard/

Логика такая:

  1. по событию смены выбора радиокнопки выполняется функция 'drawCharts()', которая в обработчике charts_data.php формирует файл temp_charts_data.json
  2. В случае успеха (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, но не знаю, как.
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы