In BlogPost, Javascript

Using JavaScript for Version Controlled Goals With vis.js

JavaScript goal timeline with vis.js

I’ve tried different ways of writing down goals over the years.

Here’s a list of the things I’ve tried:

  • A good old-fashioned handwritten list (which I quickly ditched in favor of more computer based solutions)
  • A list in Evernote
  • An Excel sheet

In all these methods, I’ve always been missing a visual way to look at how I’m doing on my goals over time.

A Goal Timeline

I read an interesting article on medium by someone who apparently started 6 companies about How To 3x Your Productivity in 10 Minutes a Week.

There’s a lot of the standard stuff about setting goals in specific areas of your life (family, career, etc.) but the most interesting thing was he used a timeline to showcase all of his goals with their respective end dates.

Here’s the image from the article I’m referencing (items are blocked out for the original author’s privacy)

Enter vis.js and its timeline feature

Being a programmer, I wanted to be able to version control my goals. I figured there must be some JavaScript library that could help me do this. After hitting Google for a few minutes, I eventually stumbled across vis.js and its timeline library.

Step 1 – Construct a basic HTML template

I’m going to give you the skeleton code I used at the end of this post, so don’t worry if you’re not getting this all at once. First, setup a standard basic HTML template.

Step 2 – Link to the css and js libraries via a CDN

Next, I just linked to 2 files – one was the CSS and the other was the JavaScript library provided by vis.js.

Step 3 – Add the code you need by looking at the documentation

The timeline documentation is pretty good in my opinion. So it’s pretty easy to get started with a basic timeline.

Skeleton code sample

Below is the source code I used (it’s one giant HTML page) sanitized for privacy reasons. But you can see the different CSS styles I used to color the timeline bars differently.

Recent Posts