Chart with ListPages

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

Tags: chart graph horizontal listpages

rating: +4+x

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
chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World.

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,45,37,28,27,17,17,14,13,13,13,12,12,11,11,10,10,10,9,9,9,9,9,9,8,8,8,8,7,7,7,7,7,7,7,6,6,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,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,1,1,1,1,1,1,1,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,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 possible1 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:

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]]

See Also

Authors

gerdamigerdami. Please visit his/her userPage.

Helmuti_pdorfHelmuti_pdorf. Please visit his/her userPage.

James KanjoJames Kanjo. Please visit his/her userPage.


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.