<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>Hi, I am trying to make a dashboard with many differend graphs, but I cannot solve the issue 'Invalid row index 5. Should be in the range [0-4].' Now I have a very simple dashboard, it works when I use only the data columns the 2 simple graphs need. But I want more graphs with other columns. When I add more columns to the data, the error pops up. I think I need a ready Listener somewhere in the code, but I tried so many times using the answeres for others, but without success. So will you please complete my code with a ready listener so the error will be solved? Thanks !
a 'ready' listener will not resolve the problem
the problem stems from...
'rows' : data.getFilteredRows([{column: 2, minValue: 1}])}
once the dashboard is drawn and the filter value changes,
there are rows that exist in the data, that do not exist in the dashboard
so getFilteredRows is returning more rows than the dashboard has access to
thus, the error is thrown --> Invalid row index
to correct, just use an overall DataView to draw the dashboard
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([{column: 2, minValue: 1}]));
dashboard.draw(view);
see following working snippet...
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>