Creating a Pie Chart from a piece of frontmatter

Help
1

Not sure why I can’t find the answer to this by searching in and out of this forum as it seems like something people would do, but I could be wrong.

What I’m trying to do

I have a field in my frontmatter that is listed as “Overall-Mood” in my daily notes. What I wanted to do is to create a pie chart that shows the different moods I am and have been in to see what moods I am in on average.

Things I have tried

I searched in this forum as well as trusty google.com for, “create pie chart” in Obsidian, “how to use frontmatter in a pie chart in Obsidian”… and variations of the such. I enabled the Charts plugin but I did not see much in terms of a pie chart.

I only want to use the one piece of frontmatter and see it displayed in a pie chart. It seems so simple to me, I just cannot figure out how to display it.

Can anyone assist me with this? Many thanks in advance, and thanks for taking the time to read my post.

2

Look at this … Pie and Donut Chart - Charts Plugin … to get an idea and play a bit. Then come back if you have a problems :smiling_face:

Cheers, Marko :nerd_face:

3

So, yeah, I do not get how you make a chart from the frontmatter as I wanted. I must be missing what you are seeing. I think I am more confused than before I played with the settings mentioned there LOL

1 Like
4

Can you provide an example of values/data that you have or want to have in frontmatter? And then we can try to figure it out :smiling_face:

Cheers, Marko :nerd_face:

5

Does this work?

```dataviewjs
// Variable to define which property to aggregate (e.g., "source", "category", etc.)
const propertyName = 'Overall-Mood'; // Change this to the desired property

// Collect pages that have the specified property
const pages = dv.pages().where(p => p[propertyName]);

// Aggregate counts for each unique value of the chosen property
let valueCounts = {};
for (let page of pages) {
  let value = page[propertyName];
  if (!valueCounts[value]) {
    valueCounts[value] = 0;
  }
  valueCounts[value]++;
}

// Prepare arrays for labels and data
const labels = Object.keys(valueCounts);
const data = labels.map(label => valueCounts[label]);

// Choose the chart type: 'pie' or 'doughnut'
const chartType = 'doughnut'; // Change to 'pie' for a pie chart

// Build the Chart.js configuration payload
const chartData = {
  type: chartType,
  data: {
    labels: labels,
    datasets: [{
      label: `${propertyName} Occurrences`,
      data: data,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      },
      title: {
        display: true,
        text: `${propertyName.charAt(0).toUpperCase() + propertyName.slice(1)} Occurrences`
      }
    }
  }
};

// Render the chart directly in the Dataview container
window.renderChart(chartData, this.container);
6

Okay so in my Daily Notes I have a frontmatter entry for “Overall-Mood” in which I input the day’s overall mood. What I was hoping to accomplish is to create a pie chart that shows the percentage of every mood I have in my Daily Notes showing me what percentage of the time I am happy, what percentage I am sad, etc.’

7

Unless I inputted something incorrectly, it literally shows nothing. No error, no chart, no output. Once I click outside of the dataview code it shows… nothing, like there is nothing typed there LOL. Here is the code:

const propertyName = 'Overall-Mood';
const pages = dv.pages().where(p => p[propertyName]);
let valueCounts = {}; 
for (let page of pages) { 
  let value = page[propertyName]; 
  if (!valueCounts[value]) { 
    valueCounts[value] = 0; 
  } valueCounts[value]++; 
  }
const labels = Object.keys(valueCounts); 
const data = labels.map(label => valueCounts[label]);

const chartType = 'pie';

const chartData = { 
  type: chartType, 
  data: { 
    labels: labels, 
    datasets: [{ 
      label: `${propertyName} Occurrences`, 
      data: data, 
      backgroundColor: [ 
        'rgba(255, 99, 132, 0.2)', 
        'rgba(54, 162, 235, 0.2)', 
        'rgba(255, 206, 86, 0.2)', 
        'rgba(75, 192, 192, 0.2)', 
        'rgba(153, 102, 255, 0.2)', 
        'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
        'rgba(255, 99, 132, 1)', 
        'rgba(54, 162, 235, 1)', 
        'rgba(255, 206, 86, 1)', 
        'rgba(75, 192, 192, 1)', 
        'rgba(153, 102, 255, 1)', 
        'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
    }] 
}, 
options: { 
  responsive: true, 
  plugins: { 
    legend: { 
      position: 'top'
    }, 
    title: { 
      display: true, 
      text: `${propertyName.charAt(0).toUpperCase() + propertyName.slice(1)} Occurrences`
      } 
    } 
  } 
};
8

Dont forget to close the code block with ```
And it open as a dataviewjs codeblock

Make sure you have this Charts plugin and Dataview plugin installed.

Double-check your frontmatter property is truly called Overall-Mood

You seem to not be rendering at the end lol probably why you ain’t seeing anything

window.renderChart(chartData, this.container);

I retested with your exact property naming convention from my side and it all works correctly.

b.
:saluting_face:

9

Not sure what you mean when you said,

You seem to not be rendering at the end lol probably why you ain’t seeing anything

I copied the example given to me and replaced what I needed changed and then attempted to render but did not get anything.

I can make a video of my steps and end result if you need.

10

In the code you provided back, you didn’t have the

window.renderChart(chartData, this.container);

So my guess was you forgot to copy that and place it at the very end of your script

2 Likes
11

Oh… silly me. When I get home from work I will have to try that and I will let you know if that solved it for me. Many thanks for looking over my code. I appreciate you.

1 Like
12

Of course… you were right! Thank you for catching that. I most likely deleted it as part of the instruction there at the end. It shows up perfectly. I have marked the original answer as Solved. Again… Many thanks for all of your help. I have a lot to learn yet about charts and graphs here in obsidian. Will be studying the code you provided to try and learn something from it. I appreciate you friend.