two filters drop down lists with google charts
by khemikal
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<script src="http://www.google.com/jsapi?.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="control1"></div>
<div id="control2"></div>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
JavaScript
google.load('visualization', '1.1', {packages: ['controls', 'table']});
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Department', 'Category Group', 'Category', 'Fineline'],
['23 - MENSWEAR', 'BOTTOMS', 'CASUAL PANTS', 65],
['23 - MENSWEAR', 'BOTTOMS', 'CASUAL PANTS', 45],
['23 - MENSWEAR', 'TOPS', 'KNITS', 65],
['23 - MENSWEAR', 'TOPS', 'KNITS', 95],
['23 - MENSWEAR', 'TOPS', 'WOVEN', 12],
['23 - MENSWEAR', 'TOPS', 'KNITS', 42]
]);
// Define category pickers for 'Country', 'Region/State' and 'City'
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Department',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone': false
}
},
'state': {
selectedValues: ['USA']
}
});
var regionPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Category Group',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone': false
}
},
'state': {
selectedValues: ['California']
}
});
var pieChartB = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart3',
'options': {
'width': 300,
'height': 300
},
'view': {
'columns': [2, 3]
}
});
// Create the dashboard.
var dash = new...