I want to create progress bars to see my advancements during the year in different topics along the year in Obsidian.
I've checked several options, like this tutorial, but don't seem clear to me: Progress Bar on Tasks
In the following example they provide:
(await dv.tryQuery('TASK FROM "Test" ')).values.length
const Tasks = dv.page("Test").file.tasks
let CompletedTasks = Tasks
.where(t => t.completed)
dv.span(
"![progress](https://progress-bar.dev/"
+ parseInt((CompletedTasks.length / Tasks.length) * 100)
+ "/)"
)
and
- [ ] Quest 1
- [ ] Quest 2
- [ ] Quest 3
- [ ] Quest 4
- [ ] Quest 5
What do I have to modify to obtain a progress bar?
The examples you linked work out of the box for me. Let's see how they operate.
This progress bar gets embedded from a website called https://progress-bar.dev/, which generates on-demand pictures of progress bars. The DataviewJS looks like this:
const Tasks = dv.page("Test").file.tasks
let CompletedTasks = Tasks
.where(t => t.completed)
dv.span(
"![progress](https://progress-bar.dev/"
+ parseInt((CompletedTasks.length / Tasks.length) * 100)
+ "/)"
)
tasks
(checkboxes) from a page called "Test"
and stores the result as Tasks
.CompletedTasks
.https://progress-bar.dev/80/
, calculating the percentage as (Tasks / CompletedTasks) * 100
and rounding off the decimals with parseInt()
.This one is a native HTML progress bar, so it works offline, and can be customized with CSS if you want to. The example uses an inline DataviewJS query, which I'll break into separate lines here:
const value = Math.round((
(dv.current().file.tasks.where(t => t.completed).length) / (dv.current().file.tasks).length || 0
) * 100);
"<progress value='" + value + "' max='100'></progress>" + " " + value + "%"
tasks.where(t => t.completed).length
divided by file.tasks.length
, and rounds the number with Math.round()
(using 0
as a fallback if the tasks don't load).value
.<progress value='80' max='100'></progress> 80%
You can choose which note the progress bars use by calling either dv.current()
or dv.page("My note")
to choose a different note. For anything else you need to do, read through the Dataview documentation and learn about its JavaScript API.
https://progress-bar.dev/ actually has some extra commands to customize the bar too, like title
and scale
, and you can see some examples on their GitHub.
Good luck designing a fun Obsidian dashboard!