Flot Extension
Hi,
if somebody is interested here is an extension which enables to add Flot ( (javascript plotting library) graphs on a page. Developed for and tested on Lyons version.
First you need to download flot library files (http://code.google.com/p/flot/) : jquery.flot.pack.js and excanvas.pack.js and put them on server path - ( /skins/common/jquery/).
Then activate script extension. Parameters are almost same as for Flot plot function - so see its documentation for details.
Writing extension was not so difficult, however I find quite annoying collisions of various syntaxes: XML vs DekiScript vs Javascript vs XML post processing. Most errors were from the fact that I forgot that some character is illegal in XML etc.
Before this extension I was writing some templates that combined HTML, Dekiscript and Javascript and it was even more confusing - especially because the FKCEditor does some manipulation of source code.
Is there any guide, how to write such mixed code (JS/DekiScript/HTML/XML) easily/naturally?
Regards
Ivan
Code:<extension> <title>Flot Graph</title> <namespace>flot</namespace> <function> <name>graph</name> <description>Show graph using flot js library. Takes all flot input, with these changes: - data serie can contain attributes x and y, which contain name of x value and y value of an item of a serie (the item is a map then) - legend/container is not supported - instead there is containerWidth attribute - specifying width of an extenal legend container, which is outside of the graph on one of specified positions (ne, se nw, sw). - all params, that requires reference to javascript function could take a string with javascript anonymous function source (c) 2009 Ivan Zderadicka - Free to use under MIT License (same as Flot library). </description> <param name="data" type="list">Graph data (follow the flot format)</param> <param name="options" type="map" optional="true">Graph options (follow the flot for</param> <param name="width" type="int" optional="true">Graph width</param> <param name="height" type="int" optional="true">Graph width</param> <return> <html xmlns:eval="http://mindtouch.com/2007/dekiscript"> <head><script type="text/javascript" src="/skins/common/jquery/jquery.flot.pack.js"></script> <script type="text/javascript" src="/skins/common/jquery/excanvas.pack.js"></script></head> <body> <eval:block value="var w= args.width ?? 300; var h=args.height ?? 200; var nd= []; foreach (var serie in args.data) { if (serie.x && serie.y) { var list=[]; foreach( var l in serie.data) { let list ..= [[l[serie.x], l[serie.y]]]; } ; let serie ..= {data:list}; } let nd ..= [serie]; } "> <div eval:id="'r_graph'..@gid" eval:style="'width:'..w..'px; height:'..h..'px'">[Graph]</div> <script type="text/javascript"> $( function () { var data=<eval:js value="nd"/>; var graph_id=<eval:js value="'#r_graph'..@gid"/>; var options=<eval:js value="args.options"/>; function eval_str(list) { if (options) { for (var i in list) { var sn=list[i].split('.'); var first=sn[0]; var last=sn[1]; if (options[first] && options[first][last] && typeof(options[first][last])=='string') { options[first][last]=eval('('+options[first][last]+')'); } } } }; if (options && options.legend && options.legend.containerWidth && ! isNaN(options.legend.containerWidth)) { var legend_id=<eval:js value="'r_legend'..@lid"/>; var w1=parseInt(<eval:js value="w"/>); var h=parseInt(<eval:js value="h"/>); var w2=parseInt(options.legend.containerWidth); var pos=options.legend.position; var gs={position:'absolute'}; var ls= {width:w2+'px', position:'absolute'} switch (options.legend.position) { case 'ne': ls.top=10+'px'; ls.left=w1+'px'; gs.left=0+'px'; gs.top=0+'px';break; case 'nw': ls.top=10+'px'; ls.left=0+'px'; gs.left=w2+'px'; gs.top=0+'px';break; case 'se': ls.bottom=10+'px'; ls.left=w1+'px'; gs.left=0+'px'; gs.top=0+'px';break; case 'sw': ls.bottom=10+'px'; ls.left=0+'px'; gs.left=w2+'px'; gs.top=0+'px';break; default: ls.top=10+'px'; ls.left=w1+'px'; gs.left=0+'px'; gs.top=0+'px';break; } $wrap=$('<div></div>').css({width:w1+w2+'px', position:'relative'}); $(graph_id).css(gs).wrap($wrap); $cont=$('<div id="'+legend_id+'"></div>').css(ls).insertAfter(graph_id); options.legend.container=$cont; } eval_str(['grid.markings', 'legend.labelFormatter', 'xaxis.ticks', 'yaxis.ticks', 'x2axis.ticks', 'y2axis.ticks', 'xaxis.tickFormatter', 'yaxis.tickFormatter', 'x2axis.tickFormatter', 'y2axis.tickFormatter']); $.plot($(graph_id), data, options); }); </script> </eval:block> </body> <tail></tail> </html> </return> </function> </extension>
Reply With Quote
