3
getFilteredRowsをGoogle Chart APIでnull値と連携させるのに問題がありました。私はthis answerのコードに従っていましたが、動作させることができません。私は間違って何をしていますか？Google VisualizationのメソッドgetFilteredDataにnull値を設定する
次のコードでは、グラフが描画されず、「無効な行インデックス8. [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>
素晴らしい、ホワイトハットに欠けていた気づきました。これは魅力のように機能します。 – Natalie