#13

So I played around with this a little more and came up with the following:

image

  • The height of the bar is a little bit bigger which is good for higher resolution screens, old eyes, or a combination of both.
  • I have gotten rid of the individual month boxes so they run together.
  • The timeline color is now a pure gradient from black to white and back to black

Here is the code for anyone wanting to tweak for their own use:

<svg viewBox="0 0 3760 150">
	<title>Timeline 2022</title>
	  <defs>
      	<linearGradient id="Gradient3" x1="0" x2="1" y1="0" y2="0">
        	<stop offset="0%" stop-color="black"/>
        	<stop offset="50%" stop-color="white"/>
        	<stop offset="100%" stop-color="black"/>
      </linearGradient>
	</defs>
	<g class="bars">
		<rect fill="url(#Gradient3)" x="0" y="20" width="3760" height="45"></rect>
	</g>
	<g class="labels" style="font-size:50px;" text-anchor="middle">
		<text fill="#AAAAAA" x="0" y="120" text-anchor="start">January</text>
		<text fill="#AAAAAA" x="320" y="120" text-anchor="start">February</text>
		<text fill="#AAAAAA" x="610" y="120" text-anchor="start">March</text>
		<text fill="#AAAAAA" x="930" y="120" text-anchor="start">April</text>
		<text fill="#AAAAAA" x="1240" y="120" text-anchor="start">May</text>
		<text fill="#AAAAAA" x="1560" y="120" text-anchor="start">June</text>
		<text fill="#AAAAAA" x="1870" y="120" text-anchor="start">July</text>
		<text fill="#AAAAAA" x="2190" y="120" text-anchor="start">August</text>
		<text fill="#AAAAAA" x="2510" y="120" text-anchor="start">September</text>
		<text fill="#AAAAAA" x="2820" y="120" text-anchor="start">October</text>
		<text fill="#AAAAAA" x="3140" y="120" text-anchor="start">November</text>
		<text fill="#AAAAAA" x="3450" y="120" text-anchor="start">December</text>
	</g>
	<g>
		<circle cx="{{date:DDD}}0" cy="44" r="30" stroke="black" stroke-width="7" fill="white" />
	</g>
</svg>
2 Likes
#14

Very nice! I love it! i’ll probably fiddle with the colors a bit more, but I’m partial to your original multicolored option. Thanks for sharing this!

#15

Cool visual addition to my daily note :+1:

#16

I love the gradient!

For some reason, it displays great perfectly in Live Preview mode, but the gradient does not render in Reading mode on my computer…

#17

That’s interesting. I don’t use Live Preview, but the gradient bar displays without issue for me in reading mode.

How is the bar showing up in reading mode for you?

#18

Live Preview

live preview
live preview809×85 6.53 KB

Preview

preview
preview817×65 3.95 KB

#19

I posted a bug report

SVG gradient rendered differently in Live Preview vs Preview - Bug reports - Obsidian Forum

#20

Ah, I use the legacy editor where the gradient bar shows for me in reading mode. Sorry for misunderstanding. This definitely seems like a bug.

I was able to replicate this in the Obsidian Help vault, so something to do with Live Preview editor.

#21

Can you share your full code for this? I can’t tell if I need to replace that with both year and date or just one or the other?

#22

When using the Daily note plugin’s template, the line responsible for drawing the current day marker circle on the timeline is this one:

<circle cx="{{date:DDD}}0" cy="44" r="30" stroke="black" stroke-width="7" fill="white" />

When using the Templater plugin, you would change that line to:

<circle cx="<% tp.date.now("DDD") %>0" cy="44" r="30" stroke="black" stroke-width="7" fill="white" />

Both “DDD” and the “DDDD” format suggested by @cabin.mooring would work (tested). But “DDDD” would create a leading 0 for the cx value, which isn’t necessary.

#23

All instances

<title>Timeline <%tp.date.now("YYYY")%></title>
and

<circle cx="<%tp.date.now("DDDD")%>0" cy="14" r="15" stroke="black" fill="white" />

#24

This looks fantastic!
Do you have any idea how you could display tasks due dates in this form?
I love Obsidian but am not a big coder myself :confused:

#25

I’m wondering how I could put a date manually like 2022-02-15 into the timeline. I tried several things, but nothing works.

#26

If you are looking for a result similar to this

image

You can start off with the following code:

<svg viewBox="0 0 3760 150">
  <title>Timeline 2022</title>
  <defs>
    <linearGradient id="Gradient13" x1="0" x2="1" y1="0" y2="0">
      <stop offset="0%" stop-color="black"/>
      <stop offset="50%" stop-color="white"/>
      <stop offset="100%" stop-color="black"/>
    </linearGradient>
  </defs>
  <g class="bars">
    <rect fill="url(#Gradient13)" x="0" y="20" width="3760" height="45"></rect>
  </g>
  <g class="labels" style="font-size:75px;" text-anchor="middle">
    <text fill="#AAAAAA" x="{{date:DDD}}0" y="150" text-anchor="middle">{{date:YYYY-MM-DD}}</text>
  </g>
  <g>
    <circle cx="{{date:DDD}}0" cy="44" r="30" stroke="black" stroke-width="7" fill="white" />
  </g>
</svg>

This will need some work to show the dates at the beginning/end of the year as the original code was not set up to handle displaying the date in this way, but hopefully it will give you an idea of what you can do. I might be able to tweak things later this week if you need help.

You could also do something where the day of the month replaces the circle easily enough by making some tweaks to the above code. Something like this:

image

Although at the size of the current SVG, the value is hard to read

1 Like
#27

Thank you, this looks impressive, but I’m afraid, I wasn’t understood here. What I actually meant was to replace

"{{date:DDD}}0"

by a date manually - or even better with the current system date. I don’t use Daily Notes, but wanted to use the timeline in my Index note.

#28

{{date:DDD}} returns a number that represents the day of the year. Today, 15 Feb, is the 46th day of the year. You then place a 0 after that, so today’s date would be placed at an X position of 460.

Hopefully that makes sense.

1 Like
#29

Yes, it makes sense to me now. Thank you.

#30

This works for me nicely, thank you!

Do you guys have any idea on how to make the code “shorter” or permanently toggled, or better defined elsewhere?

I’m asking because: when I open daily note in reading mode(where timeline is shown at the top), look through the daily, realize I need to add/edit something. I change to Edit mode, the note is displayed from the top and have to scroll almost the whole page to the bottom and find the section I wanted to edit. That, for me is friction in the process.

Any suggestions? Thanks!

#31

With the CSS snippets system, it should be possible to move most of the logic to CSS and then in the template have only something like this:

<i data-timeline="{{date:DDD}}0"></i>

You’d only have 3 elements to work with, the container tag + 2 pseudo-elements generated with CSS. This means you wouldn’t be able to define months as separate elements.
But you can draw the timeline using CSS gradient or use a data URL of a pre-drawn image in CSS.

Alternatively an Obsidian Community Plugin could be created.

I can’t use community plugins at work because of security reasons, but if there’s interest I can make the CSS snippet version of this, which would have the reduced HTML code.

#32

Use Live Preview?