Obsidian Charts - Intermittent Fasting Window and Weight

intermittent-fasting-chart.js

// In Obsidian, this code should be wrapped in ```dataviewjs
// It requires the dataview plugin and Obsidian Charts plugin

// Get all daily notes by the #daily tag
var pages = dv.pages('#daily');

// Filter to only daily notes in this month
pages = pages.filter(p => p.file.name.includes('2023-06'));

/* 
* Set data from metadata and properties on the daily notes
* This assumes each daily note has these properties:
* - weight
* - startEating
* - endEating
*
* For startEating and endEating, it expects number values. Examples:
* - for 11AM, you would enter 11
* - for 1PM, you would enter 13
* - for 3:15PM, you would enter 15.25
* - for 3:45PM, you would enter 15.75
*/
var titles = [], weights = [], eatingWindows = [];
pages.sort().forEach(p => {
	titles.push(p.file.name);
	weights.push(p.weight || 0);
	eatingWindows.push([p.startEating, p.endEating]);
});

const chartData = {  
    data: {
    
	    // The title of each daily note is a value on the X-axis
        labels: titles,
        
        // datasets puts different values on the Y-axis
        datasets: [
        // Weight as a bar chart
        {
	        yAxisID: 'A',
	        type: 'bar',
            label: 'Weight (lbs)',
            data: weights,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1,
            fill: true,
            time: 'day'
        },
        // My daily eating window as a bar range 
        {
	        yAxisID: 'B',
	        type: 'bar',
	        label: 'Eating Window',
	        data: eatingWindows,
	        backgroundColor: [
                'rgba(153, 102, 255, 0.2)'
            ],
            borderColor: [
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 1,
        },
        // This draws a horizontal line as the lower bound for my target window
        {
	        yAxisID: 'B',
	        type: 'line',
	        data: eatingWindows.map(w => 12), // this determines where the line is drawn, my target eating window starts at noon
	        pointRadius: 0,
            borderColor: [
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 0.5,
			borderDash: [4,40]
        },
        // This draws a horizontal line as the upper bound for my target window
        {
	        yAxisID: 'B',
	        type: 'line',
	        data: eatingWindows.map(w => 20), // this determines where the line is drawn, my target eating window ends at 8PM
	        pointRadius: 0,
	        borderColor: [
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 0.5,
            borderDash: [4,40]
        }]
    },
    options: {
	    scales: {
		    // I only want to see weights between 190 and 210, because I float around 200lbs.
		    A: {
			    min: 190,
			    max: 210
		    },
		    // This sets the times that I want to see on the y-axis. I only want to see 8AM to 10PM, I almost never eat outside of that window.
		    B: {
			    position: 'right',
			    max: 22,
			    min: 8,
			    ticks: {
				    count: 15
			    }
		    },
		    x: {
			    type: 'time',
			    time: {
				    unit: 'day'
			    },
			    ticks: {
				    maxRotation: 90,
				    minRotation: 90
			    }
		    }
	    }
    }
}

window.renderChart(chartData, this.container);