Very Cool!
This is a very cool solution for static tables. If you can figure out how to make it work with ListPages or other dynamic content, we'd be in Wikidot heaven!
Nice work!
-Ed
Sortable Tables / Discussion
Forum
» The Community / Per page discussions
» Sortable Tables
This is the discussion related to the wiki page Sortable Tables.
thanks Rob, this could be very useful.
Now i think and think about an automatic creation of such html codec - why I am a programmer?
this should easy enough for restructuring a simple "given table" into such html code…
Or have I missed something?
( i think about an excel macro too….)
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 ?
I see Gerdami has provided another Excel to something else generator.
This time for this sortable table snippet/thingy
I have given this a bit of a test drive.
As long as you don't have any "blank " cells in the table. (stick a "0" in any of them) It works a treat.
So … my thanks to Rob for finding out how to do this, and to gerdami for making it so much easier.
Phil,
Thank you for debugging this.
Indeed I guessed the column format from content in second row.
The Google applet does not display anything (of the table) if a cell supposed to be number / boolean is empty. The empty cell is not a problem with a string format.
I'll try to fix these bugs later.
I just ran Gerdami's nice piece of work against a large table (200+ rows). One minor issue. My string data contains apostrophes and that messed up the parsing. I simply replaced the apostrophes with back ticks as a quick fix.
I suspect there is a way to escape apostrophes, but haven't verified this yet.
Another issue I have that is not related to Gerdami's code is that the Boolean table cells do not show the graphical check boxes while on my laptop. I get this instead:
No problems from other PCs I use:
This must be a font issue. Any suggestion on how I track this down? I can't see any font-family references in the source.
The performance on long tables is pretty impressive.
My test page: http://pizzageek.wikidot.com/sandbox:google-code-sortable-tables
Thanks Rob & Gerdami - Nice find and nice work by both of you!!!
-Ed
Thanks Ed for testing.
I must admit that I did NOT go through the Google API documentation, as a software project leader would have done. May be there are some hints to achieve the escape of quotes.
I added this page to-do:clean-the-code-of-exceltogoogle-xls and uploaded there my last version (still to be cleaned from previous programme codes)
I was somewhat surprised by the Google API format : I mean not a XML format more in the mood, but this is another discussion to be held somewhere else.
Hi there,
Testing this code, it comes up with 'No valid code block found', but when I use the iframe that was supplied with the example, it works?!
[[collapsible show=" " hide="Hide"]]
[[code type="html"]]
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenue');
data.addColumn('number', 'Change');
data.addColumn('boolean', 'Staff Bonus');
data.addRows(5);
data.setCell(0, 0, 'Shoes');
data.setCell(0, 1, 10000, '£10,000');
data.setCell(0, 2, 12, '12.0%');
data.setCell(0, 3, true);
data.setCell(1, 0, 'Sports');
data.setCell(1, 1, 22000, '£22,000');
data.setCell(1, 2, -7.3, '-7.3%');
data.setCell(1, 3, false);
data.setCell(2, 0, 'Toys');
data.setCell(2, 1, 4000, '£4,000');
data.setCell(2, 2, 0, '0%');
data.setCell(2, 3, false);
data.setCell(3, 0, 'Electronics');
data.setCell(3, 1, 31000, '£31,000');
data.setCell(3, 2, -2.1, '-2.1%');
data.setCell(3, 3, false);
data.setCell(4, 0, 'Food');
data.setCell(4, 1, 80000, '£8,000');
data.setCell(4, 2, 22, '22.0%');
data.setCell(4, 3, true);
var table = new google.visualization.Table(document.getElementById('arrowformat_div'));
var formatter = new google.visualization.TableArrowFormat();
formatter.format(data, 2); // Apply formatter to third column
table.draw(data, {allowHtml: true, showRowNumber: true, alternatingRowStyle: true});
}
</script>
</head>
<body>
<div id="arrowformat_div"></div>
</body>
</html>
[[/code]]
[[/collapsible]]
[[iframe http://hobstarcs.wikidot.com/sand-box-code3-one-test-code-only/code/1 frameborder="0" scrolling="no" width="425px" height="200px"]]
(account deleted)Get into your problem:
Testing this code, it comes up with 'No valid code block found', but when I use the iframe that was supplied with the example, it works?!
HobStarCS, actually you must use iframe syntax to view the HTML code that created at
http://hobstarcs.wikidot.com/sand-box-code3-one-test-code-only/code/1
BUT before the HTML code created, first, you must save the page that you created at
http://hobstarcs.wikidot.com/sand-box-code3-one-test-code-only
you can't just preview that page, you must save that page in the first place. After the page is saved, you can preview that page correctly, do not just press preview when editing the page contained iframe syntax that point to URL at the page you edited.
Thanks for getting me started.
That page now works, but I have now moved this code to here (http://hobstarcs.wikidot.com/hscs:software) and even though I have saved it, (http://hobstarcs.wikidot.com/hscs:software/code/1) displays a blank page.
I have modified the code to exclude;
// var formatter = new google.visualization.TableArrowFormat();
// formatter.format(data, 2); // Apply formatter to third column
but I would not think that that would make a difference??
Unfortunatly I do not have any HTML skill.
It will be a few hours before I can properly address this as I am tied up with something else for the moment and then have to go to hospital for an assessment on my broken wrist, hand and thumb. But I have some initial comments below. Forgive me if I reproduce your code here:
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["table"]}); google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Logo'); data.addColumn('string', 'Software'); data.addColumn('string', 'Category'); data.addColumn('string', 'Pay 4 More?'); data.addColumn('string', 'Description'); data.addColumn('string', 'My Comments'); data.addColumn('string', 'IMPORTANT NOTE'); data.addColumn('number', 'My Rating'); data.addColumn('string', 'Detailed Review/ Instructions'); data.addColumn('string', 'Home Page'); data.addColumn('string', 'Download Link'); data.addRows(2); data.setCell(0, 0, 'Coming Soon'); data.setCell(0, 1, '7-Zip 4.57'); data.setCell(0, 2, 'File System'); data.setCell(0, 3, 'No'); data.setCell(0, 4, 'Archive files, full featured, all types of archive files'); data.setCell(0, 5, 'Perfect for beginners or advanced'); data.setCell(0, 6, 'Coming Soon'); data.setCell(0, 7, 'None' data.setCell(0, 8, 0/0, '8/10'); data.setCell(0, 9, '[*http://www.7-zip.org/ 7-Zip]'); data.setCell(0, 10, '[*http://downloads.sourceforge.net/sevenzip/7z465.exe Sourceforge.net]'); data.setCell(1, 0, 'Coming Soon'); data.setCell(1, 1, 'Ad-Aware'); data.setCell(1, 2, 'PC Protection'); data.setCell(1, 3, 'Yes'); data.setCell(1, 4, 'Real-time protection against spyware, trojans and more'); data.setCell(1, 5, 'Perfect for beginners or advanced'); data.setCell(1, 6, 'Coming Soon'); data.setCell(1, 7, 'To keep your PC clean see also; AVG, SpyBot' data.setCell(1, 8, 0/0, '8/10'); data.setCell(1, 9, '[*http://www.lavasoft.com/products/ad_aware_free.php Ad-Aware]'); data.setCell(1, 10, '[*http://dw.com.com/redir?edId=3&siteId=4&oId=3000-8022_4-10045910&ontId=8022_4&spi=3899ce51f1528a22213cf504829c82a7&lop=link&tag=tdw_dltext<ype=dl_dlnow&pid=10998841&mfgId=69274&merId=69274&pguid=TwGkigoPjAMAACONoIEAAACj&destUrl=http%3A%2F%2Fdownload.cnet.com%2F3001-8022_4-10045910.html%3Fspi%3D3899ce51f1528a22213cf504829c82a7%26part%3Ddl-ad-aware Cnet.com]'); var table = new google.visualization.Table(document.getElementById('arrowformat_div')); var formatter = new google.visualization.TableArrowFormat(); formatter.format(data, 2); // Apply formatter to third column table.draw(data, {allowHtml: true, showRowNumber: true, alternatingRowStyle: true}); } </script> </head> <body> <div id="arrowformat_div"></div> </body> </html>
Google visualisations, I have learnt, are a pain and need to be 100% right to work, yet they can be tricky to debug;
1. The arrow format won't work because none of your columns are ticks or crosses; The format for a tick/cross colmn should be data.addColumn('boolean', 'Staff Bonus') for example;
2. data.setCell(0, 7, 'None' has no closing bracket or semi colon;
3. data.setCell(1, 7, 'To keep your PC clean see also; AVG, SpyBot' has no closing bracket or semi colon;
When you make changes to the table syntax and save your wiki page, clear your browser cache;
Thos are the things I have picked up for now. I'll try to post the correct code a bit later.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Hi Rob !
Bad message !
What has happened to your hand?
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 ?
About 5 weeks ago I was pulling a tree across my garden that I'd just cut down and I slipped on wet grass. A silly accident but a bad break!
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Hi Rob, I'm use your method and produce correct code:
[!--
[[code type="html"]]
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Logo');
data.addColumn('string', 'Software');
data.addColumn('string', 'Category');
data.addColumn('string', 'Pay 4 More?');
data.addColumn('string', 'Description');
data.addColumn('string', 'My Comments');
data.addColumn('string', 'IMPORTANT NOTE');
data.addColumn('string', 'My Rating');
data.addColumn('number', 'Detailed Review/ Instructions');
data.addColumn('string', 'Home Page');
data.addColumn('string', 'Download Link');
data.addRows(2);
data.setCell(0, 0, 'Coming Soon');
data.setCell(0, 1, '7-Zip 4.57');
data.setCell(0, 2, 'File System');
data.setCell(0, 3, 'No');
data.setCell(0, 4, 'Archive files, full featured, all types of archive files');
data.setCell(0, 5, 'Perfect for beginners or advanced');
data.setCell(0, 6, 'Coming Soon');
data.setCell(0, 7, 'None');
data.setCell(0, 8, 0.8, '8/10');
data.setCell(0, 9, 'http://www.7-zip.org/');
data.setCell(0, 10, 'http://downloads.sourceforge.net/sevenzip/7z465.exe');
data.setCell(1, 0, 'Coming Soon');
data.setCell(1, 1, 'Ad-Aware');
data.setCell(1, 2, 'PC Protection');
data.setCell(1, 3, 'Yes');
data.setCell(1, 4, 'Real-time protection against spyware, trojans and more');
data.setCell(1, 5, 'Perfect for beginners or advanced');
data.setCell(1, 6, 'Coming Soon');
data.setCell(1, 7, 'To keep your PC clean see also; AVG, SpyBot');
data.setCell(1, 8, 0.8, '8/10');
data.setCell(1, 9, 'http://www.lavasoft.com/products/ad_aware_free.php');
data.setCell(1, 10, 'http://dw.com.com/redir?edId=3&siteId=4&oId=3000-8022_4-10045910&ontId=8022_4&spi=3899ce51f1528a22213cf504829c82a7&lop=link&tag=tdw_dltext<ype=dl_dlnow&pid=10998841&mfgId=69274&merId=69274&pguid=TwGkigoPjAMAACONoIEAAACj&destUrl=http%3A%2F%2Fdownload.cnet.com%2F3001-8022_4-10045910.html%3Fspi%3D3899ce51f1528a22213cf504829c82a7%26part%3Ddl-ad-aware');
var table = new google.visualization.Table(document.getElementById('arrowformat_div'));
table.draw(data, {allowHtml: true, showRowNumber: true, alternatingRowStyle: true});
}
</script>
</head>
<body>
<div id="arrowformat_div"></div>
</body>
</html>
[[/code]]
--]
Don't forget to add iframe! But, I don't know to make link to be a link, sorry.
Oh yeah Rob, I hope you get better soon!
Well done Ivan, once those changes had been made it works well (I have it working plus a few other google visualisations here).
HobstarCS,you'll need to be careful with so many columns that you don't force the user to scroll left and right which is a bit of a no-no from a usability perspective.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Thanks heaps Rob, I hope that all is going to be ok with your wrist!!!
Ok, I removed the section of code for the ticks and crosses (correctly I think), and included the missing characters. Not sure if there are too many/ few </script>'s.
Still produces a completely blank result.
Current code:
[[collapsible show=" " hide="Hide"]]
[[code type="html"]]
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Logo');
data.addColumn('string', 'Software');
data.addColumn('string', 'Category');
data.addColumn('string', 'Pay 4 More?');
data.addColumn('string', 'Description');
data.addColumn('string', 'My Comments');
data.addColumn('string', 'IMPORTANT NOTE');
data.addColumn('number', 'My Rating');
data.addColumn('string', 'Detailed Review/ Instructions');
data.addColumn('string', 'Home Page');
data.addColumn('string', 'Download Link');
data.addRows(2);
data.setCell(0, 0, 'Coming Soon');
data.setCell(0, 1, '7-Zip 4.57');
data.setCell(0, 2, 'File System');
data.setCell(0, 3, 'No');
data.setCell(0, 4, 'Archive files, full featured, all types of archive files');
data.setCell(0, 5, 'Perfect for beginners or advanced');
data.setCell(0, 6, 'Coming Soon');
data.setCell(0, 7, 'None');
data.setCell(0, 8, 00, '8/10');
data.setCell(0, 9, '[*http://www.7-zip.org/ 7-Zip]');
data.setCell(0, 10, '[*http://downloads.sourceforge.net/sevenzip/7z465.exe Sourceforge.net]');
data.setCell(1, 0, 'Coming Soon');
data.setCell(1, 1, 'Ad-Aware');
data.setCell(1, 2, 'PC Protection');
data.setCell(1, 3, 'Yes');
data.setCell(1, 4, 'Real-time protection against spyware, trojans and more');
data.setCell(1, 5, 'Perfect for beginners or advanced');
data.setCell(1, 6, 'Coming Soon');
data.setCell(1, 7, 'To keep your PC clean see also; AVG, SpyBot');
data.setCell(1, 8, 00, '8/10');
data.setCell(1, 9, '[*http://www.lavasoft.com/products/ad_aware_free.php Ad-Aware]');
data.setCell(1, 10, '[*http://dw.com.com/redir?edId=3&siteId=4&oId=3000-8022_4-10045910&ontId=8022_4&spi=3899ce51f1528a22213cf504829c82a7&lop=link&tag=tdw_dltext<ype=dl_dlnow&pid=10998841&mfgId=69274&merId=69274&pguid=TwGkigoPjAMAACONoIEAAACj&destUrl=http%3A%2F%2Fdownload.cnet.com%2F3001-8022_4-10045910.html%3Fspi%3D3899ce51f1528a22213cf504829c82a7%26part%3Ddl-ad-aware Cnet.com]');
table.draw(data, {allowHtml: true, showRowNumber: true, alternatingRowStyle: true});
}
</script>
</head>
<body>
<div id="arrowformat_div"></div>
</body>
</html>
[[/code]]
[[/collapsible]]
[[iframe http://hobstarcs.wikidot.com/hscs:software/code/1 frameborder="0" scrolling="no" width="425px" height="200px"]]
I've not seen a way to include a link in a table and it doesn't seem to be in the api documentation.
By the way, a couple of interesting sites to look at to see how more examples of google visualisations are at:
http://code.google.com/apis/ajax/playground/?type=visualization
http://code.google.com/apis/visualization/documentation/gallery.html
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Make sure you have deleted your browser cache and done a refresh. Check the code on http://strathviewconsultants.wikidot.com/support:google - your table is working at the bottom of the page. Look at the options->view source for the full code.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Have viewed your site, can see the working product, but can not see "options->view source for the full code."
I'll have to have a think about the links (another way to do it) and thanks for the links!!!
I've not seen a way to include a link in a table and it doesn't seem to be in the api documentation.
Try this:
data.setCell(0, 0, '<a href="http://www.wikidot.com/" target="_parent">Wikidot.com</a>');
Thanks Gerdami, I will try that code, as soon as I get the table working, ha ha ha *shakes head*
HTML noob question; what does " target="_parent" do?
EDIT
Alos, running Firefox 3, did tools, options, privacy tab, [clear now] ticked only 'cashe', [clear private data now] and then [ok]. That should do the job, yes? Still no result. :(
Gerdami's solution doesn't work for me.
Sorry, I had forgotten I have turned off the display of the options buttons at the bottom. The full code from my page, including in one line Gerdami's link code, is:
[!--
[[code type="html"]]
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Logo');
data.addColumn('string', 'Software');
data.addColumn('string', 'Category');
data.addColumn('string', 'Pay 4 More?');
data.addColumn('string', 'Description');
data.addColumn('string', 'My Comments');
data.addColumn('string', 'IMPORTANT NOTE');
data.addColumn('string', 'My Rating');
data.addColumn('number', 'Detailed Review/ Instructions');
data.addColumn('string', 'Home Page');
data.addColumn('string', 'Download Link');
data.addRows(2);
data.setCell(0, 0, 'Coming Soon');
data.setCell(0, 1, '7-Zip 4.57');
data.setCell(0, 2, 'File System');
data.setCell(0, 3, 'No');
data.setCell(0, 4, 'Archive files, full featured, all types of archive files');
data.setCell(0, 5, 'Perfect for beginners or advanced');
data.setCell(0, 6, 'Coming Soon');
data.setCell(0, 7, 'None');
data.setCell(0, 8, 0.8, '8/10');
data.setCell(0, 9, 'http://www.7-zip.org/');
data.setCell(0, 10, 'http://downloads.sourceforge.net/sevenzip/7z465.exe');
data.setCell(1, 0, 'Coming Soon');
data.setCell(1, 1, 'Ad-Aware');
data.setCell(1, 2, 'PC Protection');
data.setCell(1, 3, 'Yes');
data.setCell(1, 4, 'Real-time protection against spyware, trojans and more');
data.setCell(1, 5, 'Perfect for beginners or advanced');
data.setCell(1, 6, 'Coming Soon');
data.setCell(1, 7, 'To keep your PC clean see also; AVG, SpyBot');
data.setCell(1, 8, 0.8, '8/10');
data.setCell(1, 9, '<a href="http://www.lavasoft.com/products/ad_aware_free.php" target="_parent">Lavasoft.com</a>');
data.setCell(1, 10, 'http://dw.com.com/redir?edId=3&siteId=4&oId=3000-8022_4-10045910&ontId=8022_4&spi=3899ce51f1528a22213cf504829c82a7&lop=link&tag=tdw_dltext<ype=dl_dlnow&pid=10998841&mfgId=69274&merId=69274&pguid=TwGkigoPjAMAACONoIEAAACj&destUrl=http%3A%2F%2Fdownload.cnet.com%2F3001-8022_4-10045910.html%3Fspi%3D3899ce51f1528a22213cf504829c82a7%26part%3Ddl-ad-aware');
var table = new google.visualization.Table(document.getElementById('arrowformat_div'));
table.draw(data, {allowHtml: true, showRowNumber: true, alternatingRowStyle: true});
}
</script>
</head>
<body>
<div id="arrowformat_div"></div>
</body>
</html>
[[/code]]
--]
[[iframe http://strathviewconsultants.wikidot.com/support:google/code/11 frameborder="0" scrolling="yes" width="100%" height="300px"]]
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
[[iframe http://community.wikidot.com/test:sortable-tables/code/1 width="99%" height="300" frameborder="0"]]
@HobStarCS
HTML noob question; what does " target="_parent" do?
"target=_parent" is necessary otherwise link will be opened inside the iframe window.
EDIT (Helmuti_pdorf) : you will find the code on the page: http://community.wikidot.com/test:sortable-tables
Thanks Gerdami, the links are working. I didn't follow my own advice and forgot to clear the cache, doh!
HobstarCS: yes, that is the way to clear the cache.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Full reference here: http://code.google.com/apis/visualization/documentation/reference.html
Interesting:
how to combine data from two columns to create an email address
| Name | |
|---|---|
| John Lennon | john@beatles.co.uk |
| John Lennon |
Thanks to ALL!!! =D
It works.
Is there any way to force it to fit the width of the screen (like http://hobstarcs.wikidot.com/pc-software)?
Regards
Paul
I have decided to shorten my list (number of columns) so that it will just fit nicly.
Could I include code like this?;
<p style="text-align: center;">
All text in here will be centered
</p>
So that all my text is centered? OR just a section, e.g. "My Rating"
Probably the easiest way of doing this is to add the following to your custom CSS:
.google-visualization-table-td {
text-align:center;
}
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
By adding one or more of the following selectors to your custom CSS and then applying various border, background-color, color etc properties you can make the google visualization table blend better with your site.
.google-visualization-table-table
.google-visualization-table-th
.google-visualization-table-tr-even
.google-visualization-table-tr-odd
.google-visualization-table-td
.google-visualization-table-seq (this is for the row numbers)
.google-visualization-table-tr-sel after selecting a row
There are some m ore complex ones as well but these seem to be the core ones.
In fact this does not work as the css is imported at the time the table is drawn and overrides your own CSS. Even using !Important in your custom CSS does not work. A subsequent search on the goo le vis forum indicates that custom CSS is not yet possible.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Hmmm, looks like I need to 'up' my CSS studies (from none to a heck load).
For now, I am happy to change my table so that it fits better.
A BIG thanks to everyone that has helped me with this one. Since starting my Wiki I have found that everyone on the forums is very helpful and has made my experience very enjoyable.
Warm Regards,
Paul Hobby
Hmmm, looks like I need to 'up' my CSS studies (from none to a heck load).
Paul, if you use Firefox one free addon that several of us strongly recommend is Firebug. It will help you learn the structure and CSS elements of your site and more generally will help you gain a knowledge of CSS. It allows you to test changes on the fly to see what the result will look like without affecting the actual underlying CSS. It is now the one development tool that I would not wish to be without.
Given that you will be offering website design as one of your services I think a knowledge of CSS will prove necessary. It also makes changing your sites a) possible and b) quite fun (if you like that sort of thing).
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Ha, ha!, Yes, thanks Rhombus! :) You'd better watch out! I'll get good and be able to do it myself VERY soon, and then I'll have no further need for your help ;p
But seriously, thanks to everyone and especially Rhombus for all your help in the this and other matters.
Warm Regards,
Paul
Hi all, I seem to have broken the code again. I have gone through a found a few spare apostrophes which I removed but can not see what else I have buggered up. Any thoughts?
I have cleared the cache and re-loaded the page. Note, I have changed the iframe to my page, shortened the list of columns and added toc href links.
[[collapsible show=" " hide="Hide"]]
[[code type="html"]]
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Software');
data.addColumn('string', 'Category');
data.addColumn('string', 'Pay 4 More?');
data.addColumn('string', 'Description');
data.addColumn('string', 'My Comments');
data.addColumn('string', 'IMPORTANT NOTE');
data.addColumn('number', 'My Rating');
data.addColumn('string', 'Detailed Review & Links');
data.addRows(2);
data.setCell(0, 0, '7-Zip');
data.setCell(0, 1, 'File System');
data.setCell(0, 2, ‘No’);
data.setCell(0, 3, 'Archive files, full featured, all types of archive files');
data.setCell(0, 4, 'Perfect for beginners or advanced');
data.setCell(0, 5, ‘None’);
data.setCell(0, 6, 0.8, '8/10');
data.setCell(0, 7, '<a href="http://hobstarcs.wikidot.com/hscs:software#toc0" target="_parent">7-Zip Details</a>');
data.setCell(1, 0, 'Ad-Aware');
data.setCell(1, 1, 'PC Protection');
data.setCell(1, 2, 'Yes');
data.setCell(1, 3, 'Real-time protection against spyware, trojans and more');
data.setCell(1, 4, 'Perfect for beginners or advanced');
data.setCell(1, 5, 'Free does the job fine, to keep your PC clean see also; AVG & SpyBot ');
data.setCell(1, 6, 0.8, '8/10');
data.setCell(1, 7, '<a href="http://hobstarcs.wikidot.com/hscs:software#toc1" target="_parent">Ad-Aware Details</a>');
var table = new google.visualization.Table(document.getElementById('arrowformat_div'));
table.draw(data, {allowHtml: true, showRowNumber: true, alternatingRowStyle: true});
}
</script>
</head>
[[/code]]
[[/collapsible]]
[[iframe http://hobstarcs.wikidot.com/hscs:software/code/1 frameborder="0" scrolling="yes" width="100%" height="600px"]]
[[f>toc]]
+ 7Zip
fddfhdfh
+ Ad-Aware
momormrorm
The errors in the code were:
- you'd taken out the <body> </body> part which is necessary as even though you are not using the arrows in your formatting, arrow format had been referred to in the head section and it was expecting it in the body section. You can't just remove the reference to arrowformat in the head and then remove the body section, it is expecting something in both sections.
- you omitted the </html> closing tag.
- data.setCell(0, 2, ‘No’); you have used incorrect apostrophes around the word No.
- data.setCell(0, 5, ‘None’); same apostrophe problem as above.
I spotted the first two problems in a few seconds but then had to copy your code line by line into a table I knew was working before I noticed the strange apostrophes. These visualisations really can be tricky can't they.
The correct code should therefore be:
[!--
[[code type="html"]]
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["table"]});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Software');
data.addColumn('string', 'Category');
data.addColumn('string', 'Pay 4 More?');
data.addColumn('string', 'Description');
data.addColumn('string', 'My Comments');
data.addColumn('string', 'IMPORTANT NOTE');
data.addColumn('number', 'My Rating');
data.addColumn('string', 'Detailed Review & Links');
data.addRows(2);
data.setCell(0, 0, '7-Zip');
data.setCell(0, 1, 'File System');
data.setCell(0, 2, 'No');
data.setCell(0, 3, 'Archive files, full featured, all types of archive files');
data.setCell(0, 4, 'Perfect for beginners or advanced');
data.setCell(0, 5, 'None');
data.setCell(0, 6, 0.8, '8/10');
data.setCell(0, 7, '<a href="http://hobstarcs.wikidot.com/hscs:software#toc0" target="_parent">7-Zip Details</a>');
data.setCell(1, 0, 'Ad-Aware');
data.setCell(1, 1, 'PC Protection');
data.setCell(1, 2, 'Yes');
data.setCell(1, 3, 'Real-time protection against spyware, trojans and more');
data.setCell(1, 4, 'Perfect for beginners or advanced');
data.setCell(1, 5, 'Free does the job fine, to keep your PC clean see also; AVG & SpyBot ');
data.setCell(1, 6, 0.8, '8/10');
data.setCell(1, 7, '<a href="http://hobstarcs.wikidot.com/hscs:software#toc1" target="_parent">Ad-Aware Details</a>');
var table = new google.visualization.Table(document.getElementById('arrowformat_div'));
table.draw(data, {allowHtml: true, showRowNumber: true, alternatingRowStyle: true, width: '500px'});
}
</script>
</head>
<body>
<div id="arrowformat_div"></div>
</body>
</html>
[[/code]]
--]
[[iframe http://hobstarcs.wikidot.com/hscs:software/code/1 frameborder="0" scrolling="yes" width="100%" height="300px"]]
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Thanks Rob,
How do you have "incorrect apostrophes"?
Code works 100%
Yes it's strange, but you can see the difference between the "incorrect" ones and the "correct" ones. And it's enough to stop it working.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
Paul, just a quick tip. I've noticed on the page of your site where you've put the table that you are using [[collapsible]] [[ /collapsible]] tags around the code. Unless you specifically have a need to show the code you can use instead the comment tags [!-- --] as I did above which do exactly the same job of hiding the code but without letting someone looking at your page view the codeblock.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development. For community groups, villages, charities, business and government.
/forum/t-129992/sortable-tables#post-
