I cannot figure out why my role: 'style' will not work here. It worked in the same bar chart when it was not part of dashboard/slider.
Here is the dashboard with slider. You can see that I have one row set to show in red rather than blue. Thanks for any feedback:
<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() {
var data = google.visualization.arrayToDataTable([
['Person', 'stat1', 'stat2',{role:'style'}],
['Victor', 293.0, 0.8,'blue'],
['Thomas', 341.0, 1.1,'red'], ['Alex', 131.0, 1.4, 'blue'],
['Hera', 184.0, 2, 'blue'],
['Colin', 194.0, 2.1, 'blue'],
['Dagg', 250.0, 2.3, 'blue'],
['Lucy', 323.0, 2.4,'blue'],
['Bainbridge', 398.0, 2.6, 'blue']
]);
var formatter = new google.visualization.NumberFormat(
{pattern: '###,###'});
formatter.format(data, 1);
// Define a NumberRangeFilter slider control for the 'Age' column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'toolbar',
'options': {
'filterColumnLabel': 'stat2',
'minValue': 0,
'maxValue': 10,
'ui': {
'label': 'stat2',
'unitIncrement': 0.5}
}
});
// Define a bar chart
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart_div',
'options': {
'width': 350,
'height': 300,
'legend':'none',
'chartArea':{left:150,top:40,width:"50%",height:"75%"}
},
'view': {'columns': [0, 1]}
});
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('chart_div')).
// Configure the slider to affect the bar chart
bind(slider, barChart).
// Draw the dashboard
draw(data);
}
google.setOnLoadCallback(drawVisualization);