Adjust Google Charts Width at Boot Time

Question

I have this google chart on my site . This is a scatter chart at the moment, but I would like to find a solution for all types of charts. For example, if you load a site with a window width of 700 pixels, the size of the chart does not respond: the chart is too wide. Below is the code I'm using.

HTML:

<div id="chart_div"></div> 

CSS:

 #chart_div { width:100%; height:20%; } 

JS:

 var options = { title: 'Weight of pro surfer vs. Volume of his pro model', hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55 vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40}, //20 legend: 'none', width: '100%', height: '100%', colors: ['#000000'], series: { 1: { color: '#06b4c8' }, }, legend: {position: 'top right', textStyle: {fontSize: 8}}, chartArea: {width: '60%'}, trendlines: { 0: {//type: 'exponential', visibleInLegend: true, color: 'grey', lineWidth: 2, opacity: 0.2, labelInLegend: 'Linear trendline\n(Performance)' } } // Draw a trendline for data series 0. }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); google.visualization.events.addListener(chart, 'ready', myReadyHandler()); function myReadyHandler() { chartDrawn.resolve(); } 

Edit: It seems that the div #chart_div is the correct size (the one I set using css), but the diagram inside this div does not adapt to its size ... it remains locked with See Image:

Answer 1

Since the visualization API diagrams do not respond at all, you need to process everything yourself. As a rule, this means listening to the "resize window" event and then redrawing the chart (setting any measurements as necessary):

 function resize () { // change dimensions if necessary chart.draw(data, options); } if (window.addEventListener) { window.addEventListener('resize', resize); } else { window.attachEvent('onresize', resize); } 

Answer 2

None of the above were for me, or they were too complicated for me to try.

The solution I found is simple and works fine. This includes simply creating a normal Google chart, in my case a donut chart, and then styling it with CSS.

 @media screen and (max-width: 1080px) { div#donutchart { zoom:0.6; margin-left:-16%; } } 

It's all. Of course, you can set other values ​​for maximum width, scaling and margins to make your chart fit perfectly. My chart is 800x600 ( you can see it here ).

Answer 3

set the width to 100% of the chart and call the resize function below

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

Answer 4

To respond to loads:

 #chart_div { width:inherit; height:inherit; } 

While it does not work, when the screen size changes during the session.

Answer 5

If you use Twitter Bootstrap since v3.2 you can use embed-responsive styles:

 <div class="embed-responsive embed-responsive-16by9"> <div id="chart_div" class="embed-responsive-item"></div> </div> 

Or if you need a 4: 3 aspect ratio:

 <div class="embed-responsive embed-responsive-4by3"> <div id="chart_div" class="embed-responsive-item"></div> </div> 

Answer 6

The more efficient resizing fragment is lower and reused;

 //bind a resizing function to the window $(window).resize(function() { if(this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 500); }); //usage of resizeEnd $(window).bind('resizeEnd', function() { DoSomething(); }); 

Answer 7

The best solution is to change the appearance of the chart when resizing the window:

 google.charts.load('current', {packages: ['corechart', 'bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Value'); data.addColumn('number', 'Sites'); data.addColumn({type: 'string', role: 'tooltip'}); data.addColumn({type: 'string', role: 'style'}); data.addRows([ ['valueA', 57, 'Value A is 57', 'stroke-color: #000; stroke-width: 1'], ['valueB', 19, 'Value B is 19', 'stroke-color: #000; stroke-width: 1'], ['valueC', 25, 'Value C is 25', 'stroke-color: #000; stroke-width: 1'] ]); var options = { colors: ['#fff2af'], hAxis: {textPosition: 'none',textStyle:{color:'#fff'}}, vAxis: {gridlines: {color: '#fff'},textStyle:{color:'#fff'}}, legend: {position: 'none'}, backgroundColor: '#aadaff' }; var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div')); chart.draw(data, options); $(window).resize(function(){ var view = new google.visualization.DataView(data); chart.draw(view, options); }) } 

Answer 8

I found this code example useful for code: Example code for adjusting Google graphs They redraw the graph when the window is resized using jQuery:

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

Answer 9

Just do not set the "width" property in the JS diagram. This will automatically set the width at boot time.

Some code:

 <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = { title: "Density of Precious Metals, in g/cm^3", height: 400 //width: 1100, <--- DON'T SET THIS OPTION, it will be set automatically depending on the size of the container div }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> <!--Div that will hold the pie chart--> <div id="chart_div" class="mt-3" style="height: 400px; width: 100%; border: 1px solid #CCCCCC"></div>