Simple Progress Pie Chart in TiddlyWiki

#1

Sometimes for showing progress ( like task done, words learned, project steps finished …) in TiddlyWiki you need a simple macro and don’t want to go for heavy sophisticated JS.

Attached is a solution based on Oliviale great solution:

How to use

  1. download attached JSONpiechart.json (33.3 KB)

  2. drag and drop into your wiki (for test use https://tiddlywiki.com/)

  3. open the PieChart Examples. See examples and edit as you like.

To create a new piechar just call the macro as below

<<piechart pct>>

pct is a number from 1 to 100. For example <<piechart 55>> . See below image for piecharts with 25, 55 and 78 percent progress.

image
image697×244 10.4 KB

3 Likes
Donut/Pie charts to show progress
Donut Chart in Tiddlywiki with Animation
Guidelines for "Tips & Tricks" category
Detect save process complete before doing next action (and other tiddlywiki actions issues)
#3

Hi Tones!
The post is a Wiki! So edit and improve it as you like

1 Like
#4

Hi, There are 2 problems I can see with this solution.

  • It adds a 33kByte compressed (unreadable for humans) CSS for something that can be done with about 25 lines of CSS
  • The pie-chart can’t be printed

I did play around some time ago with pie-charts, because I did find a nice gist at github, that I thought would be nice for TW. The whole thing will need a bit of polishing.

Eg: At the moment it only shows percent values. It doesn’t do any maths eg: 23 steps should fill the cycle to 100% …

#5

That is true! @Alvaro gave me a much simpler solution, it has few options but it works! (It is based on conic-gradient() - CSS: Cascading Style Sheets | MDN)

1 Like
#6

The version I did play with uses: stroke-dasharray - SVG: Scalable Vector Graphics | MDN and SVGs to draw the circle.

#7

Just now I commented you about the version surely was done by @pmario . The svg are rasterized better than conic-gradient.
Somebody can add mor options with more lines, but he/she use less lines than the older solution that use a custom css for 100 values (unminified CSS is 600 - 1000 lines depends on version)

#8

Pedantic note, this looks like a donut chart to me, not a pie chart, since it has the middle cut out. I know the author calls it a pie chart, and I’m not sure there’s any Chart Authority to declare what the “official” names are, but I think this is a pretty widely accepted distinction.

Donut charts are easier to read than pie charts IMO, especially if there are a bunch of slices to compare, so sweet – just surprised me to see the picture after the subject line!

1 Like
#9

@sobjornstad the post is a wiki, so edit as you like!