Help with a dashboard required

Charlie Clark

unread,

May 22, 2013, 8:02:22 AM5/22/13

to google-visua...@googlegroups.com

Hi,

I thought I'd give a the dashboard a try. I'd like to be able to filter by column name. Am I correct in thinking that this is not possible? I'd like the range slide not to contain any of the lines from the main chart.

This is the code:

</div> </a>

var options = { title : "CDN Trends", width: 600, };

var dashboard = new google.visualization.Dashboard( document.getElementById('cdns'));

var RangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'ChartRangeFilter', 'containerId': 'filter', 'options': { 'filterColumnLabel': 'Date' } });

var chart = new google.visualization.ChartWrapper({ 'chartType': 'LineChart', 'containerId': 'chart', 'options':options });

dashboard.bind(RangeSlider, chart);

dashboard.draw(data, options); }

</script>

Thanks

Charlie

Charlie Clark

unread,

May 22, 2013, 11:04:19 AM5/22/13

to google-visua...@googlegroups.com

Am 22.05.2013, 14:02 Uhr, schrieb Charlie Clark
<charli...@clark-consulting.eu>:

> Hi,
> I thought I'd give a the dashboard a try. I'd like to be able to filter
> by
> column name. Am I correct in thinking that this is not possible? I'd like
> the range slide not to contain any of the lines from the main chart.

Okay. I think I've figured out the basics of using the control and I can
probably use a dataView for my column inclusion exclusion.

I think I've hit a bug on the options for the controls' chartOptions: the
width parameter only seems to respond to % values.

var options = {
title : "CDN Trends",
width: 600,

legend: {position: 'top'}
};

var dashboard = new google.visualization.Dashboard(
document.getElementById('cdns'));

var control = new google.visualization.ControlWrapper({

'controlType': 'ChartRangeFilter',
'containerId': 'filter',
'options': {

'filterColumnLabel': 'Date',
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {
'width': 600,
'height': 50
},
'hAxis': {'baselineColor': 'none',
'textPosition': 'none'},
'position': 'left'
},
'chartView': {'columns': [0, 1]},

}
}
});

var chart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options':options
});

dashboard.bind(control, chart);
dashboard.draw(data, options);
}

Displays as per enclosed screenshot: the control uses a default width and
is indented. Is this a bug? If not, how can I fix it?

Charlie
--
Charlie Clark
Managing Director
Clark Consulting & Research
German Office
Kronenstr. 27a
Düsseldorf
D- 40217
Tel: +49-211-600-3657
Mobile: +49-178-782-6226

Bildschirmfoto 2013-05-22 um 16.58.48.png

asgallant

unread,

May 22, 2013, 11:57:54 AM5/22/13

to google-visua...@googlegroups.com

Set the controls's options.ui.chartOptions.width to control the width of the filter:

var control = new google.visualization.ControlWrapper({

'controlType': 'ChartRangeFilter',

'containerId': 'filter',

'options': {

'filterColumnLabel': 'Date',

'ui': {

'chartType': 'LineChart',

'chartOptions': {

width: 600,

height: 50,

'chartArea': {

// set the chartaArea.width to a percentage value that is the same

// as the chartArea.width of the chart, so they line up properly

'width': 'XX%'

},

'hAxis': {

'baselineColor': 'none',

'textPosition': 'none'

},

'position': 'left'

},

'chartView': {'columns': [0, 1]},

}

});

Also, if you want to be able to filter by column names, I wrote a hack that turns a CategoryFilter into a column filter: http://jsfiddle.net/asgallant/WaUu2/

Charlie Clark

unread,

May 23, 2013, 6:41:21 AM5/23/13

to google-visua...@googlegroups.com

Hi,

Am 22.05.2013, 17:57 Uhr, schrieb asgallant <drew_g...@abtassoc.com>:

> Set the controls's options.ui.chartOptions.width to control the width of
> the filter:
> var control = new google.visualization.ControlWrapper({
> 'controlType': 'ChartRangeFilter',
> 'containerId': 'filter',
> 'options': {
> 'filterColumnLabel': 'Date',
> 'ui': {
> 'chartType': 'LineChart',
> 'chartOptions': {
> width: 600,
> height: 50,
> 'chartArea': {
> // set the chartaArea.width to a percentage value
> that
> is the same
> // as the chartArea.width of the chart, so they line
> up
> properly

Thanks. Difficult sometimes to see the wood for the trees with these
nested options and no ability to set attributes directly.

> Also, if you want to be able to filter by column names, I wrote a hack
> that
> turns a CategoryFilter into a column filter:
> http://jsfiddle.net/asgallant/WaUu2/

Very interesting, thanks.

Reply all

Reply to author

Forward