How to use this with dataview

[datavistics]

Is it possible to use this with dataview? Id like to make a query and use that table as an input.

[phibr0]

Hmm, I don't really know Dataview so I am not sure if its possible..

[wenlzhang]

Dataview is such a powerful plugin for Obsidian, and I would be really great if this plugin can be somewhat integrated with Dataview. blacksmithgu/obsidian-dataview: A complex query language implementation for the Obsidian note-taking tool.

A brief introduction regarding how this plugin could be integrated with Dataview:

1. One defines Dataview fields in any note, e.g. Rating:: 5 in Note A and Rating:: 1 in Note B.
2. One plots with the data from the field Rating by using this plugin.

[phibr0]

I will look into it. I could probably do it with ease for dataviewjs if thats fine

[selfire1]

I would love for this to be possible as well! Do you have a rough estimate where the feature is at? It would be so powerful!

[phibr0]

Take a look at this: https://discord.com/channels/686053708261228577/840286238928797736/890609645201264710

test:: First Test
mark:: 6

\```dataviewjs
const data = dv.current()
const chartSettings = app.plugins.plugins["obsidian-charts"].settings
const chartData = `
type: bar
labels: [${data.test}]
series:
    - title: Marks
      data: [${data.mark}]
`
const chart = app.plugins.plugins["obsidian-charts"].postprocessor(chartData, this.container, chartSettings)
\```

[wenlzhang]

As a user who is not good at programming, is it possible to provide an example code snippet regarding how to combine this with Dataview?

[phibr0]

Take a look at the following please, you will need to use dataviewjs though.

https://github.com/phibr0/obsidian-charts/blob/master/README.md#api-dataview-etc

[wenlzhang]

Thanks for the example.

I can make it work for loading Dataview data on the current page, as const data = dv.current() is used at the beginning of the code block. I tried to load Dataview data from other pages/notes by replacing it with something like let data = dv.pages(). However, this gives an empty chart. Are there any other parts in the code that I need to change to make it work for more pages?

I added the following in two separate notes. Note A:

test:: First Test
mark:: 6

Note B:

test:: Second Test
mark:: 8

[phibr0]

dv.pages() will give you multiple results, not just the single one of this page. Take a look at Dataviews Documentation: https://blacksmithgu.github.io/obsidian-dataview/api/code-reference/

[wenlzhang]

Maybe I did not make myself clear. What I was trying to do is to show "First Test" and its score as the first column and "Second Test" and its score as the second column in the same chart. Is it possible to achieve this?

[gmkado]

@wenlzhang I wanted to do something similar. Not too familiar with javascript but was able to get something working with this:

const pages = dv.pages();
const labels = pages.map(b=>b["test"]);
const data = pages.map(b=>b["mark"]);

const chartData = {
    type: 'line',
    data: {
        labels: labels.values,
        datasets: [{
            label: 'Grades',
            data: data.values,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
        }]
    }
}
window.renderChart(chartData, this.container);

Basically need to map the return value of dv.pages into the data you want to show.

[wenlzhang]

@gmkado Thanks for the example! Will try this later.