Progress bar for incomplete/total tasks?

Help
1

Good evening,

I was wondering, if anybody has figured out a way, to display a progress bar in a note representing the number of incomplete divided by total tasks in a note?

I imagine a combination of Dataview and one of the chart plugins might be able to do it. Just wanted to hear if somebody else already figured it out before I start hacking :slight_smile: .

Cheers!

3 Likes
2

Hi.
I don’t understand if you want this only for one note or multiple note.
But I leave here a Table for test purposes (just to check what elements and functions you can use):

```dataview
TABLE file.tasks.text, length(file.tasks.text) as Total, file.tasks.completed, filter(file.tasks.completed, (t) => t = true) as C, length(filter(file.tasks.completed, (t) => t = true)) AS Completed, (length(filter(file.tasks.completed, (t) => t = true)) / length(file.tasks.text)) * 100 AS BB, "<progress value='" + (length(filter(file.tasks.completed, (t) => t = true)) / length(file.tasks.text)) * 100 + "' max='100'></progress>" AS Progress
FROM "your folder"
WHERE file.tasks
```

Base code for html progress bar:

<progress value='75' max='100'></progress>

For one note (with the query in same note) you can use the inline query bellow, but you have some update issues (to update the values you need to go to another note and return):

`= "<progress value='" + (length(filter(this.file.tasks.completed, (t) => t = true)) / length(this.file.tasks.text)) * 100 + "' max='100'></progress>" + " " + (length(filter(this.file.tasks.completed, (t) => t = true)) / length(this.file.tasks.text)) * 100 + "%"`
13 Likes
3

This is absolute magic. Thanks for sharing it!

1 Like
4

really cool! Thanks

5

To those interested in explore another type of “progress bar”, this is another alternative (but attention, it’s an online bar, i.e., an embed external url):

  1. (external link) see here: GitHub - fredericojordan/progress-bar: đź“Š Flask API for SVG progress badges

  2. in table, replace "<progress ... /progress>" AS Progress by

"![progress](https://progress-bar.dev/" + (length(filter(file.tasks.completed, (t) => t = true)) / length(file.tasks.text)) * 100 + "/)" AS Progress
  1. to inline query:
`="![progress](https://progress-bar.dev/" + (length(filter(this.file.tasks.completed, (t) => t = true)) / length(this.file.tasks.text)) * 100 + "/)"`
2 Likes
6

Thank you so much, @mnvwvnm, really nice!

I can’t get the inline queries to work though, they don’t evaluate. A basic Dataview example like

We are on page `= this.file.name`.

doesn’t evaluate either, so I’m sure it’s not a problem with your code.

I’ll fiddle a bit more around with it.

Thanks again!

7

Do you use the new obsidian feature “Live Preview”?
I don’t use it, but I think that inline queries don’t work in Live Preview!
If not the case, see your inline prefix defined in Settings > Dataview.

8

That was it, thanks, it worked when I switched to the legacy editor :slight_smile: .

I had to round() the expression in the request to http://progress-bar.dev btw, to get it to show:

`="![progress](https://progress-bar.dev/" + round(length(filter(this.file.tasks.completed, (t) => t = true)) / length(this.file.tasks.text) * 100) + "/)"`

Thanks again for the help!

9

You are right. I forgot that detail because I don’t use this type of progress bar and never was confronted with non-integer numbers. Thanks

10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.