ApexCharts plugin pre-release

[andrewgoz]

I'm starting a new discussion because I've recently implemented the last major functionality I believe my plugin needed. It's not a "proper" final release, yet, but it's much closer now. Note that previously I had been incorrectly using a version "1.?.?", that's now changed to "0.?.?", so if you've already installed the earlier copy, you'll need to delete it first.

The primary new functionality is:

• Ability to invoke TiddlyWiki action strings.
• Ability to call ApexCharts library functions.

The "poster child" for these is my port of the ApexChart GitHub Style demo. Dragging the brush invokes a TiddlyWiki action that calls an ApexChart function to sum data values and update a tiddler.

Other changes include:

• Improved handling of charts with ids ("there can be only one").
• Predefined action string to simplify navigating to an arbitrary tiddler (demo).

I plan to continue porting ApexChart demos to my wiki, fixing issues as I come to them. Once I'm happy with all that, it will be time for v1.0.0!

Please have a look and let me know if you have suggestions or improvements. Now is the time while I'm working on it. Note that I will be away on holiday all next week

[pmario]

Hi, it seems http://www.scss.com.au/family/andrew/tiddlywiki/#ApexChart%20-%20Line%20-%20Synchronised has a rendering problem. Tested with FF-latest on Windows 11 and Edge

[andrewgoz]

If you mean the tooltips not staying visible, then the original https://apexcharts.com/javascript-chart-demos/line-charts/syncing-charts/ has the same issue.

[pmario]

I would like it, if the edition would only have the ApexChart plugin, so the libary overhead of the other plugins would not be there. 500kB is a bit hefty from my point of view.

But the possible functions are excellent.
Especially the export to SVG. Which gives us the possibility to include SVG's into normal wikis after cleaning them up with https://svgomg.net/ and use the heavy-weight to create them or be linked to them.

[andrewgoz]

500kB is the size of the library! See https://github.com/apexcharts/apexcharts.js/blob/main/dist/apexcharts.common.js

[andrewgoz]

Just uploaded a slight revision - broken out my "filter sequence" code into its own tiddler, ported the next tranche of demo charts (columns), and added support for X-axis tooltips that I'd missed.

Regarding the size of the library. I knew someone would complain about the size. I don't really see 500kB being over-the-top for the sort of charting functionality provided.

Having said that, I've been looking at Chart.js. I initially dismissed that library because they had no demonstrated support for the timeline charting I need (see http://www.scss.com.au/family/andrew/tiddlywiki/#ApexChart%20Timeline%20Test). I have since discovered that it is possible with some effort. That library appears to be available in about 200kB, so under half the size of ApexCharts. However, I'm much too far down the ApexCharts route to stop now.

[pmario]

I'm much too far down the ApexCharts route to stop now.

I did have a closer look at the ApexChart library github repository. They did have a discussion about to implement a modular version of the library. But it seems the different chart types are only a very small part of the whole size. The main contributor did refuse to invest the time to make it happen.

[andrewgoz]

Just in time for my week off, I've now ported the remainder of the ApexCharts demo charts. Many bugs have been fixed, many more callbacks supported, and support for fill images using images in the wiki itself has been added.

When I get back, hopefully not too many bugs will have been reported, and I'll look to do a v1 release.

Thanks for your feedback!

[arunnbabu81]

@andrewgoz
I have been following the development of your ApexCharts plug in keenly. Thanks for creating this plug in. Is it possible to use tiddlywiki filters and data from tiddler fields for obtaining input data for the apexcharts. You had shown some advanced examples with google charts using TW filters and by extracting tiddler field values as shown in this link - http://www.scss.com.au/family/andrew/tiddlywiki/#GoogleChart%20Advanced%20Examples . Is that possible with ApexCharts ?

[andrewgoz]

The answer is yes. See:

http://www.scss.com.au/family/andrew/tiddlywiki/#Plugin%20Sizes
http://www.scss.com.au/family/andrew/tiddlywiki/#ApexCharts%20Composition
http://www.scss.com.au/family/andrew/tiddlywiki/#ApexChart%20Use%20Case%20Test

These all build the configuration JSON using filters and tiddler fields. If you really wanted to you could put the entire JSON into a single tiddler field (that would be ugly), but you could also put parts, such as a data array in one field and a label array in another, then transclude those into JSON config.

[andrewgoz]

Thanks to all who provided advice during development of my plugin.

I've just released v1.0 and made an announcement on Google Groups, which I believe is duplicated to the talk forum.

Thanks again.