obsidian-charts icon indicating copy to clipboard operation
obsidian-charts copied to clipboard

[Bug]: stacked lines don't work when rendering with dataviewjs

Open htmljenn opened this issue 1 year ago • 0 comments

Describe the bug

When I render the data using chart and manually entering the values, it displays the stacked line chart correctly: grab192

However when I import the data using dataviewjs, it does not: grab193

Relevant errors (if available)

No response

Steps to reproduce

I created a bar chart first using dataviewjs - that worked and showed the data I wanted.

I then converted the type to line and added the modifiers.

Expected Behavior

I was hoping to get the same display of a stacked line chart from the javascript version so I don't have to manually update the file every week.

Additional context

No response

Code

Code I use to manually update the data:

chart
type: line
legend: true
fill: true
stacked: true
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
beginAtZero: true
width: 100%
series:
  - title: "Day Rating"
    data: [4,5,5,5,4, ]
  - title: "Mood"
    data: [4,5,5,5,5, ]
  - title: "Productivity"
    data: [4,5,4,5,3, ]
  - title: "Creativity"
	data: [3,5,5,5,5, ]
  - title: "Calmness"
	data: [5,5,4,5,5, ]

And the Javascript code:

dataviewjs
const rawData = await dv.query('TABLE file.name, day-rating, overall-mood, Productivity, Creativity, Stress from #eod where contains(thisWeek, "2023-W01") where day-rating')
const rows = rawData.value.values;

const chartData = {
    type: 'line',
    data: {
        legend: 'true',
        fill: 'true',
        stacked: 'true',
        beginAtZero: 'true',
        width: '100%',
        labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
        datasets: [
	        {label: "Day Rating", data: rows.map(x => x[2]), backgroundColor: ['#dde8d7'] },
            {label: "Mood", data: rows.map(x => x[3]), backgroundColor: ['#f8cdbf'] },
            {label: "Productivity", data: rows.map(x => x[4]), backgroundColor: ['#f4e1b1'] },
            {label: "Creativity", data: rows.map(x => x[5]), backgroundColor: ['#dfe1b0'] },
            {label: "Calmness", data: rows.map(x => x[6]), backgroundColor: ['#f8d8b6'] },
        ],
    },
}

window.renderChart(chartData, this.container)


### Operating system

macOS

htmljenn avatar Jan 07 '23 21:01 htmljenn