tengo una gráfica de barras que me muestra correctamente los datos que saca de una base de datos pero esto con los datos que de momento tengo, no supone un inconveniente. Pero si acumulo muchos datos, la gráfica quedaría muy grande. Mi pregunta es si hay una forma de que me muestre solo 10 elementos solo o si se puede algún tipo de paginación o mostrar solo los datos que aparecen en la tabla y al hacer click en la paginación de la tabla se cambie lo que se muestra en la gráfica. Este es el código en el controller:
function drawBasic() {
var gdata = new google.visualization.DataTable();
gdata.addColumn('string', 'Fecha');
gdata.addColumn('number', 'Pasos');
gdata.addRows(
self.matriz.map(function(d) {
return [{ v: (d.day).toLocaleString() }, d.steps];
})
);
var options = {
hAxis: {
title: 'Fecha',
},
vAxis: {
title: 'Nº de pasos',
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(gdata, options);
}
Y este es mi HTML:
<div id="chart_div" class="grafica"></div>
<table ng-init="configPages()" id="dataTable">
<thead>
<tr>
<th>Fecha</th>
<th>Pasos</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="datos in datosPasos.matriz | startFromGrid: currentPage * pageSize | limitTo: pageSize"></br>
<td>{{datos.dia}}</td >
<td>{{datos.pasos}}</td>
</tr>
</tbody>
</table>
<div class="btn-group">
<button type="button" class="btn pagina" ng-disabled="currentPage == 0" ng-click="currentPage = currentPage - 1">«</button>
<button type="button" class="btn pagina" ng-disabled="currentPage == page.no - 1" ng-click="setPage(page.no)" ng-repeat="page in pages">{{page.no}}</button>
<button type="button" class="btn pagina" ng-disabled="currentPage >= ((datosPasosPacCtrl.searchResult.length/pageSize) - 1)" ng-click="currentPage = currentPage + 1">»</button>
</div>
Gracias.