Flutterflow line chart | Create Supabase function and implement it in Flutterflow

hello everyone uh in my previous video I already talking about how to create rest API from super best table and convert to the rest API and consume it to flf flow as a list View and in this time I'm going to create some tutorial to create some function on super B database and I will again convert to rest API and then I will consume it into flatl but in this case uh I will try to implementing on the chart widget as a line chart so um but uh for those of you guys that uh have't watching my previous video I think it's better uh if you uh watch that video first and go back to this tutorial so let's uh begin the tutorial this is my super best uh database and as you can see uh I added the new table sales table and the structure is like this I just uh added three or yeah three or to colume uh transaction that with that data type and total with integer data type and then I inserting the dami data into the cells table with the query and after I inserting the D data I create some query to select uh the data and grouping by transaction Deb and also I summary total for each day and the result will be like this as you can see the data uh is grouping by transaction dat and after I successfully create the syntax or query to grouping in the data I create some function from that query I put the query inside and Define the colume that you want to show on the function and after that um like uh my previous video I try to testing my PR API and I'll go to API dog and then select the sales group click the best Tab and then copy the yourl into your Bosman or insomnia to to make sure the rest API is uh is true or it can be running and as you can see I already add uh the new uh the new uh request I will uh start from beginning at new HTTP request and then change method to the post and copy copy past the URL and uh as you can see this is uh as add uh standing for heer and you have to add the heer into your insia or Postman APA key and authorization you can get the the value from setting API and after that uh we can testing the pr API okay all Thea show after uh the testing is uh success we can uh go back or we can jump to to the flf flow so as you can see this is the last project that I already created in my previous uh tutorial video I add some page new page chart page and inside the page I add the chart wiet and uh and uh on the chart widget I add some backround query okay maybe I will try from I will start from beginning I will delete this chart widget chart and and on the chart with the properties uh on the chart data okay before that on the call on the chart click the backend query and uh from API call but uh sorry I I I already create or already add some API call like the postman you just uh need to put the URL and then add the header like this and then after that uh you have to uh click the test API call and after you get the response uh you add the you have to add the just for on Jon pad for example I will delect the Jon pad and add again okay and back again to the chart on the backand query choose the appi call and click the API call confirm and on the properties tab click the data from number of list and click the sales respon in this option click the because we are going to paring the X data the so we can choose for uh that and for the [Music] WIA to to or is else you can show the label okay and after that um Okay click uh this that's mode okay as uh you can see the data is successfully retrive on the chart and and and for make sure the data is correct uh for example the First Data is five and if we go back to the super B so you can see the First Data is five and for the last data is 10 10 so um I think uh that's it for for this tutorial as usual if you guys have any question yes feel free to asking me on the comment section below thank you for watching

Channel: yusuf firdaus

Views: 231

Keywords:

Id: 8bkIQGnfptM

Length: 10min 39sec (639 seconds)

Published: Sat Jan 27 2024