Google Vis Dashboard 带有一个工作就绪的监听器
Google Vis Dashboard with a working ready listener
<html>
<head>
<title>Dashboard Evelien</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls', 'table']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['geo_Stad', 'Name', 'Leningdelen', 'Hypotheek', 'Straat', 'Woonplaats', 'Datum_start', 'Datum_eind', 'Mv', 'looptijd'],
['Netherlands, Amsterdam', 'Aap' , 5, 500000, 'Kalverstraat', 'Amsterdam', new Date(2014, 3, 22), new Date(2016, 2, 28), 'm', 123],
['Netherlands, Rotterdam', 'Noot', 1, 70000, 'Beursplein', 'Rotterdam', new Date(2014, 10, 11), new Date(2017, 3, 20), 'm', 234],
['Netherlands, Rotterdam', 'Mies', 3, 300000, 'Stationsplein', 'Rotterdam', new Date(2013, 10, 1), new Date(2013, 12, 23), 'v', 564],
['Netherlands, Amsterdam', 'Wim' , 2, 222222, 'Dorpsstraat', 'Amsterdam', new Date(2010, 1, 2), new Date(2016, 10, 23), 'm', 456],
['Netherlands, Amsterdam', 'Zus' , 7, 600000, 'Stationsplein', 'Amsterdam', new Date(2007, 5, 22), new Date(2009, 2, 2), 'v', 385],
['Netherlands, Rotterdam', 'Jet' , 2, 100000, 'Dorpsstraat', 'Rotterdam', new Date(2014, 7, 7), new Date(2015, 2, 16), 'v', 964],
['Netherlands, Rotterdam', 'Teun', 1, 85670, 'Kerkstraat', 'Rotterdam', new Date(2014, 3, 22), new Date(2016, 11, 12), 'm', 356],
['Netherlands, Utrecht', 'Gijs', 1, 53400, 'Stationsstraat', 'Utrecht', new Date(2014, 3, 22), new Date(2016, 6, 18), 'm', 356],
['Netherlands, Utrecht', 'Does', 1, 77200, 'Vreeburg', 'Utrecht', new Date(2014, 3, 22), new Date(2016, 8, 8), 'm', 768],
['Netherlands', 'Does1', 0, 0, 'Amsterdam', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 467],
['Netherlands', 'Does2', 0, 0, 'Rotterdam', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 563],
['Netherlands', 'Does3', 0, 0, 'Utrecht', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 467],
['Netherlands', 'Does4', 0, 0, 'Nederland', null, new Date(2014, 3, 22), new Date(2016, 8, 8), '', 963]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Leningdelen'
}
});
var tableE = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'tableE_div',
'view': {'rows' : data.getFilteredRows([{column: 2, minValue: 1}])},
'options': {
'showRowNumber': 'true',
'width': '100%',
'height': '33%',
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'view': {'columns': [1, 2],
'rows' : data.getFilteredRows([{column: 2, minValue: 1}])},
'options': {
'width': 400,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
// Create a bar chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chartB_div',
'view': {'columns': [1, 2],
'rows' : data.getFilteredRows([{column: 2, minValue: 1}])},
'options': {
'width': 500,
'height': 300,
'legend': 'right'
}
});
// 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(donutRangeSlider, [tableE, pieChart, barChart]);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<table class="columns">
<tr>
<td><div id="filter_div" style="border: 1px solid #ccc"></div></td>
</tr>
<tr>
<td><div id="chart_div" style="border: 1px solid #ccc"></div></td>
<td><div id="chartB_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
<table>
<tr>
<td><div id="tableE_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
</div>
</body>
</html>
你好，
我正在尝试制作一个包含许多不同图表的仪表板，但我无法解决问题 'Invalid row index 5. Should be in the range [0-4].'
现在我有一个非常简单的仪表板，当我只使用 2 个简单图表所需的数据列时它就可以工作。但我想要更多带有其他列的图表。当我向数据添加更多列时，会弹出错误。我想我需要在代码中的某处准备好一个监听器，但是我尝试了很多次使用其他人的答案，但没有成功。
那么，请您使用现成的侦听器完成我的代码，以便解决错误吗？谢谢！
一个'ready'监听器不会解决问题
问题源于...
'rows' : data.getFilteredRows([{column: 2, minValue: 1}])}
绘制仪表板并更改过滤器值后，
data 中存在一些行，dashboard
中不存在这些行
所以 getFilteredRows 返回的行数多于仪表板可以访问的行数
因此，抛出错误 --> Invalid row index
更正，只用一个整体的DataView来绘制仪表盘
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{column: 2, minValue: 1}]));
dashboard.draw(view);
请参阅以下工作片段...
google.charts.load('current', {'packages':['corechart', 'controls', 'table']});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
['geo_Stad', 'Name', 'Leningdelen', 'Hypotheek', 'Straat', 'Woonplaats', 'Datum_start', 'Datum_eind', 'Mv', 'looptijd'],
['Netherlands, Amsterdam', 'Aap' , 5, 500000, 'Kalverstraat', 'Amsterdam', new Date(2014, 3, 22), new Date(2016, 2, 28), 'm', 123],
['Netherlands, Rotterdam', 'Noot', 1, 70000, 'Beursplein', 'Rotterdam', new Date(2014, 10, 11), new Date(2017, 3, 20), 'm', 234],
['Netherlands, Rotterdam', 'Mies', 3, 300000, 'Stationsplein', 'Rotterdam', new Date(2013, 10, 1), new Date(2013, 12, 23), 'v', 564],
['Netherlands, Amsterdam', 'Wim' , 2, 222222, 'Dorpsstraat', 'Amsterdam', new Date(2010, 1, 2), new Date(2016, 10, 23), 'm', 456],
['Netherlands, Amsterdam', 'Zus' , 7, 600000, 'Stationsplein', 'Amsterdam', new Date(2007, 5, 22), new Date(2009, 2, 2), 'v', 385],
['Netherlands, Rotterdam', 'Jet' , 2, 100000, 'Dorpsstraat', 'Rotterdam', new Date(2014, 7, 7), new Date(2015, 2, 16), 'v', 964],
['Netherlands, Rotterdam', 'Teun', 1, 85670, 'Kerkstraat', 'Rotterdam', new Date(2014, 3, 22), new Date(2016, 11, 12), 'm', 356],
['Netherlands, Utrecht', 'Gijs', 1, 53400, 'Stationsstraat', 'Utrecht', new Date(2014, 3, 22), new Date(2016, 6, 18), 'm', 356],
['Netherlands, Utrecht', 'Does', 1, 77200, 'Vreeburg', 'Utrecht', new Date(2014, 3, 22), new Date(2016, 8, 8), 'm', 768],
['Netherlands', 'Does1', 0, 0, 'Amsterdam', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 467],
['Netherlands', 'Does2', 0, 0, 'Rotterdam', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 563],
['Netherlands', 'Does3', 0, 0, 'Utrecht', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 467],
['Netherlands', 'Does4', 0, 0, 'Nederland', null, new Date(2014, 3, 22), new Date(2016, 8, 8), '', 963]
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{column: 2, minValue: 1}]));
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Leningdelen'
}
});
var tableE = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'tableE_div',
'options': {
'showRowNumber': 'true',
'width': '100%',
'height': '33%',
}
});
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'view': {
'columns': [1, 2]
},
'options': {
'width': 400,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chartB_div',
'view': {
'columns': [1, 2]
},
'options': {
'width': 500,
'height': 300,
'legend': 'right'
}
});
dashboard.bind(donutRangeSlider, [tableE, pieChart, barChart]);
dashboard.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<table class="columns">
<tr>
<td><div id="filter_div" style="border: 1px solid #ccc"></div></td>
</tr>
<tr>
<td><div id="chart_div" style="border: 1px solid #ccc"></div></td>
<td><div id="chartB_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
<table>
<tr>
<td><div id="tableE_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
</div>
<html>
<head>
<title>Dashboard Evelien</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {'packages':['corechart', 'controls', 'table']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = google.visualization.arrayToDataTable([
['geo_Stad', 'Name', 'Leningdelen', 'Hypotheek', 'Straat', 'Woonplaats', 'Datum_start', 'Datum_eind', 'Mv', 'looptijd'],
['Netherlands, Amsterdam', 'Aap' , 5, 500000, 'Kalverstraat', 'Amsterdam', new Date(2014, 3, 22), new Date(2016, 2, 28), 'm', 123],
['Netherlands, Rotterdam', 'Noot', 1, 70000, 'Beursplein', 'Rotterdam', new Date(2014, 10, 11), new Date(2017, 3, 20), 'm', 234],
['Netherlands, Rotterdam', 'Mies', 3, 300000, 'Stationsplein', 'Rotterdam', new Date(2013, 10, 1), new Date(2013, 12, 23), 'v', 564],
['Netherlands, Amsterdam', 'Wim' , 2, 222222, 'Dorpsstraat', 'Amsterdam', new Date(2010, 1, 2), new Date(2016, 10, 23), 'm', 456],
['Netherlands, Amsterdam', 'Zus' , 7, 600000, 'Stationsplein', 'Amsterdam', new Date(2007, 5, 22), new Date(2009, 2, 2), 'v', 385],
['Netherlands, Rotterdam', 'Jet' , 2, 100000, 'Dorpsstraat', 'Rotterdam', new Date(2014, 7, 7), new Date(2015, 2, 16), 'v', 964],
['Netherlands, Rotterdam', 'Teun', 1, 85670, 'Kerkstraat', 'Rotterdam', new Date(2014, 3, 22), new Date(2016, 11, 12), 'm', 356],
['Netherlands, Utrecht', 'Gijs', 1, 53400, 'Stationsstraat', 'Utrecht', new Date(2014, 3, 22), new Date(2016, 6, 18), 'm', 356],
['Netherlands, Utrecht', 'Does', 1, 77200, 'Vreeburg', 'Utrecht', new Date(2014, 3, 22), new Date(2016, 8, 8), 'm', 768],
['Netherlands', 'Does1', 0, 0, 'Amsterdam', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 467],
['Netherlands', 'Does2', 0, 0, 'Rotterdam', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 563],
['Netherlands', 'Does3', 0, 0, 'Utrecht', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 467],
['Netherlands', 'Does4', 0, 0, 'Nederland', null, new Date(2014, 3, 22), new Date(2016, 8, 8), '', 963]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Leningdelen'
}
});
var tableE = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'tableE_div',
'view': {'rows' : data.getFilteredRows([{column: 2, minValue: 1}])},
'options': {
'showRowNumber': 'true',
'width': '100%',
'height': '33%',
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'view': {'columns': [1, 2],
'rows' : data.getFilteredRows([{column: 2, minValue: 1}])},
'options': {
'width': 400,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
// Create a bar chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chartB_div',
'view': {'columns': [1, 2],
'rows' : data.getFilteredRows([{column: 2, minValue: 1}])},
'options': {
'width': 500,
'height': 300,
'legend': 'right'
}
});
// 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(donutRangeSlider, [tableE, pieChart, barChart]);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
</head>
<body>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<table class="columns">
<tr>
<td><div id="filter_div" style="border: 1px solid #ccc"></div></td>
</tr>
<tr>
<td><div id="chart_div" style="border: 1px solid #ccc"></div></td>
<td><div id="chartB_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
<table>
<tr>
<td><div id="tableE_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
</div>
</body>
</html>
你好， 我正在尝试制作一个包含许多不同图表的仪表板，但我无法解决问题 'Invalid row index 5. Should be in the range [0-4].' 现在我有一个非常简单的仪表板，当我只使用 2 个简单图表所需的数据列时它就可以工作。但我想要更多带有其他列的图表。当我向数据添加更多列时，会弹出错误。我想我需要在代码中的某处准备好一个监听器，但是我尝试了很多次使用其他人的答案，但没有成功。 那么，请您使用现成的侦听器完成我的代码，以便解决错误吗？谢谢！
一个'ready'监听器不会解决问题
问题源于...
'rows' : data.getFilteredRows([{column: 2, minValue: 1}])}
绘制仪表板并更改过滤器值后，
data 中存在一些行，dashboard
所以 getFilteredRows 返回的行数多于仪表板可以访问的行数
因此，抛出错误 --> Invalid row index
更正，只用一个整体的DataView来绘制仪表盘
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{column: 2, minValue: 1}]));
dashboard.draw(view);
请参阅以下工作片段...
google.charts.load('current', {'packages':['corechart', 'controls', 'table']});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
['geo_Stad', 'Name', 'Leningdelen', 'Hypotheek', 'Straat', 'Woonplaats', 'Datum_start', 'Datum_eind', 'Mv', 'looptijd'],
['Netherlands, Amsterdam', 'Aap' , 5, 500000, 'Kalverstraat', 'Amsterdam', new Date(2014, 3, 22), new Date(2016, 2, 28), 'm', 123],
['Netherlands, Rotterdam', 'Noot', 1, 70000, 'Beursplein', 'Rotterdam', new Date(2014, 10, 11), new Date(2017, 3, 20), 'm', 234],
['Netherlands, Rotterdam', 'Mies', 3, 300000, 'Stationsplein', 'Rotterdam', new Date(2013, 10, 1), new Date(2013, 12, 23), 'v', 564],
['Netherlands, Amsterdam', 'Wim' , 2, 222222, 'Dorpsstraat', 'Amsterdam', new Date(2010, 1, 2), new Date(2016, 10, 23), 'm', 456],
['Netherlands, Amsterdam', 'Zus' , 7, 600000, 'Stationsplein', 'Amsterdam', new Date(2007, 5, 22), new Date(2009, 2, 2), 'v', 385],
['Netherlands, Rotterdam', 'Jet' , 2, 100000, 'Dorpsstraat', 'Rotterdam', new Date(2014, 7, 7), new Date(2015, 2, 16), 'v', 964],
['Netherlands, Rotterdam', 'Teun', 1, 85670, 'Kerkstraat', 'Rotterdam', new Date(2014, 3, 22), new Date(2016, 11, 12), 'm', 356],
['Netherlands, Utrecht', 'Gijs', 1, 53400, 'Stationsstraat', 'Utrecht', new Date(2014, 3, 22), new Date(2016, 6, 18), 'm', 356],
['Netherlands, Utrecht', 'Does', 1, 77200, 'Vreeburg', 'Utrecht', new Date(2014, 3, 22), new Date(2016, 8, 8), 'm', 768],
['Netherlands', 'Does1', 0, 0, 'Amsterdam', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 467],
['Netherlands', 'Does2', 0, 0, 'Rotterdam', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 563],
['Netherlands', 'Does3', 0, 0, 'Utrecht', 'Nederland', new Date(2014, 3, 22), new Date(2016, 8, 8), '', 467],
['Netherlands', 'Does4', 0, 0, 'Nederland', null, new Date(2014, 3, 22), new Date(2016, 8, 8), '', 963]
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{column: 2, minValue: 1}]));
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Leningdelen'
}
});
var tableE = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'tableE_div',
'options': {
'showRowNumber': 'true',
'width': '100%',
'height': '33%',
}
});
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'view': {
'columns': [1, 2]
},
'options': {
'width': 400,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
}
});
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chartB_div',
'view': {
'columns': [1, 2]
},
'options': {
'width': 500,
'height': 300,
'legend': 'right'
}
});
dashboard.bind(donutRangeSlider, [tableE, pieChart, barChart]);
dashboard.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<table class="columns">
<tr>
<td><div id="filter_div" style="border: 1px solid #ccc"></div></td>
</tr>
<tr>
<td><div id="chart_div" style="border: 1px solid #ccc"></div></td>
<td><div id="chartB_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
<table>
<tr>
<td><div id="tableE_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
</div>