Obsidian Charts plugin dataviewjs help

[tigrjas]

What I’m trying to do

I’m trying to set up a line chart that takes data about the amount of weight I’ve lifted from my daily notes, which are stored in a folder structure “Journal/1 Daily”.

I wanted the date of my daily notes to be along the x-axis and the weight to be along the y-axis. I’m trying to place this chart in a note called “Fitness”

In my daily note I have the squat weight listed like this for dataview

• squat:: 135

Things I have tried

This is the code that I’m trying to use. I’m not sure if that is the right way to do it since I’m still fairly new to dataview and javascript.

dv.span("**Squat Log**)

const pages = dv.pages('"Journal/1 Daily"').sort(p => p.file.name)
const dates = pages.map(p => p.file.name)
const squats = pages.map(p => p.squat).values

const chartDate = {
	type: 'line',
	data: {
		labels: dates,
		datasets: [{
			label: 'Squat (lb)',
			data: squats,
			backgroundColor: [
				'rgba(53, 252, 167, 1)'
			],
			borderColor: [
				'rgba(138, 102, 204, 0.8)'
			],
			borderWidth: 1.5,
			spanGaps: true,
		}],
	},
};

window.renderChart(chartData, this.container)

However I’m getting this error

Evaluation Error: SyntaxError: Invalid or unexpected token
    at DataviewInlineApi.eval (plugin:dataview:18638:21)
    at evalInContext (plugin:dataview:18639:7)
    at asyncEvalInContext (plugin:dataview:18649:32)
    at DataviewJSRenderer.render (plugin:dataview:18670:19)
    at DataviewJSRenderer.onload (plugin:dataview:18260:14)
    at e.load (app://obsidian.md/app.js:1:1158302)
    at DataviewApi.executeJs (plugin:dataview:19198:18)
    at DataviewPlugin.dataviewjs (plugin:dataview:20068:18)
    at eval (plugin:dataview:19967:124)
    at t.initDOM (app://obsidian.md/app.js:1:1559390)

[holroy]

@tigrjas

dv.span("**Squat Log**)

For starters are you missing a quote at the end of this line before the right parenthesis. Not sure if there are other mistakes as well.

[tigrjas]

Oh thank you! I fixed that and I fixed the const “chartDate” → “chartData” and now everything is working.

dv.span("**Squat Log**")

const pages = dv.pages('"Journal/1 Daily"').sort(p => p.file.name)
const dates = pages.map(p => p.file.name)
const squats = pages.map(p => p.squat).values

const chartData = {
	type: 'line',
	data: {
		labels: dates,
		datasets: [{
			label: 'Squat (lb)',
			data: squats,
			backgroundColor: [
				'rgba(53, 252, 167, 1)'
			],
			borderColor: [
				'rgba(138, 102, 204, 0.8)'
			],
			borderWidth: 1.5,
			spanGaps: true,
		}],
	},
};

window.renderChart(chartData, this.container)