Creating a Pie Chart from a piece of frontmatter

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.

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:

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

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:

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);

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.’

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`
      } 
    } 
  } 
};

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:

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.

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

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

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.

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.