We help IT Professionals succeed at work.

How to make google charts responsive

Black Sulfur
Black Sulfur asked
on
8,574 Views
Last Modified: 2018-02-06
I am using the column chart:

https://developers.google.com/chart/interactive/docs/gallery/columnchart

and have noticed that it isn't responsive, displaying horribly on mobile and small screens. Any ideas on how to make it responsive?
Comment
Watch Question

CERTIFIED EXPERT
Distinguished Expert 2017
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Thanks,

I did already try that but it didn't work. Maybe I am just not doing it properly. Here is my div:

<div class="col-md-12 col-lg-6 col-sm-12 col-xs-12">
	<div class="white-box">
		<h3 class="box-title">Target VS Actual</h3>
		<div id="columnchart_material" style="width: 500px; height: 500px;"></div>
	</div>
</div>

Open in new window


And the chart:


 
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

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

Open in new window

CERTIFIED EXPERT
Distinguished Expert 2017
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Ah, that worked! :)