How to create progress bars in obsidian dataview

Question

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?

Answer 1

The examples you linked work out of the box for me. Let's see how they operate.

Web progress bar

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)
    + "/)"
)

1. Fetches the tasks (checkboxes) from a page called "Test" and stores the result as Tasks.
2. Copies the completed tasks into another variable, CompletedTasks.
3. Constructs a URL in the shape of https://progress-bar.dev/80/, calculating the percentage as (Tasks / CompletedTasks) * 100 and rounding off the decimals with parseInt().
4. Embeds the picture in normal Markdown:

HTML progress bar

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 + "%"

1. Calculates the percentage as 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).
2. Stores the percentage as value.
3. Creates an HTML progress bar by concatenating strings together, which spits out: <progress value='80' max='100'></progress> 80%

Using this code yourself

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!