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
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 returnWhat 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 ( 89 ) |
|
Design Your Own CSS Theme ( 65 ) |
|
Create a fully functional Blog ( 50 ) |
|
Import Simple Excel Tables Into Wikidot ( 41 ) |
|
Use html scripting ( 36 ) |
|
A Wikidot Page Explained ( 21 ) |
|
Setting up a custom domain ( 18 ) |
|
Create Categories ( 17 ) |
|
Password Protect a Page ( 16 ) |
|
Create Sortable List of Pages ( 16 ) |
|
Boxes and Tables with Rounded Corners ( 15 ) |
|
Sortable Tables ( 15 ) |
|
Include Part Of A Page Only (Tricky Version) ( 15 ) |
|
Embellish Text. Some Examples ( 15 ) |
|
Add a Custom Google Search Engine ( 15 ) |
|
Using Ratings ( 15 ) |
|
Customise The Wikidot Editor ( 14 ) |
|
Set Up An Infobox ( 14 ) |
|
Site statistics – visitors tracking, hit counters, etc. ( 14 ) |
|
Page Count ( 13 ) |
|
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 does not match any existing user name. Please visit his/her userPage.
James Kanjo. Please visit his/her userPage.
Thanks to gerdami, for the howto Chart with ListPages !
He documented the ratings of our howto#s by using the google.service and I found on the http://roadmap.wikidot.com/ the diagrams with "00px" trick ( by Gabrys I think )..
Have a look!
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
gerdami! That is A MAZING!
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
No, James.
I just cannot reach the expertise level you set with the calendar.
I'm just playing with simple things.
No gerdami, don't sell yourself short. That is chart using the Google API is definitely going to be useful to a lot of people, including myself. Thanks XD
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
Look at this! :)
http://cyclods.wikidot.com/test:1
I'm going to have a lot of fun when %%views%% is released. Real-time statistics!!
If only ListPages could list the value of %%views%% today, one day ago, two days ago, etc.. :P
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
Yes, this is really clever: mixing ListPages reporting with external tools. I am going to have to write another blog entry, there is too much amazing stuff going on here…
Gerdami, Bravo!
Portfolio
This gave me an idea. Could this be used with the poll system to provide a graphical view of the ratings? That would make the poll system so much better!
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
=0
You're god damn right!
@ Gerdami,
Shane's right! You're way too modest, this is fantastic!
Besides, the calendar uses 7 pages for its framework, and these charts use 1 page — you've trumped me!
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
This is easy:
on the "poll:_template" ( on polls.wikidot.com) there is now the ListPages under
You have to change it (like the howto:chart..). to
I am not allowed to do it…
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Fine, James.
And how do you make a pie chart ?
:))
Interesting…I never thought this is posible to turn 90 degree…
Now i think too about a "pie chart"
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
@ James Kanjo
@ Helmuti_pdorf
With the polls website, unless there is a way to allow both types of poll at once (there probably is, based on the calendar mode=mini and mode=full), I think the polls that use this chart idea should be done in a separate category. Some people may still wish to use the current poll system, so that should be kept in some form.
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
Just found Michal's twitter by accident… and it mentions this page:
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)