Building an SVG graph from fields

I have written a plugin that changes an SVG button icon and an SVG bar graph.

I would suggest if possible having most of the SVG code as image tiddler and then altering only the fields you need to change. A tiddlywiki SVG image file gets parsed and so any macro substitutions are made during parsing which is how field values end up in the SVG code.

I am on my way out right now - the best I can do in the time available is point you towards the plugin, it’s only a few files. Look for the plugin json file I added there 10th Apr - look for it in the following thread

The rate tiddlers plugin shows a rectangular button in each tiddler toolbar with a rating value [1 100] and changes colour as the rating is changed. To see it in effect load the plugin into an empty tiddlywiki - create a new tiddler and observe the grey (inactive) rectangular button on the tiddler toolbar - click on it to activate, it should show a rating of 50 which you can change with the up down arrows. Ignore the Green bell in the following picture, its the coloured rectangular buttons with 50 and 100 rating that we are interested in.

If you find the tiddler in the plugin for the button and look at the SVG code you will see how the rating value from the tiddler field “rating3” is inserted into the SVG.

If you want a more direct “How to” then I can return to this later - if you want to plunge in then this plugin might make a good sandbox for testing your needs out.

The plugin also manages an SVG bar graph ( second sidebar tab for the rating plugin ) which might be most relevant for you - you would need a few tiddlers with ratings to see this work properly but that should take only a few clicks -the bar graph changes dynamically as you change the ratings on different tiddlers.

The syntax for getting the field value injection into the SVG in a way that could be parsed by tiddlywiki was a bit fiddly so starting from this might save you time.

BTW - the Journal icon in a standard Tiddlywiki which shows the correct day of the month as an integer uses this principle.