La solución para hacer hacer que nuestros gráficos de google Chart sean responsive es añadir el siguiente codigo jquery:

El html y css que estemos usando ha de ser responsive,  bien manualmente, o bien usando algún sistema  Grid de algun  framework como bootstrap


$(window).resize(function(){
drawChart();

});

donde drawChart(); es la función (por defecto) que genera la gráfica de Google Charts: ejemplo completo:

 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

var options = {
title: 'My Daily Activities'
};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
}
$(window).resize(function(){
drawChart();
// drawChart2();
});
</script>

 

<div class="col-md-9">
<div id="piechart" class="chart"></div>
</div>
Hacer responsive (adaptativo) un Google chart

Un pensamiento en “Hacer responsive (adaptativo) un Google chart

  • 10 de octubre de 2016 a las 18:19
    Enlace permanente

    el problema con esto es que cada vez que haga el resize se vuelven a cargar los datos… que pasaría si estoy consultando la base de datos y es una consulta pesada?

Deja un comentario

A %d blogueros les gusta esto: