You can do all of that.
1) you need to use some calculated columns in the chart's view parameter,
which separate out the data into 3 columns depending on the number of
slots, like this:
view: {
columns: [0, {
type: 'number',
label: '5 Slot',
calc: function (dt, row) {
return (dt.getValue(row, 3) == 5) ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: '7 Slot',
calc: function (dt, row) {
return (dt.getValue(row, 3) == 7) ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: '12 Slot',
calc: function (dt, row) {
return (dt.getValue(row, 3) == 12) ? dt.getValue(row, 2) : null;
}
}]
},
Then set the "isStacked" option to true. You can control the bar colors by
setting the "colors" option to an array of HTML color strings (where the
first applies to 5-slot, the second to 7-slot, and the third to 12-slot),
or set the series.<series index>.color option, which sets the color for a
specific data series.
2) this will happen with the fix to #1.
3) You can bind all 4 controls; I suspect that the problem was that you
already had slotPicker bound and tried to bind it again (eg: bind([slotPicker,
slider, categoryPicker, slotPicker], [bar]);); it was the namePicker that
you are missing in the list, fix with:
bind([namePicker, slotPicker, slider, categoryPicker], [bar]);
4) the hAxis is displaying watts, but the color of the title is black, so
you can't see it. Set the hAxis.titleTextStyle.color option to "white" to
fix.
You can see all of the fixes in action here:
http://jsfiddle.net/asgallant/9dNuW/
On Monday, March 25, 2013 4:51:38 AM UTC-4, George Fasal wrote:
>
>
> 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.
