Google Chart: Altering height of chart dynamically, based on the resultset, after dependent controls are applied
9,759 views
Skip to first unread message
uerec
May 13, 2011, 9:21:09 AM5/13/11
to Google Visualization API
Hi all,
The charts have recently provided the ability to filter the graph
results using some native controls.
The majority of the code I provide below is taken directly from the
new 'Dependent controls' example in the Google Chart API playground.
My problem is directly related to this new dynamic functionality.
I have a large dataset of 4000+ rows, which I want to display in one
hbar graph. I don't know how many rows there will be but I can use the
following code to find out.
var initialHeight = data.getNumberOfRows() * 60
This isn't implemented in the code block below, but it does work.
The problem I have is that the chart height needs to be very tall in
order to display all of the 4000+ records. But the chart height does
not change when the dependent controls are applied. Instead of
resizing, the data 'grows' to fill the original graph height. The bars
in the chart just become taller within the same space. Therefore, when
my 4000+ records are filtered down to just one record, that one record
is as tall as the initial 4000+.
I have a partial fix for this, all I need is to be able to calculate
one value and I can continue writing my fix. Please help....
When the dependent controls are applied, I want the height to be re-
adjusted. As I can find no way to alter the height of the graph
itself, I am attempting to do this by using JQUERY to alter the size
of the DIV surrounding the graph, which in turn alters the graph size.
This works because the graph inherits its size from the surrounding
DIV, if its not explicitly set.
The chart is resizing as I want it to in the code below. At the moment
the size alters in relation to the size of the browser window. You
will see that the graph grows and shrinks to always equal 100% of your
browser window size, when you change the size of your browser window.
My idea is to use this functionality, but to alter the DIV using the
same code used to calculate the initial size, after the dependent
controls are applied.
So, my next step is to work out is what the total number of rows is
when the filter is applied (on: draw(data)). Can anyone help with this
as I cannot work out how to get it???
I can't believe that it's impossible, although I have spent 2 days
working on this single problem.
Or, maybe there is a simple alternative which I haven't ran into?
(I realise that I am still some way off and have other hurdles to jump
after this one.)
Here is the (partially working) code.
(BTW, when you first launch the script below, the screen will be
blank. You need to alter the size of your browser window to trigger
the $(document).ready(function() in order to display the graph.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://jquery.com/files/social/js/jquery.tabs.js"></
script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
// the var 'data' is global because there is no 'var' at the
beginning.
data = google.visualization.arrayToDataTable([
['Country', 'Region/State', 'City', 'Population'],
['USA', 'California', 'San Francisco', 776733],
['USA', 'California', 'Los Angeles', 3694820],
['USA', 'California', 'Mountain View', 70708],
['USA', 'New York', 'New York', 8175173],
['USA', 'New York', 'Albany', 857592],
['France', 'Ile-de-France', 'Paris', 2193031],
['France', 'Ile-de-France', 'Orly', 21372],
['France', 'Provence', 'Marseille', 852395],
['France', 'Provence', 'Nice', 348556]
]);
data = new google.visualization.DataView(data);
// Define category pickers for 'Country', 'Region/State' and
'City'
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Country',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false
}
}
});
var regionPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Region/State',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false
}
}
});
var cityPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'City',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'options': {
'width': '100%',
'height': '100%',
'chartArea': {top: 0, right: 0, bottom: 0}
},
// Configure the barchart to use columns 2 (City) and 3
(Population)
'view': {'columns': [2, 3]}
});
// Create the dashboard.
new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the controls so that:
// - the 'Country' selection drives the 'Region' one,
// - the 'Region' selection drives the 'City' one,
// - and finally the 'City' output drives the chart
bind(countryPicker, regionPicker).
bind(regionPicker, cityPicker).
bind(cityPicker, barChart).
// Draw the dashboard
draw(data);
}
// jQuery function, called when page load is complete
// when the window is resized, redraw the graph to the new
size
$(document).ready(function() {
$(window).bind("resize", function(event) {
//set the graph size
setGraphSize();
//redraw the chart
drawVisualization();
});
/*
$('#control1').bind("click", function(event) {
//set the graph size
setGraphSize();
//redraw the chart
drawVisualization();
//alert(rows);
});
$('#control2').bind("click", function(event) {
//set the graph size
setGraphSize();
//redraw the chart
drawVisualization();
//alert(rows);
});
$('#control3').bind("click", function(event) {
//set the graph size
setGraphSize();
//redraw the chart
drawVisualization();
//alert(rows);
});
*/
});
// sets the graph size to the full size of the browser window
function setGraphSize() {
$('#chart1').height($(window).height());
$('#chart1').width($(window).width());
}
</script>
</head>
<body style="font-family: Arial;border: 0px;">
<div id="dashboard">
<table>
<tr>
<td font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
</tr>
<tr>
<td style='background-color:#EEEEEE;'>
<div style="float: left;" id="chart1"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
Thanks in advance for all your help.
The charts have recently provided the ability to filter the graph
results using some native controls.
The majority of the code I provide below is taken directly from the
new 'Dependent controls' example in the Google Chart API playground.
My problem is directly related to this new dynamic functionality.
I have a large dataset of 4000+ rows, which I want to display in one
hbar graph. I don't know how many rows there will be but I can use the
following code to find out.
var initialHeight = data.getNumberOfRows() * 60
This isn't implemented in the code block below, but it does work.
The problem I have is that the chart height needs to be very tall in
order to display all of the 4000+ records. But the chart height does
not change when the dependent controls are applied. Instead of
resizing, the data 'grows' to fill the original graph height. The bars
in the chart just become taller within the same space. Therefore, when
my 4000+ records are filtered down to just one record, that one record
is as tall as the initial 4000+.
I have a partial fix for this, all I need is to be able to calculate
one value and I can continue writing my fix. Please help....
When the dependent controls are applied, I want the height to be re-
adjusted. As I can find no way to alter the height of the graph
itself, I am attempting to do this by using JQUERY to alter the size
of the DIV surrounding the graph, which in turn alters the graph size.
This works because the graph inherits its size from the surrounding
DIV, if its not explicitly set.
The chart is resizing as I want it to in the code below. At the moment
the size alters in relation to the size of the browser window. You
will see that the graph grows and shrinks to always equal 100% of your
browser window size, when you change the size of your browser window.
My idea is to use this functionality, but to alter the DIV using the
same code used to calculate the initial size, after the dependent
controls are applied.
So, my next step is to work out is what the total number of rows is
when the filter is applied (on: draw(data)). Can anyone help with this
as I cannot work out how to get it???
I can't believe that it's impossible, although I have spent 2 days
working on this single problem.
Or, maybe there is a simple alternative which I haven't ran into?
(I realise that I am still some way off and have other hurdles to jump
after this one.)
Here is the (partially working) code.
(BTW, when you first launch the script below, the screen will be
blank. You need to alter the size of your browser window to trigger
the $(document).ready(function() in order to display the graph.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://jquery.com/files/social/js/jquery.tabs.js"></
script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
// the var 'data' is global because there is no 'var' at the
beginning.
data = google.visualization.arrayToDataTable([
['Country', 'Region/State', 'City', 'Population'],
['USA', 'California', 'San Francisco', 776733],
['USA', 'California', 'Los Angeles', 3694820],
['USA', 'California', 'Mountain View', 70708],
['USA', 'New York', 'New York', 8175173],
['USA', 'New York', 'Albany', 857592],
['France', 'Ile-de-France', 'Paris', 2193031],
['France', 'Ile-de-France', 'Orly', 21372],
['France', 'Provence', 'Marseille', 852395],
['France', 'Provence', 'Nice', 348556]
]);
data = new google.visualization.DataView(data);
// Define category pickers for 'Country', 'Region/State' and
'City'
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Country',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false
}
}
});
var regionPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Region/State',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false
}
}
});
var cityPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'City',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'options': {
'width': '100%',
'height': '100%',
'chartArea': {top: 0, right: 0, bottom: 0}
},
// Configure the barchart to use columns 2 (City) and 3
(Population)
'view': {'columns': [2, 3]}
});
// Create the dashboard.
new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the controls so that:
// - the 'Country' selection drives the 'Region' one,
// - the 'Region' selection drives the 'City' one,
// - and finally the 'City' output drives the chart
bind(countryPicker, regionPicker).
bind(regionPicker, cityPicker).
bind(cityPicker, barChart).
// Draw the dashboard
draw(data);
}
// jQuery function, called when page load is complete
// when the window is resized, redraw the graph to the new
size
$(document).ready(function() {
$(window).bind("resize", function(event) {
//set the graph size
setGraphSize();
//redraw the chart
drawVisualization();
});
/*
$('#control1').bind("click", function(event) {
//set the graph size
setGraphSize();
//redraw the chart
drawVisualization();
//alert(rows);
});
$('#control2').bind("click", function(event) {
//set the graph size
setGraphSize();
//redraw the chart
drawVisualization();
//alert(rows);
});
$('#control3').bind("click", function(event) {
//set the graph size
setGraphSize();
//redraw the chart
drawVisualization();
//alert(rows);
});
*/
});
// sets the graph size to the full size of the browser window
function setGraphSize() {
$('#chart1').height($(window).height());
$('#chart1').width($(window).width());
}
</script>
</head>
<body style="font-family: Arial;border: 0px;">
<div id="dashboard">
<table>
<tr>
<td font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
</tr>
<tr>
<td style='background-color:#EEEEEE;'>
<div style="float: left;" id="chart1"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
Thanks in advance for all your help.
Riccardo Govoni
May 16, 2011, 12:36:47 PM5/16/11
to google-visua...@googlegroups.com
Hi,
If I understand correctly, you want to resize the chart whenever the number of rows displayed changes, so that each bar maintains the same thickness. Right?
what about this:
- dashboard fires a 'ready' event whenever any part of it redraws (such as the chart redrawing because of a control change)
- you can always query a chartwrapper (or controlwrapper) and ask it for the datatable it received in its last draw (via chartWrapper.getDataTable())
so you could add a 'ready' event listener to the dashboard and resize the chart whenever its size is not the one you want:
...
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
google.visualization.events.addListener(dash, 'ready', function() {
// Dashboard redraw, have a look at how many rows the barChart is displaying
var numRows = barChart.getDataTable().getNumberOfRows();
var expectedHeight = numRows * 60;
if (parseInt(barChart.getOption('height'), 10) != expectedHeight) {
// Update the chart options and redraw just it
barChart.setOption('height', expectedHeight);
barChart.draw();
}
});
dash.bind(...);
dash.draw(data);
I tried it briefly locally and it seems to work.
Mind that barChart.draw() triggers a dashboard 'ready' event too (since the chart is part of the dashboard), so that if() statement that I added is important to avoid entering an infinite loop where the 'ready' event handler keeps calling itself.
/R.
uerec
May 18, 2011, 8:38:42 AM5/18/11
to Google Visualization API
Thanks a million, that was exactly what I required.
I owe you a pint!
H.
I owe you a pint!
H.
Leo Solano
Feb 19, 2014, 8:58:46 PM2/19/14
to google-visua...@googlegroups.com
Where can I add a specific height and width for my chart, mine is displaying properly in chrome and not in Firefox, where it had shrunken.
As you can see on my page:
leosolano.com/fpa/index.html
As you can see on my page:
leosolano.com/fpa/index.html
I had to add several <br> and a line of text to force the thing to open and show the chart! but the tool tips are showing way above the chart now.
Any ideas?
Thanks in advance,
Leo
asgallant
Feb 20, 2014, 10:43:51 AM2/20/14
to google-visua...@googlegroups.com
Your HTML is malformed:
<span id='columnchart'</span>
is missing the closing ">" of the opening tag:
<span id='columnchart'></span>
I copied your code, HTML, and CSS into a fiddle, and it works fine when you correct the typo in the HTML: http://jsfiddle.net/asgallant/76s8V/
I copied your code, HTML, and CSS into a fiddle, and it works fine when you correct the typo in the HTML: http://jsfiddle.net/asgallant/76s8V/
Leo Solano
Feb 20, 2014, 11:57:53 AM2/20/14
to google-visua...@googlegroups.com
Thank you Drew!!
But it does not work in IE...(see attachment) - any ideas?
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/VcgHvrCrCNM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Leo Solano
Feb 20, 2014, 11:58:40 AM2/20/14
to google-visua...@googlegroups.com
sorry, here is the attachment!
On 20 February 2014 10:43, asgallant <drew_g...@abtassoc.com> wrote:
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/VcgHvrCrCNM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
asgallant
Feb 20, 2014, 12:03:19 PM2/20/14
to google-visua...@googlegroups.com
There is a security issue with IE and Google Docs that prevents the queries from working unless the user is logged in to Google Docs (even when the spreadsheet is publicly viewable), which is likely the cause of the error message.
On Thursday, February 20, 2014 11:58:40 AM UTC-5, Leo Solano wrote:
sorry, here is the attachment!
On 20 February 2014 10:43, asgallant <drew_g...@abtassoc.com> wrote:
Your HTML is malformed:<span id='columnchart'</span>is missing the closing ">" of the opening tag:<span id='columnchart'></span>
I copied your code, HTML, and CSS into a fiddle, and it works fine when you correct the typo in the HTML: http://jsfiddle.net/asgallant/76s8V/
On Wednesday, February 19, 2014 8:58:46 PM UTC-5, Leo Solano wrote:Where can I add a specific height and width for my chart, mine is displaying properly in chrome and not in Firefox, where it had shrunken.
As you can see on my page:
leosolano.com/fpa/index.htmlI had to add several <br> and a line of text to force the thing to open and show the chart! but the tool tips are showing way above the chart now.
Any ideas?Thanks in advance,
Leo
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/VcgHvrCrCNM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Leo Solano
Feb 20, 2014, 12:11:24 PM2/20/14
to google-visua...@googlegroups.com
On my Firefox (27.0) your link looks like this (see attachment).
???
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
asgallant
Feb 20, 2014, 12:21:45 PM2/20/14
to google-visua...@googlegroups.com
Try is using a div instead of a span as the container: http://jsfiddle.net/asgallant/76s8V/1/
On Thursday, February 20, 2014 12:11:24 PM UTC-5, Leo Solano wrote:
On my Firefox (27.0) your link looks like this (see attachment).???
On 20 February 2014 12:03, asgallant <drew_g...@abtassoc.com> wrote:
There is a security issue with IE and Google Docs that prevents the queries from working unless the user is logged in to Google Docs (even when the spreadsheet is publicly viewable), which is likely the cause of the error message.
On Thursday, February 20, 2014 11:58:40 AM UTC-5, Leo Solano wrote:
sorry, here is the attachment!
On 20 February 2014 10:43, asgallant <drew_g...@abtassoc.com> wrote:
Your HTML is malformed:<span id='columnchart'</span>is missing the closing ">" of the opening tag:<span id='columnchart'></span>
I copied your code, HTML, and CSS into a fiddle, and it works fine when you correct the typo in the HTML: http://jsfiddle.net/asgallant/76s8V/
On Wednesday, February 19, 2014 8:58:46 PM UTC-5, Leo Solano wrote:Where can I add a specific height and width for my chart, mine is displaying properly in chrome and not in Firefox, where it had shrunken.
As you can see on my page:
leosolano.com/fpa/index.htmlI had to add several <br> and a line of text to force the thing to open and show the chart! but the tool tips are showing way above the chart now.
Any ideas?Thanks in advance,
Leo
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/VcgHvrCrCNM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/VcgHvrCrCNM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Leo Solano
Feb 20, 2014, 12:30:27 PM2/20/14
to google-visua...@googlegroups.com
You are a genius! thanks very much!
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Reply all
Reply to author
Forward
0 new messages