Controls Example

An example of controlling a Google Chart post draw.

by forssux

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'controls']}]}"></script>
<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
    <div id="control_div">
        <!-- Controls renders here -->
    </div>
    <div id="line_div">
        <!-- Line chart renders here -->
    </div>
    <div id="table_div">
        <!-- Table renders here -->
    </div>
    <table class="columns">
        <tr>
            <td>
                <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
                <div>
                    <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">Select range [45, 60]</button>
                    <br />
                    <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();">Make the pie chart 3D</button>
                </div>
                <script type="text/javascript">
                    function changeRange() {
                        programmaticSlider.setState({
                            'lowValue': 45,
                                'highValue': 60
                        });
                        programmaticSlider.draw();
                    }

                    function changeOptions() {
                        programmaticChart.setOption('is3D', true);
                        programmaticChart.draw();
                    }
                </script>
            </td>
            <td>
                <div id="programmatic_chart_div"></div>
            </td>
        </tr>
    </table>
</div>
<!-- // <div id="dashboard_div">-->
<!-- // this is the end -->

JavaScript

google.setOnLoadCallback(drawChart);

      function drawChart() {
          var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));


          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Name');
          data.addColumn('number', 'Drie');
          data.addColumn('string', 'INGName');
          data.addColumn('date', 'Date');
          data.addColumn('number', 'Donuts eaten');
          data.addColumn('number', 'Hours Worked');
          data.addRows([
              ['Michael', 3333, 'azetr', new Date(2012, 0, 2), 11, 9],
              ['Elisa', 3334, 'Forssux', new Date(2012, 0, 3), 72, 8],
              ['Robert', 3335, 'LudwigDB', new Date(2012, 0, 4), 59, 10],
              ['John', 3336, 'LittleVet', new Date(2012, 0, 5), 77, 8],
              ['Jessica', 3337, 'Blauwbaard', new Date(2012, 0, 6), 43, 5],
              ['Aaron', 33336, 'ODB10', new Date(2012, 0, 6), 57, 4],
              ['Margareth', 3338, 'Fl4tl1N3R', new Date(2012, 0, 7), 47, 3]
          ]);

          // We omit "var" so that programmaticSlider is visible to changeRange.
          programmaticSlider = new google.visualization.ControlWrapper({
              'controlType': 'NumberRangeFilter',
                  'containerId': 'programmatic_control_div',
                  'options': {
                  'filterColumnLabel': 'Donuts eaten',
                      'ui': {
                      'labelStacking': 'vertical'
                  }
              }
          });
          // http://stackoverflow.com/questions/25511680/google-charts-combining-chartrangefilter-with-data-series-selector

          myDateSlider = new google.visualization.ControlWrapper({
              controlType: 'ChartRangeFilter',
              containerId: 'control_div',
              options: {
                  filterColumnLabel: 'Date',
                  ui: {
                      'labelStacking': 'vertical'
    ...