2012-03-28 17 views
1

私はダッシュボードをまとめて、簡単なことをしようとしています。コントロールフィルタはダッシュボードレベルで動作するようになりますが、単一のテーブルに対していくつかの追加フィルタ(コントロールではなくスタティック)を指定する必要があります。 getFilteredRowsのメソッドは答えのようですが、動作していません。Google Chart APIダッシュボードを使用してgetFilteredRowsに問題が発生しました

Googleがコードプレイグラウンドでこれを有効にしようとしている例を嘲笑しました。この場合、私は円チャートに20歳以上のもののみを表示させようとしています。

(Google Codeの遊び場へのリンク: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); 
} 

を、私は元の例から変更しただけの事はの「表示」セクションに追加されます円グラフ。

誰でも意見はありますか?

答えて

1

小さな変更のいくつか: *新しい計算カラムの作成に使用されるため、「calc」は不要です。 *関数の書式には、単一の値でも配列が必要です。

'view': {'columns': [0, 3], 
     'rows' : data.getFilteredRows([{column: 2, minValue: 20}])} 
関連する問題