Resizing Google Visualization With Charteditor

is it possible to set the width and height of a chart when using the google visualization ChartEditor? I require the chart to be 100% the width of the page and then set the height

Solution 1:

Something like this should work, I switched out the data and modified the slider to get the snippet to work.

        google.load("visualization", "1", { packages: ["corechart", "controls", "charteditor"] });

        google.setOnLoadCallback(loadEditor);

        window.addEventListener('resize', redrawChart, false);

        var chartEditor;
        var data;
        var dashboard;
        var rangeSlider;
        var wrapper;

        functionloadEditor() {
            data = google.visualization.arrayToDataTable([
              ['Element', 'Density'],
              ['Copper', 8.94],
              ['Silver', 10.49],
              ['Gold', 19.30],
              ['Platinum', 21.45]
            ]);

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

            rangeSlider = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'filter_div',
                'options': {
                    'filterColumnLabel': 'Density',
                    'ui': {
                        'label': 'Density'
                    }
                }
            });

            wrapper = new google.visualization.ChartWrapper({
                chartType: 'ColumnChart',
                containerId: 'chart_div',
                dataTable: data
            });

            chartEditor = new google.visualization.ChartEditor();
            google.visualization.events.addListener(chartEditor, 'ok', drawChart);
            chartEditor.openDialog(wrapper, {});
        }

        functiondrawChart() {
            wrapper = chartEditor.getChartWrapper();
            redrawChart();
        }

        functionredrawChart() {
            var height;
            var width;

            height = '200px';
            width = Math.min(document.documentElement.clientWidth, window.innerWidth || 0) + 'px';

            wrapper.setOption('height', height);
            wrapper.setOption('width', width);

            dashboard.bind(rangeSlider, wrapper);
            dashboard.draw(data);
        }

<scriptsrc="https://www.google.com/jsapi"></script><divid="dashboard_div"><divid="filter_div"></div><divid="chart_div"></div></div>