Example how to use Chart.js

Hello, here is an example code on how to use Chart.js, you need to copy the code itself and change container id to “chart” Step-by-step guide | Chart.js

(async function() {
  const data = [
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 25 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
  ];

  new Chart(
    document.getElementById('chart'),
    {
      type: 'bar',
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }
  );
})();
6 Likes

Sorry, not clear for me.
Also the URL to chartjs.org doesn’t work (I get an error 404 in the browser).

What I tried to to:
In a Page I made a new “/Embed”, choosing “Chart”.
In the now appearing field “Enter embed code for Chart” I pasted the full code from inside your codebox.
(Not just the visible part from the code box, but the full code’s lenght.)

But this doesn’t work.

What do you mean with “you need to change container id”?

Edit: Now it works. The chart appears after clicking into the empty area for it.
Seems the new Embeds stuck sometimes.

Edit 2: The URL also works after removing the colon from it’s right end.

just copy a code I provided, it should work:

Chart is closed by default because it literally renders JS code, so it’s not safe to run it as is.

1 Like

First I want to thank you for the progress of the application.

Now, unfortunately even this part of including statistical charts with Chart.js has not been completely satisfactory.

Although I included the example given in this post, the example is not satisfactory.

It is misconfigured and does not present the data as it should.

And if I want it as a pie chart it comes out like this

image

1 Like

Give me example code pls in a bug report

1 Like

How can I read the numerical value of a relation in several objects with a date as the title for the data series?

The Object type is “Diary”.
The objects have the name {year}-{month}-{day} (e.g. 2024-01-13).
The relation (# number) to the visualisation in chart.js is called „powerconsumption".

Can I filter the readout so that I only read out the objects with “2023-*”?

1 Like

There is no such functionality yet, I can’t promise it will be considered for development.

Many thanks for the feedback.

So chart.js does not work for now in Anytype?

I tried to use the doughnut chart example from chartjs.org.
https://www.chartjs.org/docs/latest/charts/doughnut.html#doughnut

As soon as I paste the code in the field (where it says “Enter embed code for Chart”), I get nothing displayed, just an empty space!

I do not know how to translate their code examples into JS code yet, but here is a link to show the actual js code that generates charts: Step-by-step guide | Chart.js

1 Like

2 Likes