javascript - 谷歌图表 slider 和过滤器

Question

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

Department, Range, ValueOne,   1, 6One,   2, 7Three, 3, 4Two,   4, 3Two,   5, 7One,   6, 9Three, 7, 2 

where Department has values of (One,Two,Three) and Range starts 1,2,3,4,5,6,7... and Value is Random Value between 0,10 and so on...

How do I plot a google line graph X-Axis: Range | Y-Axis: Value, with Two Controls (Category Filter: Department, Range Filter: Range)

Here is my attempt so far: http://jsfiddle.net/x7pyk55q/2/But looks X-Axis isn't the Range(1,2,3,4,5,6....) and how Y-Axis has two values Department and the Value (I only want Value as Y-Axis)

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);
}

Answer 1

没关系，我自己解决了。

将 'chartView': { 'columns': [1, 2] } 添加到 var myDateSlider并将 'view': {'columns': [1, 2]} 添加到 var myLine

enter code here

http://jsfiddle.net/x7pyk55q/4/