All language subtitles for 39. Populating the Chart with Values

Let's use our chart bar. Back in a chart widget here where I currently return some text, I of course instead

want to return my chart bar widget. For that

as always, you need to import it by pointing at the

chart_bar.dart file. With that imported here,

I return my chart bar and now we need to pass in three things - the label, which is not hard, in our data

object here,

we're referring of course to this map here and there,

the day is our label, should be wrapped in quotes.

The second argument also is not hard,

it's our spending amount and that's data and then amount but the third part is more difficult,

we need the total spendings for that week. Let's calculate those with another getter which will return

a double and I'll name it Max

spending and here, I want to return a value based on my grouped transaction values because there in

end, we want to sum up all the amounts, the sum of all the total sums for each day gives us the total

sum for the entire week. Now grouped transaction values of course is a list and now here, I just need

a double.

There is another helpful method we can use in Dart on lists and that's the fold method. Fold allows

us to change a list to another type, with a certain logic we define in the function we pass to fold.

So here to fold, we pass an anonymous function and besides that as a first argument, we pass a starting

value, in

this case, that's 0.0. So that's our starting value and now in this function, our second argument we pass to

fold,

we have to return a new value which will be added to this starting value,

we have to return a new value now for every run on every item in groups.

transaction values.

Therefore in is anonymous function,

we received two arguments - the first argument is the currently calculated sum,

so our starting value for the first element and thereafter, the current sum or the current value we calculated

based on this function,

so our sum

and the second argument we get here is the element we're looking at,

so our item or whatever you want to call it. These names are up to you because you get the values passed

by Dart but you are writing this code here which is triggered by Dart,

so you can name these things here as you want.

Now in here, you have to return a new sum which will then be passed as an input to this function for the

next element in line

in this list. If you're having a Javascript background, this is basically your equivalent to the reduce

function,

this also exists in many other programming languages.

Now in here, I now simply return sum plus item amount and this should give us all the totals for each

day and therefore sum up the total for the week and therefore I'll name this total spending here. So now

with that, we have a getter for the total spending.

Now here we could pass the total spending in but actually in the chart bar, I'm not interested in my

total spending but in the percentage of the total.

So actually what we should do here before passing this in, we have to take the amount for any given weekday

we're looking at and we have to divide this by our total spending, so that we get the ratio of how much

of our total week spending did we spend on this day.

Now here we are getting an error that we can't use that operator on the type object because Dart is

not able to find out that the amount is a double and we can fix this by wrapping this in parentheses and

using as double here. And now with that, we should have everything to draw our chart with some bars onto

the screen and that's looking good.

Of course we're not using the space very efficiently,

that's something we should work on but other than that, I'm liking this.

If I add a new transaction now, more shoes for let's say $120.99, you see this updates,

this number updates and always the the first bar is of course fully occupied because we have no

way of targeting different days.

Now we actually do get an error though, if we restart the app and therefore we lose all our transactions

which are stored in memory of our application because right now, we're not saving them anywhere, not on

a server or anything like that

and of course later in the course, you will learn how to save data on a server and load it from there

but right now, our data is lost whenever we restart the app and for this app, this is fine,

it's just our next step in our journey to master Flutter.

The problem nonetheless is that if we have no transactions, our chart here breaks and we get an error.

Reason for that of course is that here, the fraction we're passing to our chart bar, which defines

how much it should be filled,

that of course is an invalid value if we have no transactions because then total spending is zero,

we haven't spent anything, we have no transactions and dividing by zero,

never a great idea. This actually yields an invalid value

and what I actually would want to do is of course check whether total spending is zero and if it is

zero,

if we have no total spending, then I want to pass zero to all my chart bars because then each chart bar

should be empty and therefore the fraction by which it should be filled should be zero.

So in the end, we can simply add a ternary expression here and check whether total spending is equal

to 0.0

and if that's the case, pass 0.0 to the chart bar as our percentage of total because the bar should be

empty then and only if we have a non-zero value, I want to calculate my share of the total spending.

So with this simple change here, now this renders again and now we have an application that also works with

no transactions. So next steps will of course be that we target different days

but first of all, I want to make sure that we use this space a bit more efficiently.