3
google chart API ile boş değerlerle çalışmak için getFilteredRows alma konusunda sorun yaşıyorum. Kodu this answer'da takip ettim, ancak işe yaratamıyorum. Neyi yanlış yapıyorum?Google Görselleştirme yöntemi null değerlerine sahip getFilteredData
Aşağıdaki kodla, grafik çizmiyor ve hata iletisini alıyorum: "Geçersiz satır dizini 8. [0-7] aralığında olmalıdır". Bu genellikle benim yapmadığım 8'i bir sütun referansı olarak girdiğim anlamına gelir.
<!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>
Muhteşem ... pano
divelemanı üzerinde WhiteHat eksikti ettim. Bu bir çekicilik gibi çalışır. – Natalie