[TW5] Embed Chart.js into a TW5 file (pretty much like D3.js)

[Adolfo Delorenzo]

Hello,

As much as I like D3.js and have managed to display some very interesting bar graphs, I do miss being able to generate other types of graphs. I tried to insert Chart.js (https://raw.github.com/nnnick/Chart.js/master/Chart.js) as a plugin/module copying the code into an empty TW5 file with no avail. Unfortunately my limited coding skills and ability to understand the inner structure of TW5 rendered all my attempts useless.

If some kind soul of this great community could show me how to do this I would be very grateful and in eternal moral debt.

Thank you very much.

Best regards,

Adolfo Delorenzo

[ben]

I don't know how to incorporate the  Chart.js  script in a tiddlywiki but  a workaround
 would be be to include them in a tiddler via an iframe
eg:

<iframe src="http://address.of.my.chart" width="400" height="300" style="border: none;"></iframe>

Good luck 

Ben

[Adolfo Delorenzo]

Hello Ben,

Thanks for the tip. One of the downsides of this method is that it only works well if you are online.

Best regards,

Adolfo

[Adolfo Delorenzo]

Hello Dear Community Members,

Any chance of one of the TW5 gurus provide at least some hints on how to 'replace' D3.js with Chart.js?

Thank you in advance.

Best regards,

Adolfo Delorenzo

On Tuesday, March 4, 2014 10:47:46 PM UTC-3, Adolfo Delorenzo wrote:

[Jeremy Ruston]

Hi Adolfo

> Any chance of one of the TW5 gurus provide at least some hints on how to 'replace' D3.js with Chart.js?

I'd recommend reading Chris Hunt's widget coding guide:

http://cjhunt.github.io

The existing D3 plugin is a good guide to how to do the integration. The widgets render() method would create the canvas in the DOM, and then render the chart into it.

Best wishes

Jeremy

--
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 tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

For more options, visit https://groups.google.com/d/optout.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[Jochen Frühauf]

Hi Jeremy

• Is there a documentation for the D3-plugin
• When I am trying to save a Raw Data Tiddler for the D3-plugin I always getting the attached error message

Thanks

Jochen

[Jeremy Ruston]

Hi Jochen

> Is there a documentation for the D3-plugin

I'm afraid not, beyond the source code. Feel free to ask questions on TiddlyWikiDev or GitHub and I'll be happy to answer.

> When I am trying to save a Raw Data Tiddler for the D3-plugin I always getting the attached error message

Thanks for reminding me, that is an old bug. Now fixed for 5.0.9:

https://github.com/Jermolene/TiddlyWiki5/commit/aec618793f41b937676a5a165764dc19d9bbb2b2

Best wishes

Jeremy

[Adolfo Delorenzo]

Thanks Jeremy!!

Best,

Adolfo Delorenzo

On Tuesday, March 4, 2014 10:47:46 PM UTC-3, Adolfo Delorenzo wrote:

[BJ]

I can describe roughly how I Integrated ckeditor (cke) into tw5. I knew nothing of how Tw5 worked at first, so I hacked the ckeditor lib into Tw5. I read the cke example code, which shows how to use it within a simple webpage. I saw from the example code how cke took control of an existing html textarea on a web page in order to edit content. In Tw5 I saw that the edit-text widget used the html textarea, so I modified the edit-text widget source code according the cke example code (only the part that was involved with the textarea). using node,js I build the index.html(including my changes to the edit-widget) then treating it as a simple webpage, I loaded the whole file into a code editor and modified it with the remaining pieces of code as show in the cke example html files (the parts to include the ckeditor.js and initialisation of the lib). Note you need to disable autosave in your index.html as saving a tw5 file will overwrite any manually made changes to the tw5 file. Once I was able to edit and save content(not to disk) in this modified (hybrid) Tw5 file, I then looked at the tw5 plugins D3 and codemirror for inspiration, I also looked at the examples  html files that come with  D3 and codemirror libraries, which show how to integrate them in simple webpages. comparing the codemirror library examples html files with the codemirror plugin gave me enough pointers to start converting my hybrid tw5 into a real tw5 plugin. I used codemirroreditor.js as a rough guide to creating my plugin, and at first extracted my direct changes to the edit-text widget into overriding functions  as in the codemirror plugin. I saw that library files with .js extensions needed to be moved into tiddlers and these need to be of type json/javascript so that they will be loaded as modules (and thus converted in to runnable javascript) and then made accessible via call to the 'require()' function in my plugin's code. After properly integrating the main library file (putting into a tid)  and its initialisation  (in my ckedit.js file) into tw5 I have moved all my code (the stuff in edit-text.js and directly add to index.html) into my plugin and from this point I no longer need to hack the index.html file or edit the tiddlywiki5 edit-text widget - i.e. my plugin had been created.
Next I tackled the other external javascript, CSS and other configurations files, due to the larger number of files to convert to tids, I created a tool (a shell script) to create a "tiddlywiki.files". Next the code to initialise the library was modified to make the library work with tiddlers instead of external files.
I then created the edit-html widget (and stopped overriding the edit-text widget's function) using the D3 plugin as a guide, then worked out from the tw5 source code and docs how to integrate the edit-html widget with the edit widget.

I took this 'hacking' approach because I knew nothing about tw5 internals, and doing it like this broken the processes down into manageable cycles of 'getting something working' then 'learn a bit more and modify my code'. By the end of the process I had my first plugin and had learnt a lot about Tw5 internals.

Note: to include code in the header section, put the code into a tiddler and tag it with $:/core/wiki/rawmarkup.
I WOULD use this method now instead of hacking the index.html.

I WOULD NOT RECOMMEMD looking at the details of the ckeditor plugin - ckeditor is very Tw5 unfriendly and its integration is complex. I would expect that the chart.js integration to be much less complex.

I WOULD compare the example html files that come with the chart.js lib with those that come with the D3.js lib - if they work in a similar way I would make a copy of the D3 plugin, rename the files, and modify they contents to work with chart.js.
 

[BJ]

see also this thread on developing plugins
https://groups.google.com/forum/#!topic/tiddlywikidev/5aHFb8K18LI

[Adolfo Delorenzo]

Hello BJ,

Thank you so much for your detailed post. I´ll try your suggestions and post the results here.

Best regards,

Adolfo

On Tuesday, March 4, 2014 10:47:46 PM UTC-3, Adolfo Delorenzo wrote: