Dataviewjs Scatter Chart from Frontmatter: Years published of Books read over time

[ReaderGuy42]

I’d like to emulate Goodread’s scatter chart:

I have a chart that gives me e.g. pages read for each month but that’s additive, but here I’d like it just to put out the years, not add them together. Is this possible somehow?

Ideally this would also let me click the dots or give me info about them, but I feel like that’s dreaming.

I can’t use the chart.js plugin because I need this to be done dynamically, getting the info from the frontmatter, which includes these relevant variables:

---
Year: 2019
DateRead: 2023-01-15
---

I’ll add the chart below that I got from a super kind redditor. This one adds together the pages of books for each month. The pages are defined by the variable Length (which is a terrible name given the fact that there’s also a length, but I couldn’t think of anything else that would cover both pages for books, and hours for audiobooks).

Thanks!

``` dataviewjs
	var labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
	var colors = [['#ff6384'],['#36a2eb'],['#ffce56'],['#4bc0c0'],['#9966ff'],['#ff9f40']]
	var datasets = [];

	for(
		let results of dv.pages('"Book Log"')
			.where(p => p.DateFinished && p.Length)
			.sort(p => p.DateFinished, 'asc')
			.groupBy(p => (dv.date(p.DateFinished).toFormat("MMMM yyyy")))
			.sort(ym => ym.rows.DateFinished.first(), 'asc')
			.groupBy(ym => (dv.date(ym.rows.DateFinished.first()).year))
			.sort(y => y.key, 'asc') 
		) {
			let lbl = "Pages read in " + results.key;
			let backCol = colors[datasets.length%colors.length];
			let bordCol = colors[datasets.length%colors.length];
			let bWidth = 1;

			let innerArray = [0,0,0,0,0,0,0,0,0,0,0,0];
			results.rows.forEach(m => {
				let numBooks = dv.array(m.rows).Length.array().reduce((s, r) => s + r, 0);
				//OR .Length.array().reduce((s,r) => s + r, 0);
				innerArray[m.rows.DateFinished.first().month-1] = numBooks;
			})

			let da = {label: lbl, data: innerArray, backgroundColor: backCol,
					  borderColor: bordCol, borderWidth: bWidth};
					
			datasets.push(da)
		}

	const chartData = {
		type: 'line',
		data: {labels: labels, datasets: datasets},
		options: {scales: {yAxis: {suggestedMin: 0, ticks: {stepSize: 1}}}
	}}
	window.renderChart(chartData, this.container);

the Output looks like this:

That’s what I’ve got so far. Any ideas how I can turn that into a scatter chart for the years published?

I’ve also found this plugin: GitHub - caronchen/obsidian-chartsview-plugin: Data visualization solution in Obsidian, support plots and graphs.
but I can’t figure out how to use it.

Any help appreciated!

[holroy]

What’s missing from that chart? Or is just that lines are showing, and you don’t the lines?

[ReaderGuy42]

The problem with the present chart is that it shows the pages read per month, not the publication years of the books I’ve read. I’m trying to create a scatter plot/chart that shows the years the books are from that I read over time, as in the first example in my post.

Thanks