Google Line Chart with String Filter / Range Filter

[David Chen]

I have a data table, like this:

Department, Range, Value
One,   1, 6
One,   2, 7
Three, 3, 4
Two,   4, 3
Two,   5, 7
One,   6, 9
Three, 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 line graph X-Axis: Range | Y-Axis: Value, with Two Controls 
(Category Filter: Department, Range Filter: Range)
Here is my attempt

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)




*http://jsfiddle.net/x7pyk55q/2/ <http://jsfiddle.net/x7pyk55q/2/>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([categoryPicker, myDateSlider], myTable);
  var myLine = new google.visualization.ChartWrapper({
    'chartType' : 'LineChart',
    'containerId' : 'line_div',
  });
  myDashboard.bind([categoryPicker, myDateSlider], myLine);
  myDashboard.draw(myData);
}

-- 
You received this message because you are subscribed to the Google Groups 
"Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-chart-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-chart-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.