Redibujar / escalar el gráfico de Google al cambiar el tamaño de la ventana

¿Cómo redibujo / cambio la escala de un gráfico de líneas de Google al cambiar el tamaño de la ventana?

Para volver a dibujar solo cuando se completa el cambio de tamaño de la ventana y evitar múltiples disparadores, creo que es mejor crear un evento:

//create trigger to resizeEnd event     
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

//redraw graph when window resize is completed  
$(window).on('resizeEnd', function() {
    drawChart(data);
});

El código original de Google simplemente hace esto al final:

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

Cambiándolo con un poco de javascript, puede escalarlo cuando la ventana cambia de tamaño:

function resize () {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

window.onload = resize;
window.onresize = resize;

Dado que el window.resizeevento se activa varias veces en cada evento de cambio de tamaño, creo que la mejor solución es usar smartresize.js y usar smartdraw(). Esto limita el número de redibujados de gráficos por window.resize.

Al usar los js proporcionados, puede hacerlo de la siguiente manera:

// Instantiate and draw our user charts, passing in some options (as you probably were doing it)
var chart = new google.visualization.LineChart(document.getElementById('div_chart'));
chart.draw(data, options);

// And then:
$(window).smartresize(function () {
    chart.draw(data, options);
});

Esta es la forma más sencilla en la que puedo solucionarlo sin causar demasiado estrés al navegador:

    var chart1 = "done";

$(window).resize(function() {
if(chart1=="done"){
chart1 = "waiting";
setTimeout(function(){drawChart();chart1 = "done"},1000);
}
});

Todo lo que hace es esperar 1 segundo antes de que se recargue el gráfico y no permite que la función vuelva a llamar en este período de espera. Como las funciones de cambio de tamaño de la ventana se llaman varias veces cada vez que cambia el tamaño de la ventana, esto ayuda a que la función solo funcione una vez cada vez que cambia el tamaño de la ventana, el resto de las llamadas se detienen con la instrucción if.

espero que esto ayude

No hay ninguna opción en la API de visualización de Google para hacer que los gráficos de Google sean receptivos.

Pero podemos hacer que los gráficos de Google respondan a los cambios de tamaño de las ventanas . Para que Google Chart responda, hay una biblioteca jQuery disponible en GitHub: jquery-smartresize con licencia MIT License, que tiene la capacidad de cambiar el tamaño de los gráficos en el evento de cambio de tamaño de la ventana.

Este proyecto en GitHub tiene dos archivos de script: -

jquery.debouncedresize.js: adds a special event that fires once after the window
has been resized.

Y

jquery.throttledresize.js: adds a special event that fires at a reduced rate (no 
more double events from Chrome and Safari).

Aquí hay dos ejemplos de gráficos receptivos ...

1. Gráfico circular de Google receptivo
2. Gráfico de barras receptivo de Google

Podemos cambiar el relleno inferior de visualization_wrap para que coincida con la relación de aspecto deseada del gráfico.

Calculate as Height / Width x 100
For a 16x9 display it would be 9/16 = 0.5625 x 100 = 56.25%
For a square it'd be 100%

Podemos personalizar ChartArea opción de gráficos de Google para asegurarse de que las etiquetas no queden cortados al redimensionar .

Redibujar / cambiar la escala de un gráfico de líneas de Google al cambiar el tamaño de la ventana:

$(document).ready(function () {
    $(window).resize(function(){
        drawChart();
    });
});

Personalmente, prefiero el siguiente enfoque, si puede vivir con el uso de addEventListener y no le importa la falta de soporte para IE <9.

var windowResizeTimer;
window.addEventListener('resize', function(e){
    clearTimeout(windowResizeTimer);
    windowResizeTimer = setTimeout(function(){
        chart.draw(data, options);
    }, 750);
});

Observe el uso de la setTimeout()y clearTimeout()las funciones y el retraso añadido de 750 milisegundos, lo que hace que este un poco menos intensa cuando hay varios eventos de cambio de tamaño fuego en rápida sucesión (que es a menudo el caso de los navegadores de escritorio al cambiar el tamaño usando un ratón).

He estado estancado en lo mismo durante días y descubrí que agregar un evento funciona mejor.

window.addEventListener("resize", drawChart);

Simplemente agregue esta línea después de declarar su función y funcionará bien.

Reemplace drawChart con el nombre de su función.

Usando la respuesta de Tiago Castro , he implementado un gráfico de líneas para mostrar la demostración.

google.load('visualization', '1', {
  packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Compute Time');
  data.addColumn('number', 'Compute Times');
  console.log("--");
  data.addRows([
    [0, 0, 0],
    [10, 10, 15],
    [20, 20, 65]
  ]);
  console.log(data);
  var options = {
    height: 350,
    legend: {
      position: 'bottom'
    },
    hAxis: {
      title: 'Nb Curves'
    },
    vAxis: {
      title: 'Time (ms)'
    },
    backgroundColor: '#f1f8e9'
  };

  function resize() {
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
  window.onload = resize();
  window.onresize = resize;

}

<script src='https://www.google.com/jsapi'></script>
<div id="chart_div">