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:,40&cht=p3&chl=Hello|World will return

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



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,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\" _


  • the length of the URL
  • it is currently not possible1 to dynamically add labels or add other series


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:


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

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

See Also


gerdamigerdami. Please visit his/her userPage.

Helmuti_pdorf does not match any existing user name. Please visit his/her userPage.

James KanjoJames Kanjo. Please visit his/her userPage.

Related articles


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