Sortable Tables

Posted by RobElliott on 12 Feb 2009 21:37, last edited by GoVegan on 09 May 2010 06:01

: excel google javascript sort sortable table

rating: +15

At the time of writing this how-to (February 2009) the native wikidot syntax does not have a way to create tables which are sortable by clicking on the header of a column. The javascript solution here enables you to add a sortable table to your wiki without the need to embed external content. It does, however, require you to use html code and an iframe which is described below.

The code uses google's visualization api but does not require you to register or obtain an api key.

[フレーム]

Click on the column headings in the table below to sort on that column:

The full HTML code

Appearing below is the full code to enter in your wiki page. Make sure you change the address in the iframe to your wiki.

[[collapsible show=" " hide="Hide"]]
[[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>
[[/html]]
[[/collapsible]]

Breakdown of the Code

So you know what each of the elements in the above code means we will break it down.

As with all html code we don't usually want to see it so it can go inside collapsible tags. We then add the [[html]] to denote the start of the html code.

After that there is the html and initial javascript code and you will see that it goes inside the html head tag:

[[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();


Now add the column headings. You set the datatype as string, number or boolean (true/false) and give the column a title: 
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenue');
data.addColumn('number', 'Change');
data.addColumn('boolean', 'Staff Bonus');

Now add the number of rows you want in your table (note: this solution does not dynamically add rows or columns, you must specify the number in advance):

data.addRows(5);

The next stage is to add the data in the table cells. Make sure you use the same datatype you specified in the column header. The format of identifying the cell is row,column with the first row being 0 and the first column being 0. You will see that when enterig numbers you enter both the number and the formatted number. For a boolean column if you specify it as true it will put a tick/check in the cell, if you enter false it will put a cross in the cell. The first row (row 0) is shown below:

data.setCell(0, 0, 'Shoes');
data.setCell(0, 1, 10000, '10,000ドル');
data.setCell(0, 2, 12, '12.0%');
data.setCell(0, 3, true);

and the following rows (Rows 1, 2, 3 and 4) are:

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);

The next section of javascript is needed to setup the table, to apply the arrow format in the third column and to style the table. In this example we are showing row numbers, allow custom formatters and have alternate shading on rows:

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>
[[/html]]

Excel utility to generate this stuff

ExcelToGoogleTable.xls

Links

There are many options, parameters and table styles that you can use. The full description of what can be achieved with Google's Visualization API is at http://code.google.com/apis/visualization/documentation/gallery/table.html#Overview

Author

RobElliott RobElliott . Please visit his/her userPage.

Rate this solution

If you think this solution is useful, please rate it up.

rating: +15
page 1 of 21
Very Cool!
(account deleted) 12 Feb 2009 22:53

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

by (account deleted), 12 Feb 2009 22:53
dam useful
Phil Chett Phil Chett 12 Feb 2009 23:52

thanks Rob, this could be very useful.

Last edited on 13 Feb 2009 17:07 by Phil Chett
by Phil Chett Phil Chett , 12 Feb 2009 23:52
Re: dam useful
Helmut_pdorf Helmut_pdorf 15 Feb 2009 12:32

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 ?

by Helmut_pdorf Helmut_pdorf , 15 Feb 2009 12:32
Excel utility to generate this stuff
Phil Chett Phil Chett 18 Feb 2009 19:48

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.

Last edited on 18 Feb 2009 23:22 by gerdami
by Phil Chett Phil Chett , 18 Feb 2009 19:48
Re: Excel utility to generate this stuff
gerdami gerdami 18 Feb 2009 23:32

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.

Last edited on 20 Feb 2009 07:02 by gerdami
by gerdami gerdami , 18 Feb 2009 23:32
Re: Excel utility to generate this stuff
(account deleted) 20 Feb 2009 03:43

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:

sortable_table.jpg

No problems from other PCs I use:

sortable_table2.jpg

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

by (account deleted), 20 Feb 2009 03:43
Re: Excel utility and quotes
gerdami gerdami 20 Feb 2009 06:58

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.

Last edited on 20 Feb 2009 07:03 by gerdami
by gerdami gerdami , 20 Feb 2009 06:58
Need a little help please
HobStarCS HobStarCS 28 May 2009 00:18

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"]]
by HobStarCS HobStarCS , 28 May 2009 00:18
Re: Need a little help please
(account deleted) 28 May 2009 01:52

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.

by (account deleted), 28 May 2009 01:52
Re: Need a little help please
HobStarCS HobStarCS 28 May 2009 05:37

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.

by HobStarCS HobStarCS , 28 May 2009 05:37
Re: Need a little help please
RobElliott RobElliott 28 May 2009 06:36

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><scripttype="text/javascript"src="http://www.google.com/jsapi"></script><scripttype="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&ltype=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><divid="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.

Last edited on 28 May 2009 06:43 by RobElliott
by RobElliott RobElliott , 28 May 2009 06:36
Re: Need a little help please
Helmut_pdorf Helmut_pdorf 28 May 2009 06:50

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 ?

by Helmut_pdorf Helmut_pdorf , 28 May 2009 06:50
Re: Need a little help please
RobElliott RobElliott 28 May 2009 07:00

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.

by RobElliott RobElliott , 28 May 2009 07:00
Re: Need a little help please
(account deleted) 28 May 2009 07:01

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&ltype=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!

Last edited on 28 May 2009 07:02 by (account deleted)
by (account deleted), 28 May 2009 07:01
Re: Need a little help please
RobElliott RobElliott 28 May 2009 07:16

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.

Last edited on 28 May 2009 08:17 by RobElliott
by RobElliott RobElliott , 28 May 2009 07:16
Re: Need a little help please
HobStarCS HobStarCS 28 May 2009 08:33

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&ltype=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"]]
by HobStarCS HobStarCS , 28 May 2009 08:33
Re: Need a little help please
RobElliott RobElliott 28 May 2009 08:36

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.

by RobElliott RobElliott , 28 May 2009 08:36
Re: Need a little help please
RobElliott RobElliott 28 May 2009 08:39

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.

Last edited on 28 May 2009 08:41 by RobElliott
by RobElliott RobElliott , 28 May 2009 08:39
Re: Need a little help please
HobStarCS HobStarCS 28 May 2009 10:50

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

by HobStarCS HobStarCS , 28 May 2009 10:50
Re: Need a little help please
gerdami gerdami 28 May 2009 10:53

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>');

by gerdami gerdami , 28 May 2009 10:53
Re: Need a little help please
HobStarCS HobStarCS 28 May 2009 11:05

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. :(

Last edited on 28 May 2009 11:07 by HobStarCS
by HobStarCS HobStarCS , 28 May 2009 11:05
Re: Need a little help please
RobElliott RobElliott 28 May 2009 12:39

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&ltype=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.

by RobElliott RobElliott , 28 May 2009 12:39
Re: Need a little help please
gerdami gerdami 28 May 2009 12:57

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

Last edited on 28 May 2009 13:16 by Helmut_pdorf
by gerdami gerdami , 28 May 2009 12:57
Re: Need a little help please
RobElliott RobElliott 28 May 2009 13:03

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.

Last edited on 28 May 2009 13:04 by RobElliott
by RobElliott RobElliott , 28 May 2009 13:03
Re: Need a little help please
gerdami gerdami 28 May 2009 21:38

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 Email
John Lennon john@beatles.co.uk
Mail
John Lennon
by gerdami gerdami , 28 May 2009 21:38
HobStarCS HobStarCS 28 May 2009 13:34

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

by HobStarCS HobStarCS , 28 May 2009 13:34
Re:
HobStarCS HobStarCS 29 May 2009 03:11

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"

by HobStarCS HobStarCS , 29 May 2009 03:11
Re:
RobElliott RobElliott 29 May 2009 07:20

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.

by RobElliott RobElliott , 29 May 2009 07:20
Re:
RobElliott RobElliott 29 May 2009 08:35

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.

Last edited on 09 Jun 2009 11:19 by RobElliott
by RobElliott RobElliott , 29 May 2009 08:35
HobStarCS HobStarCS 29 May 2009 09:17

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

by HobStarCS HobStarCS , 29 May 2009 09:17
Re:
RobElliott RobElliott 29 May 2009 15:38

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.

Last edited on 29 May 2009 18:27 by RobElliott
by RobElliott RobElliott , 29 May 2009 15:38
Re:
HobStarCS HobStarCS 29 May 2009 23:14

Thanks Rob

Downloading now, also looking up some literature on CSS and have ordered a book from the library.

Paul

by HobStarCS HobStarCS , 29 May 2009 23:14
Re:
rhombus p rhombus p 30 May 2009 01:54

yes, i recommend it to. i use it a lot when working on my sites CSS and sometimes even when im working on your CSS!! ;D

Rhombus_Productions-3Blackn.png
by rhombus p rhombus p , 30 May 2009 01:54
Re:
HobStarCS HobStarCS 30 May 2009 11:45

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

Last edited on 30 May 2009 11:47 by HobStarCS
by HobStarCS HobStarCS , 30 May 2009 11:45
Re:
rhombus p rhombus p 30 May 2009 13:56

ha lol, well if you need any help with CSS, me and this whole community is always there :D

Rhombus_Productions-3Blackn.png
Last edited on 30 May 2009 13:57 by rhombus p
by rhombus p rhombus p , 30 May 2009 13:56
HobStarCS HobStarCS 31 May 2009 01:03

Much appreciated.
~©¿©~
U

by HobStarCS HobStarCS , 31 May 2009 01:03
I seem to have broken it again! :(
HobStarCS HobStarCS 31 May 2009 04:44

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
by HobStarCS HobStarCS , 31 May 2009 04:44
Re: I seem to have broken it again! :(
RobElliott RobElliott 31 May 2009 08:01

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.

Last edited on 18 May 2010 16:58 by RobElliott
by RobElliott RobElliott , 31 May 2009 08:01
HobStarCS HobStarCS 31 May 2009 08:27

Thanks Rob,

How do you have "incorrect apostrophes"?

Code works 100%

by HobStarCS HobStarCS , 31 May 2009 08:27
Re:
RobElliott RobElliott 31 May 2009 08:36

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.

by RobElliott RobElliott , 31 May 2009 08:36
Re:
RobElliott RobElliott 31 May 2009 09:38

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.

by RobElliott RobElliott , 31 May 2009 09:38
Re:
HobStarCS HobStarCS 31 May 2009 22:31

Good tip. Ta

by HobStarCS HobStarCS , 31 May 2009 22:31
page 1 of 21

Related articles

Comments

page 1 of 21
Very Cool!
(account deleted) 12 Feb 2009 22:53

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

by (account deleted), 12 Feb 2009 22:53
dam useful
Phil Chett Phil Chett 12 Feb 2009 23:52

thanks Rob, this could be very useful.

Last edited on 13 Feb 2009 17:07 by Phil Chett
by Phil Chett Phil Chett , 12 Feb 2009 23:52
Re: dam useful
Helmut_pdorf Helmut_pdorf 15 Feb 2009 12:32

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 ?

by Helmut_pdorf Helmut_pdorf , 15 Feb 2009 12:32
Excel utility to generate this stuff
Phil Chett Phil Chett 18 Feb 2009 19:48

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.

Last edited on 18 Feb 2009 23:22 by gerdami
by Phil Chett Phil Chett , 18 Feb 2009 19:48
Re: Excel utility to generate this stuff
gerdami gerdami 18 Feb 2009 23:32

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.

Last edited on 20 Feb 2009 07:02 by gerdami
by gerdami gerdami , 18 Feb 2009 23:32
Re: Excel utility to generate this stuff
(account deleted) 20 Feb 2009 03:43

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:

sortable_table.jpg

No problems from other PCs I use:

sortable_table2.jpg

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

by (account deleted), 20 Feb 2009 03:43
Re: Excel utility and quotes
gerdami gerdami 20 Feb 2009 06:58

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.

Last edited on 20 Feb 2009 07:03 by gerdami
by gerdami gerdami , 20 Feb 2009 06:58
Need a little help please
HobStarCS HobStarCS 28 May 2009 00:18

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"]]
by HobStarCS HobStarCS , 28 May 2009 00:18
Re: Need a little help please
(account deleted) 28 May 2009 01:52

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.

by (account deleted), 28 May 2009 01:52
Re: Need a little help please
HobStarCS HobStarCS 28 May 2009 05:37

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.

by HobStarCS HobStarCS , 28 May 2009 05:37
Re: Need a little help please
RobElliott RobElliott 28 May 2009 06:36

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><scripttype="text/javascript"src="http://www.google.com/jsapi"></script><scripttype="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&ltype=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><divid="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.

Last edited on 28 May 2009 06:43 by RobElliott
by RobElliott RobElliott , 28 May 2009 06:36
Re: Need a little help please
Helmut_pdorf Helmut_pdorf 28 May 2009 06:50

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 ?

by Helmut_pdorf Helmut_pdorf , 28 May 2009 06:50
Re: Need a little help please
RobElliott RobElliott 28 May 2009 07:00

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.

by RobElliott RobElliott , 28 May 2009 07:00
Re: Need a little help please
(account deleted) 28 May 2009 07:01

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&ltype=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!

Last edited on 28 May 2009 07:02 by (account deleted)
by (account deleted), 28 May 2009 07:01
Re: Need a little help please
RobElliott RobElliott 28 May 2009 07:16

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.

Last edited on 28 May 2009 08:17 by RobElliott
by RobElliott RobElliott , 28 May 2009 07:16
Re: Need a little help please
HobStarCS HobStarCS 28 May 2009 08:33

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&ltype=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"]]
by HobStarCS HobStarCS , 28 May 2009 08:33
Re: Need a little help please
RobElliott RobElliott 28 May 2009 08:36

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.

by RobElliott RobElliott , 28 May 2009 08:36
Re: Need a little help please
RobElliott RobElliott 28 May 2009 08:39

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.

Last edited on 28 May 2009 08:41 by RobElliott
by RobElliott RobElliott , 28 May 2009 08:39
Re: Need a little help please
HobStarCS HobStarCS 28 May 2009 10:50

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

by HobStarCS HobStarCS , 28 May 2009 10:50
Re: Need a little help please
gerdami gerdami 28 May 2009 10:53

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>');

by gerdami gerdami , 28 May 2009 10:53
Re: Need a little help please
HobStarCS HobStarCS 28 May 2009 11:05

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. :(

Last edited on 28 May 2009 11:07 by HobStarCS
by HobStarCS HobStarCS , 28 May 2009 11:05
Re: Need a little help please
RobElliott RobElliott 28 May 2009 12:39

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&ltype=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.

by RobElliott RobElliott , 28 May 2009 12:39
Re: Need a little help please
gerdami gerdami 28 May 2009 12:57

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

Last edited on 28 May 2009 13:16 by Helmut_pdorf
by gerdami gerdami , 28 May 2009 12:57
Re: Need a little help please
RobElliott RobElliott 28 May 2009 13:03

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.

Last edited on 28 May 2009 13:04 by RobElliott
by RobElliott RobElliott , 28 May 2009 13:03
Re: Need a little help please
gerdami gerdami 28 May 2009 21:38

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 Email
John Lennon john@beatles.co.uk
Mail
John Lennon
by gerdami gerdami , 28 May 2009 21:38
HobStarCS HobStarCS 28 May 2009 13:34

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

by HobStarCS HobStarCS , 28 May 2009 13:34
Re:
HobStarCS HobStarCS 29 May 2009 03:11

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"

by HobStarCS HobStarCS , 29 May 2009 03:11
Re:
RobElliott RobElliott 29 May 2009 07:20

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.

by RobElliott RobElliott , 29 May 2009 07:20
Re:
RobElliott RobElliott 29 May 2009 08:35

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.

Last edited on 09 Jun 2009 11:19 by RobElliott
by RobElliott RobElliott , 29 May 2009 08:35
HobStarCS HobStarCS 29 May 2009 09:17

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

by HobStarCS HobStarCS , 29 May 2009 09:17
Re:
RobElliott RobElliott 29 May 2009 15:38

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.

Last edited on 29 May 2009 18:27 by RobElliott
by RobElliott RobElliott , 29 May 2009 15:38
Re:
HobStarCS HobStarCS 29 May 2009 23:14

Thanks Rob

Downloading now, also looking up some literature on CSS and have ordered a book from the library.

Paul

by HobStarCS HobStarCS , 29 May 2009 23:14
Re:
rhombus p rhombus p 30 May 2009 01:54

yes, i recommend it to. i use it a lot when working on my sites CSS and sometimes even when im working on your CSS!! ;D

Rhombus_Productions-3Blackn.png
by rhombus p rhombus p , 30 May 2009 01:54
Re:
HobStarCS HobStarCS 30 May 2009 11:45

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

Last edited on 30 May 2009 11:47 by HobStarCS
by HobStarCS HobStarCS , 30 May 2009 11:45
Re:
rhombus p rhombus p 30 May 2009 13:56

ha lol, well if you need any help with CSS, me and this whole community is always there :D

Rhombus_Productions-3Blackn.png
Last edited on 30 May 2009 13:57 by rhombus p
by rhombus p rhombus p , 30 May 2009 13:56
HobStarCS HobStarCS 31 May 2009 01:03

Much appreciated.
~©¿©~
U

by HobStarCS HobStarCS , 31 May 2009 01:03
I seem to have broken it again! :(
HobStarCS HobStarCS 31 May 2009 04:44

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
by HobStarCS HobStarCS , 31 May 2009 04:44
Re: I seem to have broken it again! :(
RobElliott RobElliott 31 May 2009 08:01

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.

Last edited on 18 May 2010 16:58 by RobElliott
by RobElliott RobElliott , 31 May 2009 08:01
HobStarCS HobStarCS 31 May 2009 08:27

Thanks Rob,

How do you have "incorrect apostrophes"?

Code works 100%

by HobStarCS HobStarCS , 31 May 2009 08:27
Re:
RobElliott RobElliott 31 May 2009 08:36

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.

by RobElliott RobElliott , 31 May 2009 08:36
Re:
RobElliott RobElliott 31 May 2009 09:38

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.

by RobElliott RobElliott , 31 May 2009 09:38
Re:
HobStarCS HobStarCS 31 May 2009 22:31

Good tip. Ta

by HobStarCS HobStarCS , 31 May 2009 22:31
page 1 of 21
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.
Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).
Notify administrators if there is objectionable content in this page.
Something does not work as expected? Find out what you can do.
General Wikidot.com documentation and help section.
Wikidot.com Terms of Service - what you can, what you should not etc.
Wikidot.com Privacy Policy.

AltStyle によって変換されたページ (->オリジナル) /