Google Chart滑块和过滤器

我有一个数据表，像这样：

部门，范围，价值
一，一，六
一二七
三三四
二四三
二五五
一六九
三七二 

其中Department的值为（（One，Two，Three）并且Range从1,2,3,4,5,6,7 ...开始，并且Value是介于0,10之间的随机值，依此类推...

如何绘制Google折线图X轴：范围| Y轴：值，带有两个控件（类别过滤器：部门，范围过滤器：范围）

到目前为止，这是我的尝试：http://jsfiddle.net/x7pyk55q/2/
但是看起来X轴不是范围（1,2,3,4,5,6 ....） 
以及Y轴如何具有两个值Department和Value（我只希望Value作为Y轴）

的HTML：

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<div id="dashboard_div">
  <div id="filter_div"><!-- Controls renders here --></div>    
  <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>
</div>

javascript：

google.load('visualization', '1', { packages : ['controls'] } );
google.setOnLoadCallback(createTable);

function createTable() {
  // Create the dataset (DataTable)
  var myData = new google.visualization.DataTable();  
  myData.addColumn('string', 'Department');    
  myData.addColumn('number', 'Pick Sequence');
  myData.addColumn('number', 'Weight');
  myData.addRows([
    ['Three', 1, 9],    
    ['Three',2, 6],    
    ['One',3, 8],    
    ['Two',4, 4],    
    ['Two',5, 3],
    ['Two',6, 9],    
    ['Two',7, 6],    
    ['One',8, 8],    
    ['Two',9, 4],    
    ['Three',10, 3],
    ['One',11, 9],    
    ['Three',12, 6],    
    ['Three',13, 8],    
    ['Two',14, 4],    
    ['One',15, 3],
    ['Two',16, 8],    
    ['One',17, 4],    
    ['One',18, 3],
    ['Three',19, 9],    
    ['Two',20, 6]
  ]);
  var dash_container = document.getElementById('dashboard_div'),
    myDashboard = new google.visualization.Dashboard(dash_container);
  var myDateSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
      'filterColumnLabel': 'Pick Sequence'
    }
  });
  var categoryPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'filter_div',
      'options': {
        'filterColumnIndex': 0,
        'ui': {
          'label': 'Department:',
          'allowTyping': false,
          'allowMultiple': false
        }
      }
  });

  var myTable = new google.visualization.ChartWrapper({
    'chartType' : 'Table',
    'containerId' : 'table_div'
  });
  myDashboard.bind([myDateSlider, categoryPicker], myTable);  
  var myLine = new google.visualization.ChartWrapper({
    'chartType' : 'LineChart',
    'containerId' : 'line_div',
  });
  myDashboard.bind([myDateSlider, categoryPicker], myLine);
  myDashboard.draw(myData);
}