this is the code i am using:
<script type="text/javascript" src="http://www.google.com/jsapi";></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Type', 'Sealed', 'Watts', 'Slots','Link' ],
['FAC' , 'NO', 400, 5,'http://www.yahoo.co.uk'],
['S', 'YES', 400, 5,'http://www.yahoo.co.uk'],
['SEF', 'YES', 400, 5,'http://www.yahoo.co.uk'],
['HES', 'YES', 575, 5,'http://www.yahoo.co.uk'],
['SIXHEX', 'YES', 575, 5,'http://www.yahoo.co.uk'],
['SIXHEX-HP', 'YES', 575, 5,'http://www.yahoo.co.uk'],
['FAC' , 'NO', 500, 7,'http://www.yahoo.co.uk'],
['S', 'YES', 500, 7,'http://www.yahoo.co.uk'],
['SEF', 'YES', 500, 7,'http://www.yahoo.co.uk'],
['HES', 'YES', 825, 7,'http://www.yahoo.co.uk'],
['SIXHEX', 'YES', 825, 7,'http://www.yahoo.co.uk'],
['SIXHEX-HP', 'YES', 825, 7,'http://www.yahoo.co.uk'],
['FAC', 'NO', 1050, 12,'http://www.yahoo.co.uk'],
['S', 'YES', 1050, 12,'http://www.yahoo.co.uk'],
['SEF', 'YES', 1050, 12,'http://www.yahoo.co.uk'],
['HES', 'YES', 1550, 12,'http://www.yahoo.co.uk'],
['SIXHEX', 'YES', 1550, 12,'http://www.yahoo.co.uk'],
['SIXHEX-HP', 'YES', 1550, 12,'http://www.yahoo.co.uk']
]);
var namePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Type',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control2',
'width': '100%',
'options': {
'filterColumnLabel': 'Watts',
'minValue': 300,
'maxValue': 1550,
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Sealed column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'Sealed',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a category picker control for the Slots column
var slotPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control4',
'options': {
'filterColumnLabel': 'Slots',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a Bar chart
var bar = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'view': {'columns': [0, 2]},
'options': {
width:'100%',
height:310,
backgroundColor: {fill: 'transparent'},
chartArea:{left:'15%',height:'80%',width:'70%',top:0},
legend: {textStyle: {color: 'white'}},
hAxis: {title: 'Total System Power (Watts)',textStyle:{color: 'white'}},
vAxis: {textStyle:{color: 'white'}
}
},
});
// Create a dashboard
var chart = new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slotPicker, slider, categoryPicker], [bar]);
// Draw the entire dashboard.
chart.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
The code above produces thisScreenshot: http://www.verdegia.com/1.jpg
I need to do this: http://www.verdegia.com/2.jpg
1. colour bars that have the same slots number (5,7,12)
2. Fix the legend to show the colored options.
3. I would like to add "slotPicker" in bind (to show another filter) but
it gives me an error when i bind more than 3.
4. if possible display a hAxis "watts"
THANK YOU. I have read many posts but none deal with dashboard. sorry - not
enough rep to post pics. follow the links
thanks
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
