Google 具有空值的可视化方法 getFilteredData

Question

我一直无法让 getFilteredRows 与 google 图表 API 一起使用空值。我按照 this answer 中的代码进行操作，但我无法让它工作。我究竟做错了什么？

使用下面的代码，图表没有绘制，我收到错误消息："Invalid row index 8. Should be in the range [0-7]"。这通常意味着我输入了 8 作为列参考，但我没有。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {'packages':['corechart', 'table', 'controls']});
      google.charts.setOnLoadCallback(drawVisualization);


//CREAT CONTAINER FUNCTION
      function drawVisualization() {

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

            var data = google.visualization.arrayToDataTable([

            ['Frequency', 'Area', 'Old Fruit', 'Cases Ordered', 'Discount', 'Advanced orders', '', '' ],
            ['Rolling', 'Alamo', 'Apples', 85, 'New Customer', 3, 'John', 13], 
            ['Rolling', 'Alamo', 'Oranges', 93,'Cash', 9, 'Mary', 9], 
            ['Rolling', 'Alamo', 'Grapes', 25, 'Prepaid', 1, 'Bob', 2],
            ['Rolling', 'Alamo', 'Lemons', 25, null, null, 'Joy', 5],
            ['Rolling', 'Alamo', 'Limes', 37, null, null, 'Alfred', 15],
            ['Rolling', 'Alamo', 'Plums', 115, null, null, null, null],
            ['Rolling', 'Alamo', 'Peaches', 22, null, null, null, null],
            ['Rolling', 'Alamo', 'Apricots', 13, null, null, null, null],
            ['Rolling', 'Brazos', 'Apples', 40, 'New Customer', 4, 'Allen', 5], 
            ['Rolling', 'Brazos', 'Oranges', 16,'Cash', 8, 'Louise', 15], 
            ['Rolling', 'Brazos', 'Grapes', 99, 'Prepaid', 3, 'Cathy', 3],
            ['Rolling', 'Brazos', 'Lemons', 80, null, null, 'Mark', 10],
            ['Rolling', 'Brazos', 'Limes', 49, null, null, null, null],
            ['Rolling', 'Brazos', 'Plums', 22, null, null, null, null],
            ['Rolling', 'Brazos', 'Peaches', 47, null, null, null, null],
            ['Rolling', 'Brazos', 'Apricots', 90, null, null, null, null],
            ['YTD', 'Alamo', 'Apples', 33, 'New Customer', 8, 'John', 12], 
            ['YTD', 'Alamo', 'Oranges', 18,'Cash',5, 'Mary', 3], 
            ['YTD', 'Alamo', 'Grapes', 75, 'Prepaid', 5, 'Bob', 5],
            ['YTD', 'Alamo', 'Lemons', 40, null, null, 'Joy', 8],
            ['YTD', 'Alamo', 'Limes', 33, null, null, null, null],
            ['YTD', 'Alamo', 'Plums', 84, null, null, null, null],
            ['YTD', 'Alamo', 'Peaches', 12, null, null, null, null],
            ['YTD', 'Alamo', 'Apricots', 13, null, null, null, null],
            ['YTD', 'Brazos', 'Apples',65, 'New Customer', 8, 'Allen', 1], 
            ['YTD', 'Brazos', 'Oranges',89,'Cash', 2, 'Louise', 7], 
            ['YTD', 'Brazos', 'Grapes',22, 'Prepaid', 6, 'Cathy', 7],
            ['YTD', 'Brazos', 'Lemons', 94, null, null, 'Mark', 4],
            ['YTD', 'Brazos', 'Limes', 16, null, null, null, null],
            ['YTD', 'Brazos', 'Plums', 62, null, null, null, null],
            ['YTD', 'Brazos', 'Peaches', 47, null, null, null, null],
            ['YTD', 'Brazos', 'Apricots', 80, null, null, null, null],



      ]);

        var frequencyFilter = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'frequency_control_id',
          'options': {
            'filterColumnLabel': 'Frequency',
            'ui': {
                'labelStacking': 'vertical',
                'selectedValuesLayout': 'below',
                'allowTyping': false,
                'allowMultiple': false
            }
          },

          'state':{selectedValues:['Rolling']}

        });

        var areaFilter = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'area_filter_id',
          'options': {
            'filterColumnLabel': 'Area',
            'ui': {
                'labelStacking': 'vertical',
                'selectedValuesLayout': 'below',
                'allowTyping': false,
                'allowMultiple': false

            }
          },

          'state':{selectedValues:['Alamo']}

        });

       salesChart  = new google.visualization.ChartWrapper({
        'chartType': 'BarChart',
          'containerId': 'sales_chart',
          'options': {
            'width': 320,
              'height': 680,
                'animation':{duration:500},
              'title':'By Board Percent of Target',
              },

            'view': {'columns': [2,3]}
        });

         salesPie  = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
          'containerId': 'sales_pie_id',
          'options': {'height': 175, 'width': 300},

          'view': {'columns': [4,5]}

        });

       salesTable  = new google.visualization.ChartWrapper({
        'chartType': 'Table',
          'containerId': 'numbers_table_id',
          'options': {'height': 225, 'width': 250},

          'view': {'columns': [6, 7], 
          'rows' : data.getFilteredRows([{column: 7, minValue: 1}])} 


        });

      dashboard.bind([frequencyFilter, areaFilter, ], [salesChart, salesPie, salesTable]);
      dashboard.draw(data);


    }//END DRAWVISUALIZATION

    </script>
  </head>
  <body>

   <div>
      <table>
        <tr>
        <font size="5" face="calibri" color="#00688b"><strong>Sales</strong></font>
        <br />
        <font size="3" face="calibri" color="#00688b">March 2016 Report</font>
        </tr>
      </table>
    </div> 

  <div>
      <table class="columns">
        <tr>
          <td>
            <div id="frequency_control_id" style="padding-left: 2; width: 250"></div>
            <div id="area_filter_id" style="padding-left: 2; width: 250"></div>
            <br />
            <br />
            <br />
            <div id="numbers_table_id"></div>
            <br />
            <br />
            <div id="sales_pie_id"></div>
          </td>
          <td>
            <div id="sales_chart"></div>
          </td>
        </tr>   
       </table>
    </div>


</body>
</html>

Answer 1

错误指的是无效的 row 索引，而不是 column。

问题源于类别过滤器的初始 state。
这限制了数据。

由于getFilteredRows是在完整数据集上使用的，所以在实际绘制仪表盘时，一些行索引将不存在。

一个简单的解决方法是在绘制其他图表后，使用来自另一个图表的过滤数据 table 绘制 Table。

google.charts.load('current', {'packages':['corechart', 'table', 'controls']});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
    var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_id'));

    var data = google.visualization.arrayToDataTable([
        ['Frequency', 'Area', 'Old Fruit', 'Cases Ordered', 'Discount', 'Advanced orders', '', '' ],
        ['Rolling', 'Alamo', 'Apples', 85, 'New Customer', 3, 'John', 13],
        ['Rolling', 'Alamo', 'Oranges', 93,'Cash', 9, 'Mary', 9],
        ['Rolling', 'Alamo', 'Grapes', 25, 'Prepaid', 1, 'Bob', 2],
        ['Rolling', 'Alamo', 'Lemons', 25, null, null, 'Joy', 5],
        ['Rolling', 'Alamo', 'Limes', 37, null, null, 'Alfred', 15],
        ['Rolling', 'Alamo', 'Plums', 115, null, null, null, null],
        ['Rolling', 'Alamo', 'Peaches', 22, null, null, null, null],
        ['Rolling', 'Alamo', 'Apricots', 13, null, null, null, null],
        ['Rolling', 'Brazos', 'Apples', 40, 'New Customer', 4, 'Allen', 5],
        ['Rolling', 'Brazos', 'Oranges', 16,'Cash', 8, 'Louise', 15],
        ['Rolling', 'Brazos', 'Grapes', 99, 'Prepaid', 3, 'Cathy', 3],
        ['Rolling', 'Brazos', 'Lemons', 80, null, null, 'Mark', 10],
        ['Rolling', 'Brazos', 'Limes', 49, null, null, null, null],
        ['Rolling', 'Brazos', 'Plums', 22, null, null, null, null],
        ['Rolling', 'Brazos', 'Peaches', 47, null, null, null, null],
        ['Rolling', 'Brazos', 'Apricots', 90, null, null, null, null],
        ['YTD', 'Alamo', 'Apples', 33, 'New Customer', 8, 'John', 12],
        ['YTD', 'Alamo', 'Oranges', 18,'Cash',5, 'Mary', 3],
        ['YTD', 'Alamo', 'Grapes', 75, 'Prepaid', 5, 'Bob', 5],
        ['YTD', 'Alamo', 'Lemons', 40, null, null, 'Joy', 8],
        ['YTD', 'Alamo', 'Limes', 33, null, null, null, null],
        ['YTD', 'Alamo', 'Plums', 84, null, null, null, null],
        ['YTD', 'Alamo', 'Peaches', 12, null, null, null, null],
        ['YTD', 'Alamo', 'Apricots', 13, null, null, null, null],
        ['YTD', 'Brazos', 'Apples',65, 'New Customer', 8, 'Allen', 1],
        ['YTD', 'Brazos', 'Oranges',89,'Cash', 2, 'Louise', 7],
        ['YTD', 'Brazos', 'Grapes',22, 'Prepaid', 6, 'Cathy', 7],
        ['YTD', 'Brazos', 'Lemons', 94, null, null, 'Mark', 4],
        ['YTD', 'Brazos', 'Limes', 16, null, null, null, null],
        ['YTD', 'Brazos', 'Plums', 62, null, null, null, null],
        ['YTD', 'Brazos', 'Peaches', 47, null, null, null, null],
        ['YTD', 'Brazos', 'Apricots', 80, null, null, null, null],
    ]);

    var frequencyFilter = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'frequency_control_id',
      'options': {
        'filterColumnLabel': 'Frequency',
        'ui': {
            'labelStacking': 'vertical',
            'selectedValuesLayout': 'below',
            'allowTyping': false,
            'allowMultiple': false
        }
      },

      'state':{selectedValues:['Rolling']}

    });

    var areaFilter = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'area_filter_id',
      'options': {
        'filterColumnLabel': 'Area',
        'ui': {
            'labelStacking': 'vertical',
            'selectedValuesLayout': 'below',
            'allowTyping': false,
            'allowMultiple': false

        }
      },

      'state':{selectedValues:['Alamo']}

    });

   var salesChart = new google.visualization.ChartWrapper({
    'chartType': 'BarChart',
      'containerId': 'sales_chart',
      'options': {
        'width': 320,
          'height': 680,
            'animation':{duration:500},
          'title':'By Board Percent of Target',
          },

        'view': {'columns': [2,3]}
    });

   var salesPie = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
      'containerId': 'sales_pie_id',
      'options': {'height': 175, 'width': 300},

      'view': {'columns': [4,5]}

    });

  dashboard.bind([frequencyFilter, areaFilter], [salesChart, salesPie]);
  google.visualization.events.addListener(dashboard, 'ready', function () {
   new google.visualization.ChartWrapper({
    'chartType': 'Table',
      'containerId': 'numbers_table_id',
      'dataTable': salesChart.getDataTable(),
      'options': {'height': 225, 'width': 250},

      'view': {
        'columns': [6, 7],
        'rows': salesChart.getDataTable().getFilteredRows([{column: 7, minValue: 1}])
      }
   }).draw();
  });
  dashboard.draw(data);


}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>
  <table>
    <tr>
    <font size="5" face="calibri" color="#00688b"><strong>Sales</strong></font>
    <br />
    <font size="3" face="calibri" color="#00688b">March 2016 Report</font>
    </tr>
  </table>
</div>

<div id="dashboard_id">
  <table class="columns">
    <tr>
      <td>
        <div id="frequency_control_id" style="padding-left: 2; width: 250"></div>
        <div id="area_filter_id" style="padding-left: 2; width: 250"></div>
        <br />
        <br />
        <br />
        <div id="numbers_table_id"></div>
        <br />
        <br />
        <div id="sales_pie_id"></div>
      </td>
      <td>
        <div id="sales_chart"></div>
      </td>
    </tr>
   </table>
</div>

我还注意到仪表板 div 元素上缺少 id 属性...

Google 具有空值的可视化方法 getFilteredData

Google Visualization method getFilteredData with null values

google-visualization

filtering

dashboard