Posted by gerdami on 1254171369|%e %b %Y|agohover, last edited by James Kanjo on 1308882842|%e %b %Y at %H:%M |agohover
Tags: chart graph horizontal listpages
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 ?
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:
| Forums: A step by step guide ( 38 ) | |
| Import Simple Excel Tables Into Wikidot ( 34 ) | |
| Design Your Own CSS Theme ( 19 ) | |
| A Wikidot Page Explained ( 17 ) | |
| Create a fully functional Blog ( 16 ) | |
| Setting up a custom domain ( 16 ) | |
| Page Count ( 13 ) | |
| Add a Custom Google Search Engine ( 13 ) | |
| Boxes and Tables with Rounded Corners ( 12 ) | |
| Create Sortable List of Pages ( 12 ) | |
| Forums : Fixing Them ( 11 ) | |
| Customise The Wikidot Editor ( 10 ) | |
| Include Part Of A Page Only (Tricky Version) ( 10 ) | |
| Fiddle with CSS – the easy way. ( 9 ) | |
| Boxes with Shadows ( 9 ) | |
| Put Pictures With Footnotes In The Text Using Divs ( 9 ) | |
| Set Up An Infobox ( 9 ) | |
| Include Part Of A Page Only ( 9 ) | |
| Create Categories ( 9 ) | |
| Sortable Tables ( 8 ) |
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
- http://roadmap.wikidot.com/
Gabrys's Trick to multiply width by factors other than 10
Authors
gerdami. Please visit his/her userPage.
Helmuti_pdorf. Please visit his/her userPage.
James Kanjo. Please visit his/her userPage.
Other(!) HowTos posted by gerdami
- Subscribe To Community Sites And Forum Changes Via Feedblitz
- Go Mobile
- Track Site And Forum Changes In One Page
- Redirect a complete category
- Play Music
- Autonumber headings and ordered lists
- Apply a Wikipedia-like "article - discussion" tabs to existing pages
- A Wikidot Page Explained
- Apply your first live _template to your pages
- Include Variables with Special Characters
- Autonumber headings and paragraphs
- Create an Automatic Navigation without parent-childs
- Hide forum signatures
- Create a Blog based on category blog:
- Autoparenting
- Add a Custom Google Search Engine
- Change Tagcloud Colors
- Import Simple Excel Tables Into Wikidot
- Replace bullets of a list by pdf icons
- Google Maps - different methods
- Add a QR code to your page
