Question for the group.
I've been trying to implement a chart with charts.css and have so far been
unsuccessful. If I copy Anjar's code into a tiddler, I get a good result.
But when I try to implement a chart with values based on fields and filters
with the following code:
\define st() <$text text='"--size:$(final)$;"'/>
\define status1()
<$vars total={{{ [tag[Railroads]count[]] }}}
value={{{ [tag[Railroads]summaryinfo[yes]count[]] }}}>
<$vars final={{{ [<value>divide<total>fixed[2]] }}}>
<<st>>
</$vars>
</$vars>
\end
\define status2()
<$vars total={{{ [tag[Railroads]count[]] }}}
value={{{ [tag[Railroads]psearch[yes]count[]] }}}>
<$vars final={{{ [<value>divide<total>fixed[2]] }}}>
<<st>>
</$vars>
</$vars>
\end
\define status3()
<$vars total={{{ [tag[Railroads]count[]] }}}
value={{{ [tag[Railroads]fsearch[yes]count[]] }}}>
<$vars final={{{ [<value>divide<total>fixed[2]] }}}>
<<st>>
</$vars>
</$vars>
\end
\define status4()
<$vars total={{{ [tag[Railroads]count[]] }}}
value={{{ [tag[Railroads]routemap[yes]count[]] }}}>
<$vars final={{{ [<value>divide<total>fixed[2]] }}}>
<<st>>
</$vars>
</$vars>
\end
\define status5()
<$vars total={{{ [tag[Railroads]count[]] }}}
value={{{ [tag[Railroads]textdraft[yes]count[]] }}}>
<$vars final={{{ [<value>divide<total>fixed[2]] }}}>
<<st>>
</$vars>
</$vars>
\end
\define status6()
<$vars total={{{ [tag[Railroads]count[]] }}}
value={{{ [tag[Railroads]textfinal[yes]count[]] }}}>
<$vars final={{{ [<value>divide<total>fixed[2]] }}}>
<<st>>
</$vars>
</$vars>
\end
\define researchstatus()
<table id="bar-example-10" class="charts-css bar show-labels show-heading
show-4-secondary-axes">
<caption>Trial Research Status Chart</caption>
<tbody>
<tr>
<th scope="row">summaryinfo:</th>
<td style=<<status1>>> <<status1>></td>
</tr>
<tr>
<th scope="row">psearch:</th>
<td style=<<status2>>> <<status2>></td>
</tr>
<tr>
<th scope="row">fsearch:</th>
<td style=<<status3>>> <<status3>></td>
</tr>
<tr>
<th scope="row">routemap:</th>
<td style=<<status4>>> <<status4>></td>
</tr>
<tr>
<th scope="row">textdraft:</th>
<td style=<<status5>>> <<status5>></td>
</tr>
<tr>
<th scope="row">textfinal:</th>
<td style=<<status6>>> <<status6>></td>
</tr>
</tbody>
</table>
\end
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css";>
<style>
#bar-example-10 {
height: 200px;
width: 1000px;
margin: 0 auto;
}
</style>
<<researchstatus>>
The following graph results.
[image: Screenshot 2021-07-18 121208.png]
I cannot get the bar width to be proportional to the values I'm giving it.
The bars are always the full width of the chart. The only way I can make it
work is to have the values hard coded into the macrocall as Anjar did with
his. I tried passing variables into the macrocall, but I haven't been
successful with that either. I'm still confused at times by how to pass
variables to macros.
Up to this point, I've been using the barchart plugin
(https://ooktech.com/TiddlyWiki/BarChart/), but I can't pass numbers to it.
It is setup only to use filters and does the count on titles and not field
values.
Any help would be greatly appreciated.
On Monday, May 3, 2021 at 3:54:24 PM UTC-7 TW Tones wrote:
> Ste,
>
> Realtime graph updates would be great for teaching as interaction stands
> to provide deeper understanding.
>
> Of course it will take deep subject knowledge and teaching skills to do it
> well, but it has the potential to really "sing".
>
> Thanks for your contributions.
>
> Tones
>
> On Tuesday, 4 May 2021 at 03:55:22 UTC+10 Ste wrote:
>
>> If the formula graphing plugin could be rolled in and updated as
>> well....!
>> https://stephenteacher.github.io/graph-tw5smallupdate/
>>
>> On Monday, 3 May 2021 at 18:32:41 UTC+1 Stobot wrote:
>>
>>> I agree Mario - huge value in pure wikitext/css charts - twMat put a
>>> nice framework together!
>>>
>>> On Monday, May 3, 2021 at 6:22:31 AM UTC-4 PMario wrote:
>>>
>>>> On Wednesday, March 17, 2021 at 10:20:17 PM UTC+1 Anjar wrote:
>>>>
>>>> I just discovered the CSS data visualization framework charts.css:
>>>>> https://chartscss.org/ In short, you just add CSS to a table and get
>>>>> a chart out of it. I know there already exist charting frameworks for
>>>>> tiddlywiki, but charts.css looks very nice and simple
>>>>
>>>>
>>>> Hi,
>>>> Just re-discovered this post from your link
>>>> <https://groups.google.com/g/tiddlywiki/c/84qp3JtpKqs/m/qVwnv3fAAwAJ>
>>>> at: Is there any way of using entire latex syntax inside TiddyWiki?
>>>>
>>>> I think, it's a very nice find. Similar to twMat's experiments at:
>>>> http://graphs.tiddlyspot.com/ which also uses wikitext and CSS only.
>>>>
>>>> It seems their minified CSS is still 70kByte. ... We should ask twMat,
>>>> how much he needed. I think, the advantage with TW-native is it nicely
>>>> links to tiddlers. eg: Labels can contain links .. and so on.
>>>>
>>>> I really think Graphs should get more attention, to bring it out of
>>>> beta.
>>>>
>>>> -mario
>>>>
>>>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/89fbac3d-ea0b-4559-8912-2216ad104b5fn%40googlegroups.com.
