jQuery plugin and passing an Array of data values

335 views
Skip to first unread message

MidGe

unread,
Sep 22, 2010, 8:56:35 PM9/22/10
to TiddlyWiki
Playing with TiddlyWiki and JQuery plugins, I am confronted with the
following problem:

I need to pass an array of data values from a series of tiddlers, to a
function invocation of the jQuey plugin.
I can get a comma delimited list of values thru using fET, but I can't
use this result in the script part of the code where the call to the
function is.
Neither can I move the function call into the fET as it refers to an
earlier html line, where the item pointed at by the selector is
defined.

I think I am missing out on something basic here.

Anyone for trying to help?
Any more info needed?

Thanks

MidGe

unread,
Sep 22, 2010, 10:50:12 PM9/22/10
to TiddlyWiki
Further to the above, here is the code within a tiddler that
examplifies my dliemna:

---------------------------------------------------------------------------------------------------------------------------------------------
<html>
<p>Sparkline with dynamic data: <span
class="dynamicsparkline">Loading..</span></p>
</html>

<<forEachTiddler
where
'tiddler.tags.contains("journal")'
script
'function writeExpenseRow(index, tiddler, context) { var result =
""; result+= tiddler.data("tramadol"); result += ","; return
result;}'
write
'writeExpenseRow(index, tiddler, context)'
>>


<script>

var myvalues =
[14,10,8,5,7,4,2,21,18,10,8,15,7,4,14,16,0,8,5,17,4,7,21,8,10,8,15,7,14];
jQuery('.dynamicsparkline').sparkline(myvalues, {height: '300px',
width: '300px', spotRadius: '5'});

</script>
-----------------------------------------------------------------------------------------------------------------------------------------------------

As can be seen, there are three separate sections: html, the macro and
the script. How can I assign the output of the macro to the var
myvalues in the script part.

I think I am thinking about this the wrong way, but I am unclear on
how to think differently. :)

Eric Shulman

unread,
Sep 23, 2010, 1:20:27 AM9/23/10
to TiddlyWiki
> As can be seen, there are three separate sections: html, the macro and
> the script. How can I assign the output of the macro to the var
> myvalues in the script part.
> I think I am thinking about this the wrong way, but I am unclear on
> how to think differently.  :)

First, rather than using HTML syntax, you can simplify the creation of
the 'target' element by using TiddlyWiki native "CSS class wrapper"
wiki syntax to define a span with the desired classname for the script
output. Next, instead of using <<forEachTiddler>> to construct the
list of values followed by a separate <script> block to render them to
the target element, you could gather the values AND output the desired
content in ONE combined script, without using <<forEachTiddler>> at
all.

Something like this:

-------------
Sparkline with dynamic data: {{dynamicsparkline{Loading...}}}
<script>
var myvalues=[];
var tids=store.getTaggedTiddlers('journal');
for (var i=0; i<tids.length; i++)
myvalues.push(tids[i].data('tramadol'));
var mystyles={ height: '300px', width: '300px', spotRadius: '5' };
jQuery('.dynamicsparkline').sparkline(myvalues, mystyles);
</script>
-------------

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

MidGe

unread,
Sep 23, 2010, 1:32:27 AM9/23/10
to TiddlyWiki
Thank you very much for your help. As you gathered I am rather new to
TiddlyWiki but I am getting there and enjoying it!

The clue I was looking for was the use of the store object. That
achieves my need and your code works perfectly.

Thanks again.

Michel

Tobias Beer

unread,
Sep 23, 2010, 7:12:38 AM9/23/10
to TiddlyWiki
That's a neat little plugin.

I guess you took...

http://omnipotent.net/jquery.sparkline

...and simply copied the minified version into your TiddlyWiki tagging
it "systemConfig", right?

Cheers, Tobias.

Tobias Beer

unread,
Sep 23, 2010, 7:18:00 AM9/23/10
to TiddlyWiki
This could be a neat little plugin to go along with statistics or even
polls (pie-chart).

Consider a feature-wishlist and people voting on a feature while
seeing the pie-chart of its popularity right next to it à la
http://www.theskinnyscoop.com

Cheers, Tobias.

MidGe

unread,
Sep 23, 2010, 10:04:12 AM9/23/10
to TiddlyWiki

Correct, the plugin is from omnipotent as per your link. I didn't even
use the minified version, since I am developing.

The install was really as simple as you suggested.

It is a great plugin!

If you are interested, In a similar vein and as easy to install, is
raphaeljs at http://raphaeljs.com/ and from there to g.Raphael for
chart, if chart are specifically what is wanted.

Of course, with jQuery in core, I had to favor omnipotent's as a
solution for charting.

Tobias Beer

unread,
Sep 23, 2010, 11:28:52 AM9/23/10
to TiddlyWiki
Hi MidGe,

Inspired by this and for fun's sake (and in the context of this
discussion about a ProgressBarMacro [1]) I just created an individual
macro to create bullet graphs...

http://tobibeer.tiddlyspace.com/#BulletGraph

Cheers, Tobias.

[1] http://groups.google.com/group/tiddlywiki/browse_frm/thread/df4f3aec6c45d11d


On 23 Sep., 16:04, MidGe <degreef.mic...@gmail.com> wrote:
> Correct, the plugin is from omnipotent as per your link. I didn't even
> use the minified version, since I am developing.
>
> The install was really as simple as you suggested.
>
> It is a great plugin!
>
> If you are interested, In a similar vein and as easy to install, is
> raphaeljs athttp://raphaeljs.com/and from there to  g.Raphael for
Reply all
Reply to author
Forward
0 new messages