javascript - tipos - google charts tutorial español

Cambiar el tamaño de la visualización de google con ChartEditor

Question

¿Es posible establecer el ancho y alto de un gráfico cuando se utiliza la visualización de Google ChartEditor?

Requiero que el gráfico sea el 100% del ancho de la página y luego establecer el alto en píxeles, actualmente cuando establezco el ancho y el alto en las opciones que se están ignorando.

el código que he trabajado hasta ahora está debajo:

<script type="text/javascript">

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

        google.setOnLoadCallback(loadEditor);
        var chartEditor = null;

        window.onresize = function() {
            loadEditor();
        };

        function loadEditor() {

            var data = google.visualization.arrayToDataTable([@Html.Raw(@ViewBag.ChartData)]);

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

            var rangeSlider = new google.visualization.ControlWrapper({
                ''controlType'': ''CategoryFilter'',
                ''containerId'': ''filter_div'',
                ''options'': {
                    ''filterColumnLabel'': ''VAR1'',
                    ''ui'': {
                        ''label'': ''Years''
                    }
                }
            });
            var wrapper = new google.visualization.ChartWrapper({
                chartType: ''ColumnChart'',
                containerId: ''chart_div'',
                dataTable: data
            });
            chartEditor = new google.visualization.ChartEditor();
            google.visualization.events.addListener(chartEditor, ''ok'', redrawChart);
            chartEditor.openDialog(wrapper, {});
            dashboard.bind(rangeSlider, wrapper);
            dashboard.draw(data);
        }

        function redrawChart() {
            chartEditor.getChartWrapper().draw(document.getElementById(''chart_div''));

        }
    </script>

el cuadro también incorpora un filtro de categoría vinculado con un tablero de instrumentos para trabajar con el gráfico que se muestra.

Actualmente, cuando se representa el gráfico, es bastante pequeño.

Answer 1

Algo como esto debería funcionar, cambié los datos y modifiqué el control deslizante para que el fragmento funcionara.

        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;

        function loadEditor() {
            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, {});
        }

        function drawChart() {
            wrapper = chartEditor.getChartWrapper();
            redrawChart();
        }

        function redrawChart() {
            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);
        }

<script src="https://www.google.com/jsapi"></script>

<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
</div>