Графики Google не отображаются после вызовов ajax

У меня есть график, который отображает множество графиков Google.Графики Google не отображаются после вызовов ajax

Все диаграммы Google загружаются правильно и отображаются, когда вы попадаете на главную страницу. Однако в нижней части шкалы времени есть «Загрузить больше». Графики, созданные этой Load More, не отображаются.

http://CappedIn.com для точного примера. Посмотрите, как много графиков успешно отображаются. И посмотрите внизу и «Загрузить больше». После «Загрузить больше» диаграммы не отображаются.

С отладчиком я вижу, что drawChart не вызывается. google.setOnLoadCallback(drawChart);, похоже, не вызвано.

Эта функция Load More вызывает тот же код для рисования диаграмм. Вот код в частичном, который выполняется при построении временной шкалы. Этот код ниже включен в каждый график, который отображается на странице.

google.load("visualization", "1", {packages:["corechart"]}); 

    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable(#{get_line_movement_data(line_movement.event,chart_type)}); 
     var options = {"title":"#{chart_title}","colors":["#0088cc"]}; 
     var chart = new google.visualization.LineChart(document.getElementById("line-movement-#{chart_type}-#{line_movement.id}")); 
     debugger; 
     chart.draw(data, options); 
    }

Этот код вызывается нажатием «Загрузить больше» и включен в исходную загрузку страницы.

$(document).ready(function() { 
    // when the load more link is clicked 
    $('a.load-more').click(function (e) { 
     // prevent the default click action 
     e.preventDefault(); 

     // hide load more link 
     $('.load-more').hide(); 

     // show loading gif 
     $('.loading-gif').show(); 

     // get the last id and save it in a variable 'last-id' 
     var last_position = $('.record').last().attr('data-position'); 
     // make an ajax call passing along our last user id 
     $.ajax({ 

      // make a get request to the server 
      type: "GET", 
      // get the url from the href attribute of our link 
      url: $(this).attr('href'), 
      // send the last id to our rails app 
      data: { 
       feed_item_position: last_position 
      }, 
      // the response will be a script 
      dataType: "script", 

      // upon success 
      success: function() { 
       // hide the loading gif 
       $('.loading-gif').hide(); 
       // show our load more link 
       $('.load-more').show(); 
      } 
     }); 

    }); 
    });

я загрузить Графики JS Google в <head> конечно.

= javascript_include_tag "//www.google.com/jsapi", "chartkick"

Рубин на Rails проекта не так уж важно.

Любые идеи о том, почему диаграммы не рисуются с помощью вызова «Загрузить больше»?

источник

2016-09-06 slindsey3000

Кому-нибудь, кто это просматривает ... добавление истины в качестве параметра здесь разрешило все это ... не знаю почему! google.setOnLoadCallback (DrawChart, правда); – slindsey3000

Я перезагружаю данные в google datatable, пакет, который можно преобразовать в представление диаграммы google и явно перерисовывать диаграмму с помощью представления.

// when the load more link is clicked 
$('a.load-more').click(function (e) { 
// prevent the default click action 
e.preventDefault(); 

// hide load more link 
$('.load-more').hide(); 

// show loading gif 
$('.loading-gif').show(); 

// get the last id and save it in a variable 'last-id' 
var last_position = $('.record').last().attr('data-position'); 
// make an ajax call passing along our last user id 
$.ajax({ 

    // make a get request to the server 
    type: "GET", 
    // get the url from the href attribute of our link 
    url: $(this).attr('href'), 
    // send the last id to our rails app 
    data: { 
     feed_item_position: last_position 
    }, 
    // the response will be a script 
    dataType: "script", 

    // upon success 
    success: function (data) { 
     // hide the loading gif 
     $('.loading-gif').hide(); 
     // show our load more link 
     $('.load-more').show(); 


     // get a reference to the line chart 
     var chart = window.chartGoogleLineChart; 

     // build a new google datatable with the data 
     var dt = new google.visualization.DataTable(data); 


     var view = new google.visualization.DataView(dt); 
     chart.formatView(chart, view); 

     chart.draw(view, true); 
    } 
}); 

});

источник

2016-09-06 15:37:25 Juls

Сегодня вы получите этот снимок :) – slindsey3000

После нажатия кнопки «Загрузить еще» будет отображаться много графиков. Будет ли конфликт? – slindsey3000

Нет. У меня есть диаграммы, выложенные на странице. Каждый график будет перерисовывать данные независимо. Если вы передадите параметры анимации, диаграмма будет анимировать изменение данных. – Juls

Графики Google не отображаются после вызовов ajax

ответ

Смежные вопросы