Basic (very) Bar Chart

#1

Hello Fellow TiddlyWikiers. Good Day to you all.

I created a rudimentary horizontal bar-chart to show off my elementary TiddlyWikiing skills:

title: WhateverPleasesYou
tags: AnythingGoes NoTagsIsFine $:/tags/FoodForThought/WhoNeedsTagsAnyway
rect: <svg width=20 height=20><rect width=20 height=20 fill=RoyalBlue></rect></svg>
text: <table>

<tr>
<th>
Region </th>
<th>
Number Of Stuffed-Dice Rear-View-Mirror Novelty Ornaments Sold 
</th>
</tr>
<tr>
<td>
Asia 
</td>
<td>
{{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} 
{{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} 
{{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} 
{{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} 
{{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} 250 
</td>
</tr>
<tr>
<td>
Pacific Islands 
</td>
<td>
{{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} {{!!rect}} 50 
</td>
</tr>

</table>
Congratulations, team!! Let's aim for even more next year. 
type: text/vnd.tiddlywiki

“rect2” etc. if you need alternate colours, shapes. Spaces aren’t necessary. Remove all but one rectangle if you have a specific length.
Save text as snippet if you like. If you need a bar chart and you’re iin a bind, wont you try this out and see if it works for you?

5 Likes
#2

Very nice. And if you don’t want the gap, you might add a tiny bit of CSS:

td svg+svg {margin-left: -5px;}
1 Like
#3

Excellent work! Thank you for sharing.

TiddlyWiki supports macros and procedures, so you may use a solution like the one below:

\define rect(value:1)
<$list filter="[range[1,$value$]]">
<svg width=20 height=20><rect width=20 height=20 fill=RoyalBlue></rect>
</svg>
</$list>
\end

\procedure barchart(filter, first-col, second-col)
<style>
td svg+svg {margin-left: -5px;}
</style>
<table>
<tr>
<th><$text text=<<first-col>> /></th>
<th><$text text=<<second-col>> /></th>
</tr>
<$list filter=<<filter>> variable=thisRecord>
<tr>
<td><$text text=<<thisRecord>>/></td>
<td><$transclude $variable=rect value={{{[<thisRecord>get[value]]}}}/></td>
</tr>
</$list>
</table>
\end



<<barchart "[tag[Area]]" Region "Number Of Stuffed-Dice Rear-View-Mirror Novelty Ornaments Sold">>

Here the data stored in tiddlers, title for first column and value field for second column.

image
image1493Ă—609 32.8 KB

A working example

  1. download barchart-using-table-and-tiddlers.json (1.0 KB)
  2. Drag and drop into https://tiddlywiki.com
  3. Open Test of BarChart
  4. Create more tiddlers tagged with Area and see the results
3 Likes