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'></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.
