role: 'style' NOT working in dashboard

116 views
Skip to first unread message

apmi...@gmail.com

unread,
Dec 30, 2013, 7:25:27 PM12/30/13
to google-visua...@googlegroups.com
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);






asgallant

unread,
Dec 31, 2013, 11:26:17 AM12/31/13
to google-visua...@googlegroups.com
Your BarChart has its "view" parameter set to use columns 0 and 1, which excludes the style column.  If you want to use the style in the BarChart, you need to include it in the view:

view: {
    columns: [0, 1, 3]

Anthony Milano

unread,
Dec 31, 2013, 4:34:09 PM12/31/13
to google-visua...@googlegroups.com
Thanks for the feedback...exactly the problem!

Much appreciated.


--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/OVCzGGOnd_E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all
Reply to author
Forward
0 new messages