JavaScript
google.load('visualization', '1.1', {
packages: ['controls', 'table']
});
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Department', 'Category Group', 'Status', 'Finelines'],
['23 - MENSWEAR', 'TOPS', 'In Progress', 33],
['23 - MENSWEAR', 'TOPS', 'Not Started', 43],
['23 - MENSWEAR', 'TOPS', 'Ready', 44],
['23 - MENSWEAR', 'TOPS', 'Pushed', 22],
['23 - MENSWEAR', 'TOPS', 'Bridged', 34],
['23 - MENSWEAR', 'BOTTOMS', 'In Progress', 20],
['23 - MENSWEAR', 'BOTTOMS', 'Not Started', 65],
['23 - MENSWEAR', 'BOTTOMS', 'Ready', 8],
['23 - MENSWEAR', 'BOTTOMS', 'Pushed', 3],
['23 - MENSWEAR', 'BOTTOMS', 'Bridged', 31],
['25 - SHOES', 'LADIES SHOES', 'In Progress', 2],
['25 - SHOES', 'LADIES SHOES', 'Not Started', 10],
['25 - SHOES', 'LADIES SHOES', 'Ready', 1],
['25 - SHOES', 'LADIES SHOES', 'Pushed', 5],
['25 - SHOES', 'LADIES SHOES', 'Bridged', 7],
['25 - SHOES', 'MENS SHOES', 'In Progress', 8],
['25 - SHOES', 'MENS SHOES', 'Not Started', 2],
['25 - SHOES', 'MENS SHOES', 'Ready', 2],
['25 - SHOES', 'MENS SHOES', 'Pushed', 7],
['25 - SHOES', 'MENS SHOES', 'Bridged', 5]
]);
// 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
}
},
});
var regionPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Category Group',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone': false
}
...