Coding fun: Pie Chart with Google Charts, via some trickery

82 views
Skip to first unread message

Charlie Veniot

unread,
Nov 3, 2021, 10:42:42 PM11/3/21
to TiddlyWiki
Download the attached json, and drag into some TiddlyWiki (TiddlyWiki.com!) to import three tiddlers:
  • Pie Chart HTML
    • Code sample from Google, with some modifications
      • Some javascript added to handle regenerating a chart when the container is resized
      • Some placeholders (?), for later search-replace by custom chart title and custom data
  • The Pie Chart Data
    • The Google Pie Chart code needs a table of data to display; this tiddler is to build that table of data that will replace the relevant placeholder in the HTML
  • Sample Pie Chart Viewer
    • This is the tiddler with all the trickery
    • an iframe to display HTML+CSS+javascript dynamically created and via the iframe "srcdoc" attribute
    • the html fed to the iframe is a neat little filter that grabs the content of "Pie Chart HTML" and replaces the "Title" and "Data" placeholders with
      • I got lazy: just the hard-coded title slapped right there in the filter
      • The contents of a variable that wikifies the content of "The Pie Chart Data" tiddler"
      • Notice that the iframe has a very faint grab handle on the bottom right-hand corner.  Resizing the iframe causes the chart to be resized too.  Likely not a big deal for folk who really know their stuff, but I'm patting myself on the back for that one.
      • Hover over the chart itself to see details for each pie.
Using Google Charts in TiddlyWiki is very convenient, and really easy (I'm thinking or putting an interface together for what I've done so far, to make it even easier.

And it sure helps keep a TiddlyWiki instance really light by using an external charting service.

Not so great when off-line.  But when I'm offline, I don't have much use for any computer anyway ...

Cheers !



Screenshot 2021-11-03 11.18.54 PM - Display 1.png
PieChartWithGoogleCharts.json

Charlie Veniot

unread,
Nov 4, 2021, 2:11:41 PM11/4/21
to TiddlyWiki
The screenshot in my first post gave a chart of tiddler types in tiddlywiki.com.

There are so many test/vnd.tiddlywiki tiddlers in tiddlywiki.com, that it makes most of the pie slices ridiculously small.

Here's the same tiddlers, but in a smaller TiddlyWiki just to make for reasonable pie slice sizes.

Screenshot 2021-11-04 3.07.39 PM.png

Hubert

unread,
Nov 5, 2021, 7:28:10 AM11/5/21
to TiddlyWiki
This is great! It could replace my own custom SVG charting solution that is way too heavy. Thank you Charlie.
Reply all
Reply to author
Forward
0 new messages