Charting plugins - ApexCharts and Chart.js

#8

Hi Fred,

Thanks for your comments.

TiddlyWiki filters, macros, procedures, functions and similar things are fundamental to TiddlyWiki and I struggle with how they all work together.

For some things I started with “+[join[,]]” but later found it unusable in some cases and ended up with the list/counter pattern. I have clearly re-used that pattern where join would have worked and been the better option. It’s good to be reminded of these things!

I’ve uploaded a new wiki. The composition charts are simpler now. A couple of other charts got similar treatment.

Andrew

2 Likes
#9

@andrewg_oz I was trying to use the apex charts with a Habit-tracker. Habit tracker is saving data in a json tiddler like this. Is it possible to retrieve data from such a json tiddler for creating charts.

#10

Nice plugins, so you created two plugins, supporting ApexChart and Chart.js, and I can see on you website you also created another version of echarts plugin, I think this has been done by ECharts - Bringing amazing visualization tools to TiddlyWiki!.

But seems charts.js is much smaller, which can be a nice replacement for smaller wikis.

But what into my concern is that we might need to install multiple chart library if other plugins like Habit tracker in TW directly depend on them.

A better approach will be like Fishing, flashcard in TiddlyWiki, add new features to help remember tiddler more efficiently in release v1.2.0, it make its analysts feature be a sub-plugin, so user can choose install a version with the chat library they already installed. (Can have 2 analysts sub-plugin, depends on charts.js and echarts)

#11

The short answer is yes.

The longer answer is that all the chart libraries tend to use JavaScript timestamps (that is, milliseconds since 1-Jan-1970) and that the dates in the JSON will need to be parsed into something that can be ultimately converted into a timestamp. It will also make the date sortable - something I assume you’d want to do and something that can’t be done in the string form the dates are in now.

I’ve done some testing and found that the date in your JSON cannot be parsed by the TiddlyTools parsedate function. In other words, “21/9/2023” won’t work, but “9/21/2023”, “21-Sep-2023”, “20230921”, “2023/9/23” will. Other formats might work too, like an ISO8601 or similar. My first preference for writing dates is “21-Sep-2023” since it is clear which part is a year, month, or day. My second preference is ISO8601, so “20230921”

Once date parsing is resolved you’ll be able to use TW widgets to construct a suitable JSON that can be charted.

I’ve just updated my wiki with the following:

http://www.scss.com.au/family/andrew/tiddlywiki/#Test%20Json:[[Test%20Json]]%20[[Data%20from%20Json]]

I don’t know what sort of chart you’re after, but the general idea is this:

  1. Change your JSON date format to something parsable. Ideally it would be directly sortable without parsing, like a TW timestamp.
  2. Use TW widgets to construct a chartable JSON.

The “Data from Json” tiddler converts the JSON dates into a sortable form (“YYYY0MM0DD”) then sorts them. Then it sets a “key” variable that returns that sortable date back to the original format in the JSON to allow lookups to work. This could be avoided if the dates were already stored in the JSON in a sortable form.

Then an example table is output using the key for looking up data in the JSON, the JavaScript (not TW) timestamp for charting, and the looked-up value (also for charting?)

#12

I’ve tried to keep my chart plugins as “thin” as possible, since I don’t know how other people will try to use them.

I really don’t see much alternative for plugins that want to support charting other than to provide (or allow for) chart-specific plugins.

There are a couple of things I could think of that I could change.

One would be to support a “json” parameter that would provide an additional way to provide chart data to the widget. Another way would be to support a parameter “dict” (for “dictionary tiddler”) that would make use of the dictionary-tiddler-macros I’ve written for my ApexCharts and Chart.js widgets.

I’m not sure of the best way to proceed, so I’m just seeing what ideas people may have before doing anything more.

#13

Thank you @andrewg_oz for taking a look at this issue. As per your advice, I changed the date format in the json tiddler into a parsable format.

image
image696×497 8.06 KB

But the Value column is remaining empty

image

Any idea whats going wrong here ?

#14

I think the most widely recognized, easily parseable format is the ISO-8601 version with the hyphens, 2023-09-21, which conveniently extends to including times as well. And it’s easy to convert to TW date format. In JS:

const d = new Date()
console.log(d.toISOString())                     //=> 2023-09-21T16:35:48.771Z
console.log(d.toISOString().slice(0, 10))        //=> 2023-09-21
console.log(d.toISOString().replace(/\D/g, ''))  //=> 20230921163612589

Go jogging_data.json (338 Bytes)

2 Likes
#15

When you’re creating the key variable the format string has to match the format in the JSON. In your case, it should be “YYYY-MM-DD”.

#16

@andrewg_oz … There seems to be a problem with Andrew's TiddlyWiki — Plugins and Macros – I does not work with FireFox

Is there a GitHub repo to report bugs?

#17

@andrewg_oz I got it working as you suggested.
Do you know of any charts which can display yes or no data like this from json tiddlers

#18

Timeline chart may fit your needs.

image
image1520×320 3.13 KB

1 Like
#19

@john.edw_gmail.com How to modify the code of this timeline chart tiddler to get the data from this tiddler.

#20

@pmario No repo, sorry. The problem was in the demo data - apparently Firefox doesn’t parse “1793-11-31” as a date (only 30 days in November!)

#21

Something like:
http://www.scss.com.au/family/andrew/tiddlywiki/#Chart%20from%20Json
?

Habit tracker in TW
#22

Thank you @andrewg_oz

I did something testing and created a chart based on the one you shared

It is working, but there is some issues I am seeing. Chart data is not getting correctly updated when I add a data in the habit tracker tiddler.

Edit: After adding caption field to those json tiddlers, it’s working as intended…Thank you @andrewg_oz for the help.

#23

No problem. Just a tweak to my code. I think the tooltips look better if they’re the same date. Instead of “86400000” it should be 1 less: “86399999”.

1 Like
#24

@andrewg_oz
Can candlestick charts be used to create best streaks from the habit json data tiddlers like this

Screenshot_20230924_161612_Habits
Screenshot_20230924_161612_Habits1080×519 85 KB

#25

This is not easy because your raw data is a day-by-day yes or no data point. You need a bit of code to process your raw data, identify the streaks and tally up how long they are. I’m certain a JavaScript widget or macro could be written to generate some JSON.

However, I don’t see an ApexChart that looks like your example.

1 Like
#26

Any idea whether this can be done using the JSON Operators in tiddlywiki ?

#27

If it can be done that way I don’t know. Someone better than me at filters/macros would need to see.

As I said, I think it would be easiest (and maybe only possible) written as a widget/macro in JavaScript.