I am trying to make my Google Column Material Chart responsive, but it seems a bit choppy to me and doesnt work well at all. Can anyone help me make this flow well
The chart will only appear in that format when the page is loaded. It won’t dynamically resize when the browser window width is changed.
JSFIDDLE https://jsfiddle.net/rbla/Le8g0sw0/8/
HTML
<div id="chart">
<div id="chart_div"></div>
</div>
CSS
#chart {
border:5px solid #AAA;
width: 80%;
min-height: 450px;
}
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
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',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
// REFLOW
$(window).resize(function(){
drawChart();
});
in the fiddle, you are using JQuery to listen for window resize...
$(window).resize(function(){
drawChart();
});
however, JQuery is not included...
use addEventListener
instead, or include a reference to JQuery,
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(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',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
window.addEventListener('resize', drawChart, false);
}
#chart {
border: 5px solid #AAA;
min-height: 450px;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart">
<div id="chart_div"></div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With