在使用Google Chart API仪表板的getFilteredRows时遇到问题

我正在组建一个仪表板并尝试做一些应该是直截了当的事情。将有控制过滤器在仪表板级别上运行，但我还需要指定一些额外的过滤器（静态，而不是通过控件）到一个表。 getFilteredRows的方法似乎是答案，但它不起作用。在使用Google Chart API仪表板的getFilteredRows时遇到问题

我嘲笑了Google在代码游乐场中尝试使用此功能的示例。在这种情况下，我试图让饼图只显示那些年龄在20岁以上的人。

（链接到谷歌代码游乐场：http://code.google.com/apis/ajax/playground/?type=visualization#full_dashboard）

代码我想：

function drawVisualization() { 
    // Prepare the data 
    var data = google.visualization.arrayToDataTable([ 
    ['Name', 'Gender', 'Age', 'Donuts eaten'], 
    ['Michael' , 'Male', 12, 5], 
    ['Elisa', 'Female', 20, 7], 
    ['Robert', 'Male', 7, 3], 
    ['John', 'Male', 54, 2], 
    ['Jessica', 'Female', 22, 6], 
    ['Aaron', 'Male', 3, 1], 
    ['Margareth', 'Female', 42, 8], 
    ['Miranda', 'Female', 33, 6] 
    ]); 

    // Define a slider control for the Age column. 
    var slider = new google.visualization.ControlWrapper({ 
    'controlType': 'NumberRangeFilter', 
    'containerId': 'control1', 
    'options': { 
     'filterColumnLabel': 'Age', 
    'ui': {'labelStacking': 'vertical'} 
    } 
    }); 

    // Define a category picker control for the Gender column 
    var categoryPicker = new google.visualization.ControlWrapper({ 
    'controlType': 'CategoryFilter', 
    'containerId': 'control2', 
    'options': { 
     'filterColumnLabel': 'Gender', 
     'ui': { 
     'labelStacking': 'vertical', 
     'allowTyping': false, 
     'allowMultiple': false 
     } 
    } 
    }); 

    // Define a Pie chart 
    var pie = new google.visualization.ChartWrapper({ 
    'chartType': 'PieChart', 
    'containerId': 'chart1', 
    'options': { 
     'width': 300, 
     'height': 300, 
     'legend': 'none', 
     'title': 'Donuts eaten per person', 
     'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 
     'pieSliceText': 'label' 
    }, 
    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten) 
    // from the 'data' DataTable. 
    'view': { 
     'columns': [0,3], 
     'rows': [ 
     { 
      'calc': function(data) { 
      return data.getFilteredRows({column: 2, minValue: 20}); 
      }, 
      'type': 'number' 
     }] 
    } 
    }); 

    // Define a table 
    var table = new google.visualization.ChartWrapper({ 
    'chartType': 'Table', 
    'containerId': 'chart2', 
    'options': { 
     'width': '300px' 
    } 
    }); 

    // Create a dashboard 
    new google.visualization.Dashboard(document.getElementById('dashboard')). 
     // Establish bindings, declaring the both the slider and the category 
     // picker will drive both charts. 
     bind([slider, categoryPicker], [pie, table]). 
     // Draw the entire dashboard. 
     draw(data); 
}

我已经从最初的例子唯一改变的是增加的“视图”部分饼图。

任何人有任何想法？

来源

2012-03-28 overanalyst79

几个小变化： *不需要'calc'，因为它用于创建新的计算列。 *函数的格式需要数组，即使是单个值。

'view': {'columns': [0, 3], 
     'rows' : data.getFilteredRows([{column: 2, minValue: 20}])}

来源

2012-03-30 18:05:41 Guy

在使用Google Chart API仪表板的getFilteredRows时遇到问题

回答

相关问题