Google Charts in TiddlyWiki

#1

I started a thread over on the Google Group forum - see https://groups.google.com/g/TiddlyWiki/c/YcGCVLNZLEk

It was pointed out that while it’s visible here, it’s read only. Hence I started this thread.

In short, I’ve taken some earlier work on supporting the Google Chart API in TiddlyWiki and made it much easier to use. My demo TiddlyWiki with the macro code and optional Parser is available at:

http://www.scss.com.au/family/andrew/tiddlywiki/GoogleCharts.html

In short, I’ve written a macro that can accept data from separate tiddlers (in JavaScript array form, or tables in WikiText form), in Tiddler fields, or generated by Macros.

Comments/feedback welcome…

5 Likes
#2

Hi Andrew,

Great work on this. I’d love to give it a try. I dropped the tiddlers GoogleChart and GoogleChartDataParser as well as Macro Generated Data into my wiki, but Macro Generated Data is not generating a pie chart. What am I missing?

Thanks in advance!

#3

Same issue here. However, I right-clicked on the element and saw an error:

unexpected token ‘~’.

I actually saw two instances of this. I took it upon myself to remove this character from this line:

let trre = new ~RegExp(lab + ‘tr’ + lsb + ‘^’ + rab + rsb + ‘*’ + rab, ‘g’);

and this line:

var chart = new google.visualization.~ChartWrapper({

… in the GoogleChart tiddler. After a reload it worked. Can someone explain?

#4

@andrewg_oz

can the field values from other tiddlers be extracted and shown in the chart. For example, in my budget wiki there are numerical values in the debit and credit fields of each input tiddlers I create. I would like to extract such data may be using transclusion and use it in the charts. Is it possible?

#5

This looks spectacular, I will investigate, thanks for contributing to the community @andrewg_oz .

#6

I’ve just uploaded an updated wiki. I can’t explain the difference in behavior, but I’ve reworked the offending code (RegExp and ChartWrapper) so the ~ isn’t needed in my wiki, which hopefully means it will work in those wikis where that was causing a problem.

Cheers,
Andrew

2 Likes
#7

Thanks Andrew,

I’ve managed to play around a bit and so far I’m loving it. It seems, to me at least, to be easier to use than eCharts, but I’ve only started experimenting with it. Great work!

1 Like
#8

@andrewg_oz I have tried to use it based on tiddler fields and it works. I will do more experiments with these charts when I have enough time.

Any comments about this.


Another doubt - will there be an offline version. Currently it works in online mode only I guess

#9

There will never be an offline version.

Unless something newer supercedes this (if you are willing to pay for it, I bet Google can develop up a license for the right price if it doesn’t have one already):

Can I use charts offline?

Your users’ computers must have access to https://www.gstatic.com/charts/loader.js in order to use the interactive features of Google Charts. This is because the visualization libraries that your page requires are loaded dynamically before you use them. The code for loading the appropriate library is part of the included script, and is called when you invoke the google.charts.load() method. Our terms of service do not allow you to download the google.charts.load or google.visualization code to use offline.

1 Like
#10

As @Charlie_Veniot says, offline support is entirely up to Google and seems highly unlikely.

I was not aware of ECharts and have now found two TW plugins for it! It seems very complicated to use - I wonder if it would be possible to write a macro to take simple table-based data sources and generate the configuration JSON it needs?

In any case, I really needed the Google Charts Timeline support - my macro just increased in scope a little to where it is now…

#11

Yes, I feel that ECharts is more complicated than I want to deal with generally, but I’ve managed to create a few charts. Now that I’ve seen your Google Charts, I’m really contemplating switching over to that. It seems way more straight forward. I’m still experimenting, but I really like what I see so far.

#12

I agree with @HistoryBuff. I love the small foot print of the Google charts macro. Thank you.

#13

There is a vis…js plugin that does nice time lines.
http://kixam.github.io/TW5-visjsTimeline/

And for simple line graphs
https://stephenteacher.github.io/graph-tw5smallupdate/

But the Google charts stuff is awesome!