Charts.CSS

Anjar

unread,

Mar 17, 2021, 5:20:17 PM3/17/21

to TiddlyWiki

Hi all,

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

A small working example:

```

\define barchart(vals)

<$set filter="[<var>split[]allbefore[,]join[]]" name="lab"><$set filter="[<var>split[]allafter[,]join[]]" name="val"><tr>

</tr></$set></$set></$list></tbody>

</table>

\end

\define st() --size:$(val)$;

<style>

#bar-example-10 {

height: 200px;

max-width: 300px;

margin: 0 auto;

}

</style>

<<barchart "2016,0.5;2017,0.1;2018,0.4;2019,0.8">>

```

I hope you are all healthy and safe!

Best regards,

Anders

History Buff

unread,

Mar 17, 2021, 7:27:20 PM3/17/21

to TiddlyWiki

Oh my. Thanks for sharing that! That may be just what I've been looking for. I'll definitely give it a try anyway.

Damon

Ste

unread,

Mar 20, 2021, 12:57:51 PM3/20/21

to TiddlyWiki

That's quite cool!

PMario

unread,

May 3, 2021, 6:22:31 AM5/3/21

to TiddlyWiki

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 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

Stobot

unread,

May 3, 2021, 1:32:41 PM5/3/21

to TiddlyWiki

I agree Mario - huge value in pure wikitext/css charts - twMat put a nice framework together!

Ste

unread,

May 3, 2021, 1:55:22 PM5/3/21

to TiddlyWiki

If the formula graphing plugin could be rolled in and updated as well....!

https://stephenteacher.github.io/graph-tw5smallupdate/

TW Tones

unread,

May 3, 2021, 6:54:24 PM5/3/21

to TiddlyWiki

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

History Buff

unread,

Jul 18, 2021, 3:17:49 PM7/18/21

to TiddlyWiki

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>

\end

\define status2()

<$vars total={{{ [tag[Railroads]count[]] }}}

value={{{ [tag[Railroads]psearch[yes]count[]] }}}>

<$vars final={{{ [<value>divide<total>fixed[2]] }}}>

<<st>>

</$vars>

\end

\define status3()

<$vars total={{{ [tag[Railroads]count[]] }}}

value={{{ [tag[Railroads]fsearch[yes]count[]] }}}>

<$vars final={{{ [<value>divide<total>fixed[2]] }}}>

<<st>>

</$vars>

\end

\define status4()

<$vars total={{{ [tag[Railroads]count[]] }}}

value={{{ [tag[Railroads]routemap[yes]count[]] }}}>

<$vars final={{{ [<value>divide<total>fixed[2]] }}}>

<<st>>

</$vars>

\end

\define status5()

<$vars total={{{ [tag[Railroads]count[]] }}}

value={{{ [tag[Railroads]textdraft[yes]count[]] }}}>

<$vars final={{{ [<value>divide<total>fixed[2]] }}}>

<<st>>

</$vars>

\end

\define status6()

<$vars total={{{ [tag[Railroads]count[]] }}}

value={{{ [tag[Railroads]textfinal[yes]count[]] }}}>

<$vars final={{{ [<value>divide<total>fixed[2]] }}}>

<<st>>

</$vars>

\end

\define researchstatus()

<caption>Trial Research Status Chart</caption>

<tbody>

<tr>

<th scope="row">summaryinfo:</th>

</tr>

<tr>

<th scope="row">psearch:</th>

</tr>

<tr>

<th scope="row">fsearch:</th>

</tr>

<tr>

<th scope="row">routemap:</th>

</tr>

<tr>

<th scope="row">textdraft:</th>

</tr>

<tr>

<th scope="row">textfinal:</th>

</tr>

</tbody>

</table>

\end

<style>

#bar-example-10 {

height: 200px;

width: 1000px;

margin: 0 auto;

}

</style>

<<researchstatus>>

The following graph results.

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.

Reply all

Reply to author

Forward