To create a table like this, you need to install the Dataview plugin and enable YAML in the note

What a simple table that pulls information from YAML looks like:

Code to insert:

```dataviewjs
const pages = dv.pages('"2. Areas/Занятие спортом/Динамика веса"')
  .where(p => p.Вес && p.date)
  .sort(p => p.date);

const labels = pages.map(p => new Date(p.date).toLocaleDateString()).array();
const values = pages.map(p => p.Вес).array();
const goal = 80;
const goals = labels.map(() => goal); // The target line

const chartData = {
  type: 'line',
  data: {
    labels: labels,
    datasets: [
      {
        label: "Weight (kg)",
        data: values,
        borderColor: "blue",
        fill: false,
        tension: 0.3
      },
      {
        label: "Goal (80 kg)",
        data: goals,
        borderColor: "green",
        borderDash: [5, 5],
        pointRadius: 0,
        fill: false
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: "📈 Weight growth towards the goal"
      },
      legend: {
        position: "bottom"
      }
    },
    scales: {
      y: {
        title: {
          display: true,
          text: "Weight (kg)"
        },
        suggestedMin: 65,
        suggestedMax: 85
      },
      x: {
        title: {
          display: true,
          text: "Date"
        }
      }
    }
  }
};

window.renderChart(chartData, this.container);```

→ const pages = dv.pages(‘“2. Areas/Занятие спортом/Динамика веса”’) — replace with your own path where your notes with YAML are stored → Move the last three apostrophe characters to a new line

---

🧠 An explanation for those who want to understand this code more deeply:

🔹 What the code does:

• Finds all the notes from the right folder;

• Filters only those that have Вес (Weight) and date;

• Sorts by date — so the points are in order.

📌 💡 Replace the path with your own if your folder is different.

---

const labels = pages.map(p => new Date(p.date).toLocaleDateString()).array();
const values = pages.map(p => p.Вес).array();

🔹 What it does:

• labels — these are the dates we build the chart along.

• values — the weight values themselves.

---

const goal = 80;
const goals = labels.map(() => goal); // The target line

🔹 What it does:

• We set a goal — for example, 80 kg.

• We create a second line on the chart — it will be straight, so you can see how close you are to the goal.

---

🧱 Configuring the chart itself

const chartData = {
  type: 'line',
  data: {
    labels: labels,
    datasets: [
      {
        label: "Weight (kg)",
        data: values,
        borderColor: "blue",
        fill: false,
        tension: 0.3
      },
      {
        label: "Goal (80 kg)",
        data: goals,
        borderColor: "green",
        borderDash: [5, 5],
        pointRadius: 0,
        fill: false
      }
    ]
  },

🔹 What it does:

• Builds two lines:

  • the blue line — your real progress;

  • the green dashed one — the target weight.

• tension: 0.3 — smooths the lines (looks aesthetic).

• borderDash — a dashed line for the goal, to visually distinguish it.

---

⚙️ Configuring the appearance

  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: "📈 Weight growth towards the goal"
      },
      legend: {
        position: "bottom"
      }
    },
    scales: {
      y: {
        title: {
          display: true,
          text: "Weight (kg)"
        },
        suggestedMin: 65,
        suggestedMax: 85
      },
      x: {
        title: {
          display: true,
          text: "Date"
        }
      }
    }
  }
};

🔹 What it does:

• Adds a title.

• Places the legend at the bottom.

• Limits the Y axis (from 65 to 85 kg) — so the chart isn’t too “flat”.

• Labels the axes.

---

window.renderChart(chartData, this.container);

🔹 This is the command that inserts the finished chart right into the Obsidian note.