We Keep Coding

How to set Google Chart height based on number of rows?

I have a Google stacked bar chart that pulls data from a database and draws charts based on said data. I was able to search around and find a way to dynamically set the height based on the number of rows - but for one of my search filters, the charts look way off.
The code is below and works for 4 out of 5 of my filters, but in the 5th filter the number of rows becomes much larger (around 40-50).
Code:
var paddingHeight = 40;
var rowHeight = data.getNumberOfRows() * 50;
var chartHeight = rowHeight + paddingHeight;
var options = {
titlePosition: 'none',
width: 1400,
height: chartHeight,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '50%' },
isStacked: true,
hAxis: {
title: 'Business Hours (excluding weekends & holidays)'
},
colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000'
}
}
}
Produces the following results. This first image is what 4 of my 5 filters looks like.
The second image is the one in question that shows I'm clearly doing something wrong.
What is the cause of this and how can I resolve it?
Edit: I suspect my issue is one of the following:
Either my data rows are not being counted correctly as I refresh the page with the latest search parameters or I have a problem with how my divs are set up and interacting with each other. I've tried adjusting the math behind the chartHeight and removing the padding and it seems to have the same effect either way. Am I on the right track or is there something else I'm missing?

need to set options for both height and chartArea.height
here, recommend using rowHeight for chartArea.height
var paddingHeight = 40;
var rowHeight = data.getNumberOfRows() * 50;
var chartHeight = rowHeight + paddingHeight;
var options = {
titlePosition: 'none',
width: 1400,
height: chartHeight,
chartArea: {
height: rowHeight,
},
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '50%' },
isStacked: true,
hAxis: {
title: 'Business Hours (excluding weekends & holidays)'
},
colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
annotations: {
alwaysOutside: true,
textStyle: {
color: '#000000'
}
}
}
you'll want to leave some room for the legend, y-axis, etc...
chartArea has the following properties
top
left
height
width
you'll want to set top to 20 or something if legend is on top

Google Charts only using first color

I am having trouble with Google Charts Bar Chart option to change colors of my bars - I have 3 bars and 3 colors listed in the options, but the bars are only showing the first color. Any ideas why?
function drawChart2() {
var chartdata = new google.visualization.arrayToDataTable([
['Vote Choice', 'Votes'],
[$scope.PropVotes[3].description, $scope.PropVotes[3].numVotes],
[$scope.PropVotes[4].description, $scope.PropVotes[4].numVotes],
[$scope.PropVotes[5].description, $scope.PropVotes[5].numVotes]
]);
var options = {
title: $scope.Propositions[1].Title,
legend: {
position: 'top'
},
colors: ['#002c58', '#69BE28', '#A5ACAF'],
chartArea: {
width: '100%',
height: '100%'
},
bars: 'horizontal',
animation: {
startup: true,
duration: 5000,
easing: 'linear'
}
};
var chartName = 'chart_div2'; //' + $scope.PropVotes.id;
var chart = new google.charts.Bar(document.getElementById(chartName));
chart.draw(chartdata, options);
}

Change the color of some bars in google chart

I created an horizontal bar chart with Google Charts and I want to change the color of the bars that belongs to a certain range, I tried to do it by many ways
but in vain, here is my code :
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Agents', 'Percentage' ],
<?php
for($i=0;$i<sizeof($name);$i++){
echo '[\''.$name[$i].'\','.$count[$i].'],';
}
?>
]);
var options = {
title: 'EKMS Usage per agent',
width: 900,
legend: { position: 'none' },
chart: { title: 'EKMS Usage per agent',
subtitle: 'By percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
$name and $count are two arrays that I retrieved from my database and that has the same length, I tried to add a column { role: "style" } in the variable data and to
assign colors using a test like this :
var data = new google.visualization.arrayToDataTable([
['Agents', 'Percentage', { role: "style" } ],
<?php
for($i=0;$i<sizeof($name);$i++){
if($count[$i]<50)
echo '[\''.$name[$i].'\','.$count[$i].',\'red\'],';
else
echo '[\''.$name[$i].'\','.$count[$i].',\'blue\'],';
}
?>
]);
I tried also to add colors : ['blue','red'] and it changes the color of all the bars.
P.S : Note that the chart that I used is : Top X Chart Here is its link :
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#top-x-charts

It seems that google.charts.Bar component does not support style role, but you could utilize google.visualization.BarChart component from corechart package instead to customize bar styles as demonstrated below.
Example
//google.load("visualization", "1.1", {packages:["bar"]});
google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage', { role: "style" }],
["King's pawn (e4)", 44, "#b87333"],
["Queen's pawn (d4)", 31, "silver"],
["Knight to King 3 (Nf3)", 12, "gold"],
["Queen's bishop pawn (c4)", 10, "color: #e5e4e2"],
['Other', 3,"green"]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
//var chart = new google.charts.Bar(document.getElementById('top_x_div'));
var chart = new google.visualization.BarChart(document.getElementById("top_x_div"));
chart.draw(data, options);
};
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>

google chart api draws negative axis as well though minValue is 0

I have a google chart as follows which plots Age for various IDs. However, as age cannot be negative, I want it to be only on the positive axis.
I have given the minValue for vertical axis as 0, however it still shows the negative axis. How can I fix this?
My code below
function AgeChart() {
google.load("visualization", "1", {packages:["corechart"]});
var age_data = new google.visualization.DataTable();
var divname = "agediv";
age_data.addColumn('number', 'ID');
age_data.addColumn('number', 'Age');
age_data.addRow([1,10]);
age_data.addRow([1,20]);
age_data.addRow([1,30]);
age_data.addRow([1,40]);
age_data.addRow([1,50]);
var options = {'title':'Age line graph',
curveType: 'function',
viewWindowMode:'explicit',
vAxis: {title: 'Age (years)',
minValue: 0,
},
hAxis: {title: 'ID'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById(divname));
chart.draw(age_data, options);
}
EDIT: After adding the viewWindow.min value, it works for me.
function AgeChart() {
google.load("visualization", "1", {packages:["corechart"]});
var age_data = new google.visualization.DataTable();
var divname = "agediv";
age_data.addColumn('number', 'ID');
age_data.addColumn('number', 'Age');
age_data.addRow([1,10]);
age_data.addRow([1,20]);
age_data.addRow([1,30]);
age_data.addRow([1,40]);
age_data.addRow([1,50]);
var options = {'title':'Age line graph',
curveType: 'function',
viewWindowMode:'explicit',
vAxis: {title: 'Age (years)',
minValue: 0,
viewWindowMode:'explicit',
viewWindowMode:'explicit',
viewWindow:{
min:0,
}
},
hAxis: {title: 'ID'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById(divname));
chart.draw(age_data, options);
}

The minValue and maxValue may be used to extend the axis to include those values, but they do not restrict the axis to those values. What you want to do instead is use the viewWindow.min value.

On the date 26/10/2015 the actual version of Google charts requires only the following to stop displaying the negatives on the vertical axis.
var options = {
hAxis: { title: 'Dates',
},
vAxis: { title: 'Count of something',
viewWindow:{min:0},
},
};
As an option you can set up min value for more than 0 - it will give you same view.
vAxis: { title: 'Count',
minValue: 2,
},

Google Pie chart, can't set different values for 2 different graphs

I am trying to re-use a google pie chart function to draw a chart in 2 different divs.
My html :
<div class="piechart" style="height: 220px;" data-completeness="35"></div>
<div class="piechart" style="height: 220px;" data-completeness="80"></div>
My javascript:
function drawChart()
{
{#var completeness = 30;#} //this is working and setting same value to the two different charts
var completeness = $(this).attr('data-completeness'); //this is not working and charts are rendered very small
console.log(completeness); //this is dumping the right values in both cases, either the same, or two different ones as I expect
var data = google.visualization.arrayToDataTable([
['Nom', 'Valeur'],
["Profil rempli à ", completeness],
['Manque', 100 - completeness]
]);
var options = {
backgroundColor: { fill:'transparent'},
pieSliceBorderColor : 'transparent',
pieHole: 0.8,
legend: {position: 'top'},
width: 220,
height: 220,
tooltip: {trigger: 'none'},
pieStartAngle: -90,
pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
slices: {
0: { color: '#09b4ff'},
1: { color: '#444'}
},
chartArea : {width: '90%', height: '90%'}
};
var chart = new google.visualization.PieChart(this);
chart.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(function(){
$('.piechart').each(drawChart);
});
So when I set a single value, I have the following good looking graph:
When I set two different values, the result in weird:
Info : I have a
1:1 XMLHttpRequest cannot load
https://www.google.com/uds/api/visualization/1.0/dca88b1ff7033fac80178eb526cb263e/ui+en.css.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://foodmeup.dev' is therefore not allowed
access.
error in both cases, but it's diplaying well in the first case so I'm not sure it's the issue here.

.attr('data-completeness') return the string "35" and "80" so you can use parseInt to get the actual numbers or you can use .data("completeness") like this
var completeness = $(this).data('completeness');
// or parseInt($(this).attr('data-completeness'));
full code
function drawChart(){
var completeness = $(this).data('completeness');
// or parseInt($(this).attr('data-completeness'))
var data = google.visualization.arrayToDataTable([
['Nom', 'Valeur'],
["Profil rempli à ", completeness],
['Manque', 100 - completeness]
]);
var options = {
backgroundColor: { fill:'transparent'},
pieSliceBorderColor : 'transparent',
pieHole: 0.8,
legend: {position: 'top'},
width: 220,
height: 220,
tooltip: {trigger: 'none'},
pieStartAngle: -90,
pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
slices: {
0: { color: '#09b4ff'},
1: { color: '#444'}
},
chartArea : {width: '90%', height: '90%'}
};
var chart = new google.visualization.PieChart(this);
chart.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(function(){
$('.piechart').each(drawChart);
});
https://jsfiddle.net/sjsaa2xf/

enter image description here
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>