Google график отзывчивый

Question

Так я иметь эту функцию, чтобы нарисовать график, я уже изменил его немного, чтобы попытаться сделать схему отзывчивой, но им не быть в состоянии сделать это ...

здесь функция:

$(document).ready(function(){ 
       google.charts.load('current', {'packages': ['corechart']}); 
       //alert('aa00'~ 
            $('.error').hide(); 
            $(".buttonSala").click(function() { 
             // validate and process form here 
             $('.error').hide(); 
             var nome = $("#nomeSala option:selected").val(); 
             var objeto = $("#sensorSala option:selected").val(); 
             var canal = $("#canalSala option:selected").val(); 
             var datai = $("#datainisala").val(); 
             var dataf = $("#datafimsala").val(); 

            //alert(canal); 
             // Send the data using post 
             var posting = $.post("getSala.php", { canal: canal, dataini: datai, datafim: dataf, objeto: objeto }); 

             // Put the results in a div 
             posting.done(
              function drawChart1(data) { 
              // Set a callback to run when the Google Visualization API is loaded. 

               $('.box-title').html(nome); 
               var response = JSON.parse(data); 
               var jsonData = response.channels[canal].values; 
               var desciption = response.channels[canal].info.chname; 
               google.charts.setOnLoadCallback(function() { 
               dataArray = [["ts", desciption ]]; 

               for (var i = 0; i < jsonData.length; i++) 
               { 
                var tempArray = [jsonData[i].ts, parseFloat(jsonData[i].value.replace(",", "."))]; 
                dataArray.push(tempArray); 
               } 

               // Create our data table out of JSON data loaded from server. 
               var data = google.visualization.arrayToDataTable(
                 dataArray 
                 );     

               var options = { 
                curveType: 'function', 
                backgroundColor: '#fff', 
                colors: ['#5d4a50'], 
                vAxis: { 
                gridlines: { 
                 color: 'transparent' 
                }, 
                textStyle: { 
                 color: '#666', fontSize: 16 
                } 
                }, 
                legend: { position: 'bottom', textStyle: { 
                 color: '#666', fontSize: 18 
                } } 
               }; 

               // Instantiate and draw our chart, passing in some options. 
               var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
               chart.draw(data, options); 

               } 
              ); 
             }); 

              $(window).resize(function(){ 
              drawChart1(); 
             }); 


        return false; 
            }); 

            }); 

Тогда на моей CSS я уже прибавил:

.chart { 
    width: 100%; 
    min-height: 450px; 
} 

И мой HTML выглядит так:

<div class="row"> 
      <div class="col-md-12"> 
      <div id="chart_div" class="chart"></div> 
      </div> 
      </div> 

Но граф не реагирует все же ... ДИВ, где граф как прорисовывается реагирует уже, но когда я изменить размер окна, график внутри просто урезается ...

Любые sugestions?

Answer 1

первый, вы можете рассчитывать на callback от Google, чтобы знать, когда документ будет готов,
вместо ->$(document).ready(...

и callback могут быть помещены в load заявлении
нет необходимо использовать setOnLoadCallback каждый раз, когда график необходимо нарисовать

рекомендовать настройку, похожую на следующий фрагмент ...

google.charts.load('current', { 
    callback: function() { 
    var googleChart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
    var googleData = null; 

    $('.buttonSala').click(getData); 
    $(window).resize(drawChart); 

    function getData() { 
     $('.error').hide(); 
     var nome = $("#nomeSala option:selected").val(); 
     $('.box-title').html(nome); 
     var objeto = $("#sensorSala option:selected").val(); 
     var canal = $("#canalSala option:selected").val(); 
     var datai = $("#datainisala").val(); 
     var dataf = $("#datafimsala").val(); 
     var posting = $.post("getSala.php", { canal: canal, dataini: datai, datafim: dataf, objeto: objeto }); 
     posting.done(processData); 
     return false; 
    } 

    function processData(data) { 
     var response = JSON.parse(data); 
     var jsonData = response.channels[canal].values; 
     var desciption = response.channels[canal].info.chname; 
     dataArray = [["ts", desciption ]]; 

     for (var i = 0; i < jsonData.length; i++) { 
     dataArray.push([ 
      jsonData[i].ts, 
      parseFloat(jsonData[i].value.replace(",", ".")) 
     ]); 
     } 

     var googleData = google.visualization.arrayToDataTable(
     dataArray 
    ); 
     drawChart(); 
    } 

    function drawChart() { 
     if (googleData === null) { 
     return; 
     } 
     googleChart.draw(googleData, { 
     curveType: 'function', 
     backgroundColor: '#fff', 
     colors: ['#5d4a50'], 
     vAxis: { 
      gridlines: { 
      color: 'transparent' 
      }, 
      textStyle: { 
      color: '#666', 
      fontSize: 16 
      } 
     }, 
     legend: { 
      position: 'bottom', 
      textStyle: { 
      color: '#666', fontSize: 18 
      } 
     } 
     }); 
    } 
    }, 
    packages: ['corechart'] 
});