We Keep Coding

Google Chart Visualisation Bar Drawing Not Shown

I am working with Google Chart Visualisation and I'm using a Combo Chart with some data I am using. I've noticed that for certain values, the bar is not shown.
I'm using an example found at this page using JSFiddle to better explain the problem: https://developers.google.com/chart/interactive/docs/gallery/combochart
HTML code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
JavaScript code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador'],
['2004/05', 881, 938 ],
['2004/06', 880, 938 ]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
This is what the output is for this model:
But if I change the first row from ['2004/05', 881, 938] to ['2004/05', 880, 938 ] so that the Bolivia values are the same, 880, the output is the following:
and the bars are not shown anymore, because the graph begins at 880 and not 870 as in the first example.
This also reproduces for close values, e.g.
['Month', 'Bolivia', 'Ecuador'],
['2004/05', 92, 95 ],
['2004/06', 92, 95 ]
My question is: Is it possible to force the graph to always start e.g. from 870 so that the bar is always drawn?

you can use option viewWindow on the vAxis.
viewWindow has properties for min & max.
viewWindow: {
min: 870
}
see following working snippet..
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador'],
['2004/05', 880, 938 ],
['2004/06', 880, 938 ]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups',
viewWindow: {
min: 870
}
},
height: 500,
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
another option is ticks.
you can provide the value for each label to be displayed.
ticks: [870, 880, 890, 900, 910, 920, 930, 940]
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador'],
['2004/05', 880, 938 ],
['2004/06', 880, 938 ]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups',
ticks: [870, 880, 890, 900, 910, 920, 930, 940]
},
height: 500,
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How can I add min and max Threshold line in Google Line Charts

I have added line chart on my web-app and I need to add or highlight a constant line showing up in red for min-threshold value for this parameter and max-threshold for this parameter. I have gone the Google Line Charts Configuration Options but couldn't find any such options available in it. I wonder how anyone other also haven't ask this question on community so far. While searching a lot for solution to this problem I found one Fiddle related to this but it is adding an another line parameter and it showing tool-tip as that value, which I don't want to show on line chart. Also, adding it as another line in chart I find inefficient.
Thanks for help in advance.

there aren't any standard options for adding threshold lines or markers
adding another series is the only way
you can use the following option to disable tooltips...
enableInteractivity: false
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', ''],
['2004/05', 165, 938, 522, 998, 450, 250],
['2005/06', 135, 1120, 599, 1268, 288, 250],
['2006/07', 157, 1167, 587, 807, 397, 250],
['2007/08', 139, 1110, 615, 968, 215, 250],
['2008/09', 136, 691, 629, 1026, 366, 250]
]);
var options = {
seriesType: "line",
series: {
5: {
type: "steppedArea",
color: '#FF0000',
visibleInLegend: false,
areaOpacity: 0,
enableInteractivity: false
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: recommend loading the newer library loader.js instead of jsapi, according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...

You can override the automatically generated ticks with set values.
For example:
vAxes: {
0: {
title:'Left Axis Title',
ticks: [
0,
{v:460, f:'Minimum Recommended'},
{v:1840, f:'Maximum Safe'},
{v:2300, f:'100%'}
]
}
}

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.

Passing chart type parameter to custom function as google chart function

Currently i am creating chart using google chart. for this i have created one custom function called myJchart as below.
function myJChart(ChartPackage,ChartType,ChartData,ChartTitel,ChartSubtitle,Chart3D,ChartHeight,ChartWidth,ChartDivID){
google.load("visualization", "1", {packages:[ChartPackage]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(ChartData);
var options = {
title: ChartTitel,
subtitle: ChartSubtitle,
is3D: true,
height: ChartHeight,
width: ChartWidth
};
var chart = new google.visualization.PieChart(document.getElementById(ChartDivID));
chart.draw(data, options);
}
}
And Calling function
myJChart('corechart','PieChart',<?php echo $jsonTable;?>,'test','test again',true,'600','800','chart_div');
this above function is working good.
now the problem is that when i pass the ChartType parameter to google google.visualization.ChartType
i am getting below error message
Uncaught TypeError: google.visualization.ChartType is not a function
i used [ChartType] but i got this error Unexpected token [
any suggestion will help.

I would suggest using the ChartWrapper Class for this...
mainly because you only want to call google.load once.
ChartWrapper will dynamically load what it needs depending on the chart type.
google.load("visualization", "1.1", {packages:["controls"]});
google.setOnLoadCallback(googleLoaded);
// test data
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea','Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 114.6],
['2005/06', 135, 1120, 599, 1268, 288, 382],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 409.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]];
function googleLoaded() {
myJChart('corechart', 'BarChart', rowData1, 'test', 'test again', true, 600, 800, 'chart_div');
}
function myJChart(ChartPackage, ChartType, ChartData, ChartTitel, ChartSubtitle, Chart3D, ChartHeight, ChartWidth, ChartDivID){
chart = new google.visualization.ChartWrapper({
chartType: ChartType,
containerId: ChartDivID,
dataTable: google.visualization.arrayToDataTable(ChartData),
options: {
title: ChartTitel,
subtitle: ChartSubtitle,
is3D: Chart3D,
height: ChartHeight,
width: ChartWidth
}
});
chart.draw();
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

How to change Google Area Chart Overlap colour or opacity?

Regarding Google Charts, is there a way to adjust the colour or opacity between two or more overlapping areas of an area chart? I've been attempting to modify Google's sample code provided at the Area Chart development website. For convenience I have provided a copy of the sample code below. Note: If there isn't an officially supported way to do this I am interested in any dirty ways to go about it too.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new
google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
To help clarify what I hope to accomplish please see the following image.

You can add series with different areaOpacity to your options:
...
vAxis: {minValue: 0},
series: {
0: { areaOpacity: 0.2},
1: { areaOpacity: 0.7}
}