聚集在儀表板篩選數據，谷歌圖表

Question

//谷歌的圖表與過濾數據

 google.charts.load('visualization', '1', {packages: ['controls']}); 
     google.charts.setOnLoadCallback(drawDashboard); 

     function drawDashboard() { 

     // Create our data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Category'); 
     data.addColumn('string', 'Month'); 
     data.addColumn('number', 'coverage'); 
     data.addColumn('number', 'coverage_change'); 
     data.addColumn('number', 'depth'); 
     data.addColumn('number', 'depth_change'); 
     data.addColumn('number', 'breadth'); 
     data.addColumn('number', 'breadth_change'); 
     data.addRows([ 
     ['Restaurants','Jan',0.177,0,2.489329,0,112.019805,0], 
     ['Hotels','Jan',0.3411,0,1.216445,0,52.307135,0], 
     ['Movies','Jan',0.4748,0,0.312464,0,9.686384,0], 
     ['Attractions','Jan',0,0,0,0,0,0], 
     ['Destinations','Jan',0,0,0,0,0,0], 
     ['Events','Jan',0,0,0,0,0,0], 
     ['All','Jan',0.2092,0,4.018238,0,174.013324,0], 
     ['Restaurants','Feb',0.177,0,2.489329,0,112.019805,0], 
     ['Hotels','Feb',0.3411,0,1.216445,0,52.307135,0], 
     ['Movies','Feb',0.4748,0,0.312464,0,9.686384,0], 
     ['Attractions','Feb',0,0,0,0,0,0], 
     ['Destinations','Feb',0,0,0,0,0,0], 
     ['Events','Feb',0,0,0,0,0,0], 
     ['All','Feb',0.2092,0,4.018238,0,174.013324,0] 


     ]); 



     // Create a dashboard. 
     var dashboard = new  google.visualization.Dashboard(document.getElementById('dashboard_div')); 

     // Create a range slider, passing some options 
     var filter = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'filter_div', 
      'options': { 
      'filterColumnLabel': 'Category'}, 
      'ui': { 
       'allowTyping': false, 
       'allowMultiple': false, 
       'labelStacking': 'vertical' 
      } 
     }); 

     // Create a pie chart, passing some options 
     var Chart = new google.visualization.ChartWrapper({ 
      'chartType': 'LineChart', 
      'containerId': 'chart1_div', 
      'options': { 
      'width': 1000, 
      'height': 300}, 
      'view': {'columns': [1,2]}, 
      'dataTable' : google.visualization.data.group(data, [0], 
       [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]) 
      }); 


     var Chart2 = new google.visualization.ChartWrapper({ 
      'chartType': 'LineChart', 
      'containerId': 'chart2_div', 
      'options': { 
      'width': 1000, 
      'height': 300, 
      curveType:'function'}, 
      'view': {'columns': [1,3]} 
     }); 

     // Establish dependencies, declaring that 'filter' drives 'pieChart', 
     // so that the pie chart will only display entries that are let through 
     // given the chosen slider range. 

     dashboard.bind(filter, [Chart2,Chart]); 
     // Draw the dashboard. 
     dashboard.draw(data); 
     } 
    </script> 

//我能得到兩個圖表使用相同的過濾器。但是這些值不會被聚合。我用google.visualization.data.group函數..但是，它不似乎工作。

Answer 1

只有一個數據表可以每控制板

所以當控制板被吸入，上Chart數據表，因爲它被包含在儀表板

---

以被忽略

使用使用來自儀表板的彙總和過濾的數據繪製圖表，

繪製Chart獨立使用DataTable從Chart2，
當'ready'事件觸發

這一事件將觸發每次Chart2是重繪的filter

---

結果見下工作片斷.. 。

google.charts.load('current', { 
 
    callback: drawDashboard, 
 
    packages:['controls'] 
 
}); 
 

 
function drawDashboard() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Category'); 
 
    data.addColumn('string', 'Month'); 
 
    data.addColumn('number', 'coverage'); 
 
    data.addColumn('number', 'coverage_change'); 
 
    data.addColumn('number', 'depth'); 
 
    data.addColumn('number', 'depth_change'); 
 
    data.addColumn('number', 'breadth'); 
 
    data.addColumn('number', 'breadth_change'); 
 
    data.addRows([ 
 
    ['Restaurants','Jan',0.177,0,2.489329,0,112.019805,0], 
 
    ['Hotels','Jan',0.3411,0,1.216445,0,52.307135,0], 
 
    ['Movies','Jan',0.4748,0,0.312464,0,9.686384,0], 
 
    ['Attractions','Jan',0,0,0,0,0,0], 
 
    ['Destinations','Jan',0,0,0,0,0,0], 
 
    ['Events','Jan',0,0,0,0,0,0], 
 
    ['All','Jan',0.2092,0,4.018238,0,174.013324,0], 
 
    ['Restaurants','Feb',0.177,0,2.489329,0,112.019805,0], 
 
    ['Hotels','Feb',0.3411,0,1.216445,0,52.307135,0], 
 
    ['Movies','Feb',0.4748,0,0.312464,0,9.686384,0], 
 
    ['Attractions','Feb',0,0,0,0,0,0], 
 
    ['Destinations','Feb',0,0,0,0,0,0], 
 
    ['Events','Feb',0,0,0,0,0,0], 
 
    ['All','Feb',0.2092,0,4.018238,0,174.013324,0] 
 
    ]); 
 

 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
 

 
    var filter = new google.visualization.ControlWrapper({ 
 
    'controlType': 'CategoryFilter', 
 
    'containerId': 'filter_div', 
 
    'options': { 
 
     'filterColumnLabel': 'Category'}, 
 
     'ui': { 
 
     'allowTyping': false, 
 
     'allowMultiple': false, 
 
     'labelStacking': 'vertical' 
 
     } 
 
    }); 
 

 
    var Chart2 = new google.visualization.ChartWrapper({ 
 
    'chartType': 'LineChart', 
 
    'containerId': 'chart2_div', 
 
    'options': { 
 
     'width': 1000, 
 
     'height': 300, 
 
     curveType:'function'}, 
 
     'view': {'columns': [1,3]} 
 
    }); 
 

 
    google.visualization.events.addListener(Chart2, 'ready', function() { 
 
    var Chart = new google.visualization.ChartWrapper({ 
 
     'chartType': 'LineChart', 
 
     'containerId': 'chart1_div', 
 
     'options': { 
 
     'width': 1000, 
 
     'height': 300 
 
     }, 
 
     'dataTable' : google.visualization.data.group(
 
     Chart2.getDataTable(), 
 
     [0], 
 
     [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}] 
 
    ) 
 
    }); 
 
    Chart.draw(); 
 
    }); 
 

 
    dashboard.bind(filter, [Chart2]); 
 
    dashboard.draw(data); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard_div"> 
 
    <div id="filter_div"></div> 
 
    <div id="chart1_div"></div> 
 
    <div id="chart2_div"></div> 
 
</div>