Hide Chart until categroies are selected

[David Rodger]

Hi there

Is it possible to hide a chart from view until 2 out of 3 categories
are selected or even make certain categories a required field then the
chart is viewable.

We have a considerable amount of data displayed which make the chart
look overcrowded until categories are selected.

Thanking you

[Viz Kid]

Hi

I'm not sure what you meant by "categories" and "selected".

  Viz Kid

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[David Rodger]

Ok so we have 3 category pickers that are binded with the chart, so if
only 2 sets of valuess are selected from the pickers it will display
the chart, but if none or 1 is selected the chart will not display.

I am also getting an a is null error on the first 2 category pickers
although they are still working fine.?

<script type="text/javascript" src="http://www.google.com/jsapi"></
script><script type="text/javascript">
google.load('visualization', '1.1', {packages:
['corechart','controls']});


function drawVisualization() {
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
dataSourceUrl: 'GOOGLE SPREADSHEET',


containerId: 'control1',
options: {
'filterColumnIndex': '2',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}

}
});


var categoryPicker1 = new
google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
dataSourceUrl: 'GOOGLE SPREADSHEET',



containerId: 'control2',
options: {
'filterColumnLabel': 'Region',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}

}
});



var categoryPicker2 = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
dataSourceUrl:'GOOGLE SPREADSHEET',



containerId: 'control3',
options: {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}

}
});


var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
dataSourceUrl:'GOOGLE SPREADSHEET',



'containerId': 'chart1',
'options': {
'width': 400,
'height': 300,
tooltipTextStyle : {color: 'black'} ,
'hAxis': {minValue: 0, maxnValue: 3200},
'vAxis': {textPosition: 'none'},
'chartArea': {top: 0, right: 0, bottom: 0}
},
// Configure the barchart to use columns 2 (City) and 3
(Population)
'view': {'columns': [ 26, 5, 6, 7, 8, 9]}
});
var barChart1 = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
dataSourceUrl:'GOOGLE SPREADSHEET',



'containerId': 'chart2',
'options': {
'width': 400,
'height': 300,
'chartArea': {top: 0, right: 0, bottom: 0}
},
// Configure the barchart to use columns 2 (City) and 3
(Population)
'view': {'columns': [ 25, 10, 11, 12, 13, 14]}
});
var barChart2 = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
dataSourceUrl:'GOOGLE SPREADSHEET',



'containerId': 'chart3',
'options': {
'width': 400,
'height': 300,
'chartArea': {top: 0, right: 0, bottom: 0}
},

'view': {'columns': [ 25, 15, 16, 17, 18, 19]}
});
var barChart3 = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
dataSourceUrl:'GOOGLE SPREADSHEET',



'containerId': 'chart4',
'options': {
'width': 400,
'height': 300,
'chartArea': {top: 0, right: 0, bottom: 0}
},

'view': {'columns': [ 25, 20, 21, 22, 23, 24]}
});





new
google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker, categoryPicker1, categoryPicker2],
[barChart, barChart1, barChart2, barChart3])



categoryPicker.draw();
categoryPicker1.draw();
categoryPicker2.draw();
barChart.draw();
barChart1.draw();
barChart2.draw();
barChart3.draw();


}
google.setOnLoadCallback(drawVisualization);
</script>

<div id="dashboard">
<table border="0" cellpadding="0" cellspacing="0" class="table2"
style="width: 762px; height: 687px">
<tbody>
<tr>
<td colspan="3">
<h3>
Select your category:</h3>
</td>
</tr>
<tr>
<td>
<div id="control1" style="width: 100px; height:
100px">
&nbsp;</div>
</td>
<td>
<div id="control2" style="width: 250px; height:
300px">
&nbsp;</div>
</td>
<td>
<div id="control3" style="width: 250px; height:
300px">
&nbsp;</div>
</td>
</tr>
<tr>
<td colspan="3">

</td>
</tr>
<tr>
<td>
<div id="chart1" style="width: 250px; height:
300px">
&nbsp;</div>
</td>

</tr>
<tr>
<td colspan="3">

</td>
</tr>
<tr>
<td>
<div id="chart2" style="width: 250px; height:
300px">
&nbsp;</div>
</td>

</tr>
<tr>
<tr>
<td colspan="3">

</td>
</tr>
<td>
<div id="chart3" style="width: 250px; height:
300px">
&nbsp;</div>
</td>

</tr>
<tr>
<td colspan="3">

</td>
</tr>
<tr>
<td>
<div id="chart4" style="width: 250px; height:
300px">
&nbsp;</div>
</td>

</tr>
</tbody>

</table>
</div>
<p>
&nbsp;</p>

On Aug 1, 11:53 am, Viz Kid <viz...@google.com> wrote:
> Hi
>
> I'm not sure what you meant by "categories" and "selected".
>
>   Viz Kid
>

[David Rodger]

Or even to disable the 'choose a value' then i can set a default state
to make it work?

[Viz Kid]

Hi

Thanks for the clarification - I didn't understand at first that you are referring to a control that manages the charts.

I'm afraid there is no way at the moment to now display the chart if you have less than X items selected in the control.

Can you isolate the error you are getting from the category picker with a small example?

  Viz Kid

[David Rodger]

Hi There

What i am realy after is in the code above I am looking to hide all
the errors in all the control containers. I am not 100% clear on how
to do this (ie how to integrate the error response into what i hav
above.

thank you for you time on this

On Aug 2, 7:32 am, Viz Kid <viz...@google.com> wrote:
> Hi
>

> Thanks for the clarification - I didn't understand at first that you are
> referring to a control that manages the charts.
> I'm afraid there is no way at the moment to now display the chart if you
> have less than X items selected in the control.
> Can you isolate the error you are getting from the category picker with a
> small example?
>
>   Viz Kid
>

[David Rodger]

Apologies, I am still struggling to integrate the remove all errors
ito the code above, maybe someone could point me in the direction of a
good example?

thanks

> ...
>
> read more »

[Riccardo Govoni]

Hi David,

sorry for the late answer. Here are a few suggestions:

1. hiding a chart depending on which categories have been picked from the category pickers.

The idea is that whenever the dashboard fires a 'ready' event (aka, it was redrawn because part of its state changed as a consequence of values chosen from the category pickers), you inspect the state of the category pickers (via their getState() method) and hide the chart depending on whether some values have been chosen or not.

I've written this example (https://gist.github.com/1122276) that keeps the barchart hidden until at least a value has been picked from each category picker.

Is that similar to what you are trying to achieve?

Note that in the example I'm just hiding the chart container (the chart is still being drawn even if hidden). A more clean solution (not drawing the chart at all when hidden) can be crafted but it takes a few extra lines of code. Let me know if you need it.

2. Disable category pickers 'Choose a value' option and force a default state.

You can initialize the categorypickers with a default state using the 'state' option of its managing ControlWrapper. See this example where the picker is initialized on the 'CPU' value.

You can't however, for the moment, disable the 'Choose a value' option. I'm aware of how useful the setting would be, I already noticed this as a feature request.

3. Errors on the controls.

I'd have to see a working example of your page (even with fake data) reproducing the errors to understand what the issue is. Note however that we are investigating ongoing issues with the version 1.1 of the visualization APIs. Make sure you are using version 1.0 in your google.load() statement, like in the examples I've pasted.

4. Other things.

In the snippet you provided, your usage of the controls API is a bit out of the ordinary. You feed a datasource url to each control and chart. Although this might work (assuming all controls and charts receive the same spreadsheet), it is preferable to hand over a DataTable directly to the dashboard instance:

- use a google.visualization.Query to fetch the DataTable from the remote datasource once.

- assemble the dashboard

- hand over the datatable to the dashboard as a whole via dashboard.draw(datatable) (after the bind section).

This way is also more efficient in terms of number of requests to the remote source.

Let me know if this helps,

/R. 

[David Rodger]

Hi there Riccardo

wow thank you for such an expansive answer. I am looking into some of
this now and have formed a sample code that will form the basis of the
full code.

This code is working fine but it seems the listener is not working
correctly (also it seems this new way of sourcing the url has fixed
the a is null error). After running the code the chart and controls
display even though the lstener should hide the chart, see the code
below, and again many thanks for this.

<!--
You are free to copy and use this sample in accordance with the terms
of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!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">

google.load('visualization', '1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var query = new google.visualization.Query('GOOGLE
SPREADSHEET');
// Send the query with a callback function.
query.send(handleQueryResponse);

}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.
getDetailedMessage());
return;
}

var data = response.getDataTable();

// Define a slider control for the Age column.


// Define a category picker control for the Gender column
var genderPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnIndex': '3',

'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});

var agePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',

'options': {
'filterColumnIndex': '2',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});

// Define a Pie chart

var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',

'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,

},

'view': {'columns': [0, 5]}
});

// Define a table


// Create a dashboard
new
google.visualization.Dashboard(document.getElementById('dashboard')).

bind([agePicker, genderPicker],barChart).

draw(data);

google.visualization.events.addListener(dashboard, 'ready',
function() {
var genderSelectedValues = genderPicker.getState()
['selectedValues'];
var ageSelectedValues = agePicker.getState()
['selectedValues'];
if (genderSelectedValues.length == 0 ||
ageSelectedValues.length == 0) {
document.getElementById('chart1').style.visibility =
'hidden';
} else {
document.getElementById('chart1').style.visibility =
'visible';
}
});
}

google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control2"></div>
<div id="control3"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>


</td>
</tr>
</table>
</div>
</body>
</html>

On Aug 3, 12:09 pm, Riccardo Govoni <battleho...@gmail.com> wrote:
> Hi David,
> sorry for the late answer. Here are a few suggestions:
>
> 1. hiding a chart depending on which categories have been picked from the
> category pickers.
> The idea is that whenever the dashboard fires a 'ready' event (aka, it was
> redrawn because part of its state changed as a consequence of values chosen
> from the category pickers), you inspect the state of the category pickers
> (via their getState() method) and hide the chart depending on whether some
> values have been chosen or not.
>
> I've written this example (https://gist.github.com/1122276) that keeps the
> barchart hidden until at least a value has been picked from each category
> picker.
> Is that similar to what you are trying to achieve?
> Note that in the example I'm just hiding the chart container (the chart is
> still being drawn even if hidden). A more clean solution (not drawing the
> chart at all when hidden) can be crafted but it takes a few extra lines of
> code. Let me know if you need it.
>
> 2. Disable category pickers 'Choose a value' option and force a default
> state.
> You can initialize the categorypickers with a default state using the

> 'state' option of its managing ControlWrapper. See this example<http://savedbythegoog.appspot.com/?id=c40fa8dd5ab59e5c68402809608ef62...>where the picker is initialized on the 'CPU' value.

> You can't however, for the moment, disable the 'Choose a value' option. I'm
> aware of how useful the setting would be, I already noticed this as a
> feature request.
>
> 3. Errors on the controls.
> I'd have to see a working example of your page (even with fake data)
> reproducing the errors to understand what the issue is. Note however that we

> are investigating ongoing issues<https://groups.google.com/forum/#!topic/google-visualization-api/viE9...>with the version 1.1 of the visualization APIs. Make sure you are using

> version 1.0 in your google.load() statement, like in the examples I've
> pasted.
>
> 4. Other things.
> In the snippet you provided, your usage of the controls API is a bit out of
> the ordinary. You feed a datasource url to each control and chart. Although
> this might work (assuming all controls and charts receive the same
> spreadsheet), it is preferable to hand over a DataTable directly to the
> dashboard instance:
>

> - use a google.visualization.Query<http://code.google.com/apis/chart/interactive/docs/queries.html>to fetch the DataTable from the remote datasource once.

[Riccardo Govoni]

You are not assigning the dashboard to any variable. You code reads:

new google.visualization.Dashboard(document.getElementById('dashboard')). 
  bind([agePicker, genderPicker],barChart). 
  draw(data); 

google.visualization.events.addListener(dashboard, 'ready',  function() {...});

But the 'dashboard' object is undefined.

The declaration line should read:

var dashboard = new google.visualization.Dashboard(...);

dashboard.bind(...);

dashboard.draw(...);

google.visualization.events.addListener(dashboard, 'ready',  function() {...});

/R.