The chart looks good now. Thanks a lot Andrew!
Am Samstag, 17. Mai 2014 18:39:08 UTC+2 schrieb Andrew Gallant:
>
> Set the options on the chart, not the Dashboard:
>
> var chart = new google.visualization.ChartWrapper({
> containerId: 'chart_div',
> chartType: 'LineChart',
> options: {
> title:'Background boxes',
> curveType:'function',
> lineWidth: 0,
> series: [{'color': '#1A8763'}],
> intervals: { 'lineWidth':2, 'barWidth': 0.5 },
> interval: {
> '25th-to-med': {
> 'style':'boxes',
> 'color':'grey',
> 'boxWidth': 0.5,
> 'lineWidth': 0,
> 'fillOpacity': 0.4
> },
> 'med-to-75th': {
> 'style':'boxes',
> 'color':'#8888ff',
> 'boxWidth': 0.5,
> 'lineWidth': 0,
> 'fillOpacity': 0.4
> },
> 'value': {
> 'style':'points',
> 'color':'black',
> 'pointSize': 5,
> 'lineWidth': 0,
> 'fillOpacity': 0.8
> }
> },
> legend: 'none'
> }
> });
>
> When you draw the dashboard, just pass the view:
>
> dashboard.draw(view);
>
> On Saturday, May 17, 2014 6:17:57 AM UTC-4, Beat Buehlmann wrote:
>>
>> Hi there,
>>
>> I want to create a chart with intervals and a category filter. I started
>> without the category filter and was able to assign the format options with
>> draw(view, options_boxes_background). I tried then to add a category filter
>> by including the ControlWrapper and ChartWrapper and creating a dashboard.
>> I learned that I can't include formatting options in dashboard.draw(...) as
>> per below example. How can I assign the formatting options to the dashboard
>> respectively to the chart?
>>
>> The code looks as follows:
>>
>> *<html>*
>> * <head>*
>> * <script type='text/javascript' src='https://www.google.com/jsapi
>> <https://www.google.com/jsapi>'></script>*
>> * <script type='text/javascript'>*
>> * google.load('visualization', '1', {packages:['corechart',
>> 'controls']});*
>> * google.setOnLoadCallback(drawChart);*
>>
>> * function drawChart() {*
>> * var data = new google.visualization.DataTable();*
>> * data.addColumn('string', 'x');*
>> * data.addColumn('number', 'values');*
>> * data.addColumn({id:'min', type:'number', role:'interval'});*
>> * data.addColumn({id:'max', type:'number', role:'interval'});*
>> * data.addColumn({id:'25th', type:'number', role:'interval'});*
>> * data.addColumn({id:'med', type:'number', role:'interval'});*
>> * data.addColumn({id:'75th', type:'number', role:'interval'});*
>> * data.addColumn({id:'value', type:'number', role:'interval'});*
>>
>> * data.addRows([*
>> * ['S&P 500', 2.60, 1.40, 3.50, 2.20, 2.60, 2.80, 2.60],*
>> * ['Nikkei', 1.50, 0.90, 2.30, 1.30, 1.50, 1.80, 1.50],*
>> * ['MSCI Europe', 1.80, 1.10, 2.50, 1.60, 1.80, 2.20, 1.80],*
>> * ['MSCI Emerging Markets', 1.50, 1.00, 2.90, 1.50, 1.80,
>> 2.00, 1.50]*
>> * ]);*
>>
>> * var control = new google.visualization.ControlWrapper({*
>> * containerId: 'control_div',*
>> * controlType: 'CategoryFilter',*
>> * options: {*
>> * filterColumnIndex: 0,*
>> * }*
>> * });*
>>
>> * var chart = new google.visualization.ChartWrapper({*
>> * containerId: 'chart_div',*
>> * chartType: 'LineChart' *
>> * });*
>>
>> * var view = new google.visualization.DataView(data);*
>> * view.setColumns([0, 1, 2, 3, {*
>> * type: 'number',*
>> * sourceColumn: 4,*
>> * id: '25th-to-med',*
>> * role: 'interval'*
>> * }, {*
>> * type: 'number',*
>> * sourceColumn: 5,*
>> * id: 'med-to-75th',*
>> * role: 'interval'*
>> * }, {*
>> * type: 'number',*
>> * sourceColumn: 6,*
>> * id: 'med-to-75th',*
>> * role: 'interval'*
>> * }, {*
>> * type: 'number',*
>> * sourceColumn: 5,*
>> * id: '25th-to-med',*
>> * role: 'interval'*
>> * }, 7]);*
>>
>> * // Focus is the error bars, but boxes are visible in the
>> background.*
>> * var options_boxes_background = {*
>> * title:'Background boxes',*
>> * curveType:'function',*
>> * lineWidth: 0,*
>> * series: [{'color': '#1A8763'}],*
>> * intervals: { 'lineWidth':2, 'barWidth': 0.5 },*
>> * interval: {*
>> * '25th-to-med': {*
>> * 'style':'boxes',*
>> * 'color':'grey',*
>> * 'boxWidth': 0.5,*
>> * 'lineWidth': 0,*
>> * 'fillOpacity': 0.4*
>> * },*
>> * 'med-to-75th': {*
>> * 'style':'boxes',*
>> * 'color':'#8888ff',*
>> * 'boxWidth': 0.5,*
>> * 'lineWidth': 0,*
>> * 'fillOpacity': 0.4*
>> * },*
>> * 'value': {*
>> * 'style':'points',*
>> * 'color':'black',*
>> * 'pointSize': 5,*
>> * 'lineWidth': 0,*
>> * 'fillOpacity': 0.8*
>> * }*
>> * },*
>> * legend: 'none',*
>> * };*
>>
>> * var dashboard = new
>> google.visualization.Dashboard(document.querySelector('#dashboard'));*
>> * dashboard.bind([control], [chart]);*
>> * dashboard.draw(view, options_boxes_background);*
>>
>> * } *
>>
>> * </script>*
>> * </head>*
>>
>> * <body>*
>> * <div id="dashboard">*
>> * <div id="control_div"></div>*
>> * <div id="chart_div"></div>*
>> * </div>*
>> * </body>*
>> *</html>*
>>
>> Many thanks for any help!
>> Beat
>>
>
--
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
