I've always been a big fan of setting goals. Now with my personal goals dashboard, I can see at a glance my progress towards them.

Because what gets measured gets changed, I keep track of my progress on many of my goals. Before I coded my goals dashboard, I kept track of earnings in spreadsheets. To track my daily habits, I had the ring method. Every morning I put on five golden rings on my left hand. When I do one of my healthy habits, I transfer one of the rings to my right hand.

When I saw the challenge to code a dashboard with the Javascript library chart.js, I knew I had to visualize the data for my goals. I chose my side income, GitHub contributions, and daily habits to visualize with chart.js, because that offers a good snapshot of my life: money, work, and health.

I hard-coded the data in two of the three charts and pull data from a Google Spreadsheet for the first chart. Using chart.js I display and label the data.

One aim of this project is to make it easy for people who don't code to create their own personal dashboards. To make it easier for people to use chart.js without coding, I added Google Spreadsheet as an interface to enter data and used Tabletop.js to pull the data. Even though I haven't modularized the code yet, my eventual goal with this three-pronged system is to allow non-coders to create and update charts.

Read more on my blog: http://bettinashzu.com/visualizing-data-goals-with-chart-js/

Built With

Share this project: