具有多个控件的数据视图

我结合了我在互联网上找到的 2 个例子，不幸的是，我一定做错了什么，因为只有一部分在 Jsfiddle 中绘制

通过这两个示例，我想学习如何创建日期滑块。有人可以指出我的错误吗？第一个例子来自 https://blog.smalldo.gs/2013/04/google-chart-tools-walkthrough-part-3/#add-to-dashboard第二个示例来自交互式图表

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

    var data = new google.visualization.DataTable();
        data.addColumn('number', 'Drie');
        data.addColumn('string', 'Name');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Donuts eaten'); 
        data.addColumn('number', 'Hours Worked');

    data.addRows([
        [33333333,'Michael', new Date(2012,0,2),1,9],
        [33333,'Elisa', new Date(2012,0,3),7,8],
        [3,'Robert', new Date(2012,0,4),9,10],
        [3,'John', new Date(2012,0,5),7,8],
        [3,'Jessica', new Date(2012,0,6),3,5],
        [3,'Aaron', new Date(2012,0,6),7,4],
        [3,'Margareth', new Date(2012,0,7),7,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'}
            }
        });
    programmaticChart  = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'programmatic_chart_div',
        'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
        }
    });
    dashboard.bind(programmaticSlider, programmaticChart);
    //Create a DataView from the data_table
    var dataView = new google.visualization.DataView(data);
    //Set the first column of the dataview to format as a string, and return the other columns [1, 2 and 3]
   dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1, 2, 3,4]);
    // Create a date range slider
    var myDateSlider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'control_div',
        'options': {
            'filterColumnLabel': 'Date'
        }
  });
  // Table visualization
  var myTable = new google.visualization.ChartWrapper({
      'chartType' : 'Table',
      'containerId' : 'table_div'
  });
  dashboard.bind(myDateSlider, myTable);

  // Line chart visualization
  var myLine = new google.visualization.ChartWrapper({
      'chartType' : 'LineChart',
      'containerId' : 'line_div',
  });      
  dashboard.bind(myDateSlider, myLine ); 
  dashboard.draw(dataView);
  }
  <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 [2, 5]
          </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': 2, 'highValue': 5});
            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 -->