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/
On Wednesday, May 22, 2013 11:04:19 AM UTC-4, Charlie Clark wrote:
>
> Am 22.05.2013, 14:02 Uhr, schrieb Charlie Clark
> <[email protected] <javascript:>>:
>
> > 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
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
