Show a graph in dataviewjs built from data in tags

[stefwill]

Hi all,
Within my daily notes I have a tag called “Spending” where I track all my purchases for the day.
It looks like this:

#Spending
- [Time:: 10:13]
- [Purchase:: "New shoes"]
- [Cost:: 30 ]
- [Time:: 11:17]
- [Purchase:: "Stuff"]
- [Cost:: 75]

This dataview query works fine to give me the total spent each day:

TABLE sum(rows.bullet.Cost) as Total
FROM #Spending 
WHERE Cost
FLATTEN file.lists as bullet
WHERE bullet.Cost
GROUP BY file.name

I eventually want this to live in a weekly/monthly/yearly note so I can see my spending over time.

So onto the crux of the problem. I have no idea what I’m doing when it comes to dataviewjs…

Things I have tried

This is my current dvjs query that I have cobbled together with help from others, but I don’t really understand what it’s doing or why it’s not working.

let DQL = await dv.tryQuery('
TABLE sum(rows.bullet.Cost) as Total
FROM #Spending 
WHERE Cost
FLATTEN file.lists as bullet
WHERE bullet.Cost
GROUP BY file.name
');

let labels = DQL.values.map(l => l[0])
let dataPoints = DQL.values.map(l => l[1])

const chartData = {
    type: 'line',
    data: {	
    	labels: labels,
    	datasets: [{
    		label: "Your Series Name", 
    		 data: dataPoints, 
    		 backgroundColor: ['#ff6384'],
    		 borderColor: ['#ff6384'], 
    		 borderWidth: 1 }]
    	},
    	options: { 
    	  scales: {
    	    xAxis: {type:'Time', 
                 time: {unit: 'day'}
          }}}}}
window.renderChart(chartData, this.container);

What I’m trying to do

Show total spent every week/month/year on a graph with Time on the X and Total spent on the Y.

I’m happy to tackle this another way if I’m going about this all wrong.