Hello there. I noticed that when I want to fetch/map multiple rows of data from my database tables to the application builder, it returns a maximum of 20 rows. Please is it possible to overcome this row limit and fetch more data?
Hi,
The table element has a property Items per page that allows you to set the number of rows you want to return.
It can be any number between 1 and 100. The reason it is limited to 100 is for performance.
@frederikdc @frederikdc I don’t mean fetching data for use in the table element. I want the multiple rows of data to be mapped in a text field or in iframe element.
Case use: I created a chart using QuickChart and generated an API endpoint URL to embed in an iframe element. I modified the URL to dynamically map my Baserow table data into the chart.
However, for some reason, only 20 rows of my table data are being fetched and displayed in the chart. I would like to know if there’s a way to fetch more rows or if there are limitations I should be aware of.
Yes, I did something similar for charting a couple of months ago. You can implement a recursive JS function to fetches all the data before starting the create the chart:
let data = [];
async function getData(dataSourceId, offset = 0) {
const url = `https://api.baserow.io/api/builder/data-source/${dataSourceId}/dispatch/?offset=${offset}&count=20`;
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
//throw new Error('Network response was not ok');
}
const responseData = await response.json();
data = data.concat(responseData.results);
if (responseData.has_next_page) {
const nextOffset = offset + 20;
return getData(dataSourceId, nextOffset);
}else{
const temp = data;
data = [];
return temp;
}
} catch (error) {
console.error('Error fetching data:', error);
//throw error; // Propagate the error
}
}
// Export the function to make it accessible from other files
export { getData };
Store the above script in an external JS file that is publicly accessible. In the iFrame element you need the following code
<script type="module">
import { getData } from 'https://[your url here]/data.js';
const actions = await getData(2432);
From that point on, the variable actions contains all the records from your data source
script type=“module”>
import { getData } from ‘https://raw.githubusercontent.com/nocodeinfolab/Baserow-chart-data/main/data.js’;
const actions = await getData(2432);
/script>
iframe id=“chartFrame” src=“No-Code Chart Maker? data1(mapped data)=&labels=(mapped labels)” frameborder=“0” width=“800” height=“800”>/iframe>
@frederikdc the above code is my iframe element now. It’s still not fetching more than 20 rows.
It seems there is something I am not getting right. Please could you help me examine it?
ps: I removed the tag ‘<’ so that the codes can appear here.
Hi, 2432 is the id of a data source I used, so you will need to replace this.
This is code the I have in the iframe element:
So, i don’t refer to the an iframe tag with id or src attribute
@frederikdc my data are in baserow tables. I know of Table ID; I’m assuming it’s not the same as data source ID. How can I find my data source ID? Forgive me if the answer is obvious - it’s just not obvious to me.
No, it’s not that obvious 
. Actually, the entire process of implementing a chart through an iFrame is not the obvious.
You can get the id of the data source through the inspector of your browser. Open a page in preview mode that uses the data source and check for the ID in the inspector under the Network tab.
