Chart with ListPages

Posted by gerdami on 28 Sep 2009 20:56, last edited by James Kanjo on 24 Jun 2011 02:34

Table of Contents

Chart with Google Chart API

The Google Chart API returns a PNG-format image in response to a URL. Example: http://chart.apis.google.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World will return
.

What if I combine a preset URL with the results of a ListPages module ?

chart?cht=lc&chs=600x300&chf=bg,s,EFEFEF|c,s,66CCFF&chtt=Ratings+distribution&chts=0000FF,16&chm=o,FF9900,0,-1,5.0&chxt=x,y&chxl=0:|HowTos&chxp=0,50&chxr=1,0,50,5&chds=0,50&chd=t:0,73,45,44,41,22,20,18,17,16,15,15,14,14,14,13,13,13,13,12,12,12,11,11,11,11,10,10,10,10,10,10,10,9,9,9,9,8,8,8,8,8,8,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

Code

The code below was inspired by Erich's ListPages Horizontal snippet. I.e. it uses the backslash "\" both in the prependLine and in the module's body. There is a another hack: I had to add a dummy result, zero, otherwise the series of ratings would have begun with a comma.

[[module ListPages category="howto" order="rating desc" perPage="999" separate="false" _
prependLine="[[image http://chart.apis.google.com/chart?cht=lc&chs=600x300&chf=bg,s,EFEFEF|c,s,66CCFF&chtt=Ratings+distribution&chts=0000FF,16&chm=o,FF9900,0,-1,5.0&chxt=x,y&chxl=0:|HowTos&chxp=0,50&chxr=1,0,50,5&chds=0,50&chd=t:0\" _
appendLine="]]"]]
,%%rating%%\
[[/module]]

Limitations:

the length of the URL
it is currently not possible¹ to dynamically add labels or add other series

Credits

Chart with Listpages and px-trick

This little ListPages block shows the first 20 howto's with a diagram( x10 px) of their ratings ordered by their ratings:

Forums: A step by step guide ( 73 )
Create a fully functional Blog ( 45 )
Design Your Own CSS Theme ( 44 )
Import Simple Excel Tables Into Wikidot ( 41 )
Use html scripting ( 22 )
A Wikidot Page Explained ( 20 )
Setting up a custom domain ( 18 )
Create Categories ( 17 )
Create Sortable List of Pages ( 16 )
Include Part Of A Page Only (Tricky Version) ( 15 )
Add a Custom Google Search Engine ( 15 )
Password Protect a Page ( 14 )
Boxes and Tables with Rounded Corners ( 14 )
Customise The Wikidot Editor ( 14 )
Page Count ( 13 )
Set Up An Infobox ( 13 )
Include Part Of A Page Only ( 13 )
Embellish Text. Some Examples ( 13 )
Sortable Tables ( 12 )
Wikidot Site Checklist ( 12 )

Code

[[module ListPages category="howto" order="rating desc" limit="20" separate="no" prependLine="[[table]]" appendLine="[[/table]]"]]
[[row]]
  [[cell]]
    [/%%fullname%% %%title%%] ( %%rating%% )
  [[/cell]]
  [[cell]]
    [[div style="background-color: #333; height: 30px; width: %%rating%%0px; overflow: hidden"]]
    [[/div]]
  [[/cell]]
[[/row]]
[[/module]]

[[module ListPages category="howto" order="rating desc" limit="20" separate="false" prependLine="[[table]][[row]]" appendLine="[[/row]][[/table]]"]]
  [[cell style="vertical-align: bottom; text-align: center;"]]
    [[div style="background-color: #333; width: 30px; height: %%rating%%0px; overflow: hidden"]]
    [[/div]] [/%%fullname%% %%rating%%]
  [[/cell]]
[[/module]]