我有一个数据表,像这样:
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 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);
}
最佳答案
没关系,我自己解决了。
将 'chartView': { 'columns': [1, 2] } 添加到 var myDateSlider 并将 'view': {'columns': [1, 2]} 添加到 var myLine
enter code here
关于javascript - 谷歌图表 slider 和过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26364646/