We Keep Coding

Google Bar Chart Not Changing Background Color

I'm using the google Material Charts static api library and I cannot figure out why the background color I"m entering is not reflecting the change when the page loads.
Here are the options I have:
var options = {
backgroundColor: '#E8E4D8',
chart: {
title: 'Coaches by Service',
subtitle: 'Coaches by Services: From 2016-09-10 until Today'
}
};
And here is how I'm instantiating the chart:
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
The chart title and subtitle are correctly displaying, any advice as to why the background color remains as the default white would be greatly appreciated.

Is there more you can share? Appears to work here...
Maybe, check the version you're loading.
Here, I use frozen version '44', instead of 'current'.
There have been recent issues.
google.charts.load('44', {
callback: drawChart,
packages: ['bar']
});
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 = {
backgroundColor: '#E8E4D8',
chart: {
title: 'Coaches by Service',
subtitle: 'Coaches by Services: From 2016-09-10 until Today'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

For me it was missing google.charts.Bar.convertOptions
Originally it was like this.
chart.draw(data, options);
This works:
chart.draw(data, google.charts.Bar.convertOptions(options));

How to resize charts to fit the parent container with Google API

So I created a combo chart using the visualization API from Google, but im having problems resizing said chart to fit its parent container
That's how it looks on the website, The parent container's width is the one hovered. And i want the chart to fill the entire parent's width.
I have a panel system, in which each tab will have a different chart. the first one works like a charm, I dont have a problem with that one it fills the parent's container width correctly, but the second one is the one im having problems with.
Here's the HTML
<div class="tab-pane fade in active" id="anuales">
<div id ="anual-bar-chart" height ="500px" ></div>
</div>
<div class="tab-pane fade in" id="semestre-1">
<div id ="semester-1-chart" height="500px"></div>
</div>
And here's the js file to draw the charts
google.load("visualization", "1", {packages:["corechart", 'bar']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['1997', 39520,732,39,10332,489,6033,88,0,7154],
['1998', 39113,728,61,9908,607,6261,82,0,7095],
['1999', 41007,825,58,10476,611,6103,74,0,7394],
['2000', 40337,898,30,10479,685,6198,80,0,7338],
['2001', 38132,847,10,9856,849,6288,78,0,7008],
['2002', 36933,856,7,9532,826,6425,96,0,6834],
['2003', 38688,858,63,9600,915,6731,139,0,7124],
['2004', 39612,919,40,9088,962,6674,199,0,7187],
['2005', 40985,1053,6,8785,1037,6874,215,0,7369],
['2006', 38863,1031,28,9023,1063,6954,164,0,7141],
['2007', 42757,1226,0,9318,1177,7169,3,0,8596],
['2008', 41310,1268,1,8842,1224,7676,1,0,7540],
['2009', 41155,1227,4,8185,1136,7757,5,0,7434],
['2010', 10867,1258,3,8268,1200,8250,3,330,7522],
['2011', 41760,1314,2,8977,1356,8077,5,987,7810],
['2012', 41553,1386,4,9240,1400,8622,7,782,7874],
['2013', 40953,1415,0,9726,1603,9107,11,622,7930],
['2014', 40981,1305,0,9713,1516,9349,5,619,7936],
['2015', 27017,887,0,6342,1227,3085,3,398,5245],
]);
var options = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['Ene-15',3865,897,586,130,138,0,0,38,0],
['Feb-15',3322,793,818,166,143,0,0,62,0],
['Mar-15',3314,802,745,156,88,0,0,52,0],
['Abr-15',3289,714,653,159,106,0,1,35,0],
['May-15',3153,718,662,155,20,0,0,37,0],
['Jun-15',3349,728,901,162,103,0,0,42,0],
['Jul-15',3254,697,797,168,10,0,2,70,0],
['Ago-15',3462,736,1182,131,123,0,0,62,0],
]);
var options2 = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
chart2.draw(data2, options2);
}
The one that's named char2 at the bottom is the chart that im having problems with. I put the other one for u to see that I'm using the same configuration, but somehow it's displaying the charts different.
Can someone tell me what can I do, cause I've been looking around and there's nothing. I tried resizing the "chartArea" configuration that the api mentioned, but that only takes out the labels, but doesn't fit the parents container.

Google Charts don't resize automatically. They have to be redrawn when things resize (and showing/hiding is a resize).
I believe the code below, which I ripped off this question should solve your problem (you will need jquery too):
//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);
});

I wonder if my suggestion will solve your problem... Shouldn't you make two separate calls to draw the graphics? Perhaps your first bar chart is influencing your second because you have them bundled into one function call. For one of my projects I needed to deliver a piechart and a geochart and so I created a separate function to call them individually.
Please try this:
function drawCharts(){
anualBarChart();
semester1Chart();
}
function anualBarChart(){
var data = google.visualization.arrayToDataTable([
['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['1997', 39520,732,39,10332,489,6033,88,0,7154],
['1998', 39113,728,61,9908,607,6261,82,0,7095],
['1999', 41007,825,58,10476,611,6103,74,0,7394],
['2000', 40337,898,30,10479,685,6198,80,0,7338],
['2001', 38132,847,10,9856,849,6288,78,0,7008],
['2002', 36933,856,7,9532,826,6425,96,0,6834],
['2003', 38688,858,63,9600,915,6731,139,0,7124],
['2004', 39612,919,40,9088,962,6674,199,0,7187],
['2005', 40985,1053,6,8785,1037,6874,215,0,7369],
['2006', 38863,1031,28,9023,1063,6954,164,0,7141],
['2007', 42757,1226,0,9318,1177,7169,3,0,8596],
['2008', 41310,1268,1,8842,1224,7676,1,0,7540],
['2009', 41155,1227,4,8185,1136,7757,5,0,7434],
['2010', 10867,1258,3,8268,1200,8250,3,330,7522],
['2011', 41760,1314,2,8977,1356,8077,5,987,7810],
['2012', 41553,1386,4,9240,1400,8622,7,782,7874],
['2013', 40953,1415,0,9726,1603,9107,11,622,7930],
['2014', 40981,1305,0,9713,1516,9349,5,619,7936],
['2015', 27017,887,0,6342,1227,3085,3,398,5245],
]);
var options = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
chart.draw(data, options);
}
function semester1Chart(){
var data2 = google.visualization.arrayToDataTable([
['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['Ene-15',3865,897,586,130,138,0,0,38,0],
['Feb-15',3322,793,818,166,143,0,0,62,0],
['Mar-15',3314,802,745,156,88,0,0,52,0],
['Abr-15',3289,714,653,159,106,0,1,35,0],
['May-15',3153,718,662,155,20,0,0,37,0],
['Jun-15',3349,728,901,162,103,0,0,42,0],
['Jul-15',3254,697,797,168,10,0,2,70,0],
['Ago-15',3462,736,1182,131,123,0,0,62,0],
]);
var options2 = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
chart2.draw(data2, options2);
}
google.load("visualization", "1", {packages:["corechart","bar"]});
google.setOnLoadCallback(drawCharts);
The more I think about it, this shouldn't make a difference. Let me know if it is a bust and I'll remove it rather than copping down votes.

Draw a based line in Google line chart

I working with Google line chart I want to draw a based line but I don't know how should I do that for example I want to draw line in 2004 between 400 and 600 how should I do that
here Google Sample:
<html>
<head>
<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([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

You can do this in a few different ways, depending on exactly what you want to achieve. The easiest way is to use "interval" role columns:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {role: 'interval', type: 'number'}, {role: 'interval', type: 'number'}],
['2004', 1000, 400, 400, 600],
['2005', 1170, 460, null, null],
['2006', 660, 1120, null, null],
['2007', 1030, 540, null, null]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
There is quite a bit of customization you can do with intervals, see the documentation.
Another way is to add a new series of data for this line, change the data type of the first column from "string" to "number", and add multiple rows of data with the same x-values, eg:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'vertical lines'],
[2004, 1000, 400, 400],
[2004, null, null, 600],
[2005, 1170, 460, null],
[2006, 660, 1120, null],
[2007, 1030, 540, null]
]);
var options = {
title: 'Company Performance',
interpolateNulls: true, // this prevents your other lines from breaking
series: {
2: {
// these options control your new series for the vertical lines
visibleInLegend: false, // hide from the legend
enableInteractivity: false // make the line non-interactive
color: '#9055a6' // set the color of the line
// etc...
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

Different Color to Label

How can I give different colors to the x-axis labels of Google Visualization like 2004, 2005, 2006, 2007 in the first figure of below link?
https://developers.google.com/chart/interactive/docs/gallery/linechart.
I have used this code.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

options = [{
//you can set the baseline color of the axis and the text like :
hAxis: {
baselineColor: '#c9311b',
textStyle:{color: 'red'}
},
vAxis: {
baselineColor: '#cccccc',
textStyle:{color: 'yellow'}
},
// and the series (labels) like :
series=[{targetAxisIndex:0,
color:'red'},
{targetAxisIndex:1,
color:'blue'
}]
}]
where the targetAxisIndex the dimension is

Google Chart -- add "recession bars"

I have a Google Chart that works great. To add context to this chart, I need to add a series in the background that distinguishes weekends visually. The desired effect shown as applied to recession periods rather than weekends is at the bottom. Is it possible to create this effect using Google Visualization?
Here is the chart:
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<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([
... DATA ...
]);
var formatter = new google.visualization.NumberFormat(
{prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column
formatter.format(data, 2); // Apply formatter to second column
formatter.format(data, 3); // Apply formatter to second column
var options = {isStacked: true, vAxis: {format: '$#,###'}, title:"MTS Revenue" };
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

Yes, you can accomplish this effect with a ComboChart.
The general concept is to make your stacked bar chart, and then add a series that shows the max value of your chart as a separate column on weekends, and plot that series as a steppedArea chart. This will make it look like a background for certain series.
Here is an example (copy paste in to Google Playground):
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 0],
['2005/06', 135, 1120, 599, 1268, 288, 4000],
['2006/07', 157, 1167, 587, 807, 397, 0],
['2007/08', 139, 1110, 615, 968, 215, 4000],
['2008/09', 136, 691, 629, 1026, 366, 0]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups", minValue: 0, maxValue: 4000},
hAxis: {title: "Month"},
seriesType: "bars",
isStacked: true,
series: {5: {type: "steppedArea", lineWidth: 0, showInLegend: false}}
});
}