Jeez Tech » Design

Google Visualizations From A To Z

Kerasiotis Vasileios — Mon, 19 Oct 2009 20:26:23 +0000

Google has released an API that you can use to create nifty visualizations for your webpages and applications. So basicaly it is an easy way to present data in ways like :

Piecharts

Barcharts

Radar Charts

and many more interesting ways.

So, lets see how we can use this great API to display our data in a more informative way. For demonstration purposes, we will create a simple page where some statistics will be presented using the API. The statistics will be pulled from a spreadsheet that we have previously uploaded to the Google Docs service with simple SQL like queries. The application will look like this:

We will be able to select the visualization type to use from the dropbox and the visualization will be displayed in the big white box.

Creating the Spreadsheet

Nothing special here. We will just create a simple spreadsheet with some fictional values. Then we will link this spreadsheet to our application.

Go to Google Docs and create a new spreadsheet. We will name it vistutorial and it will have 4 columns :

Name
Age
Salary
Programming Language

The spreadsheet will look like this:

Now we need to get the URL that we will use to our application. Select the cells you want to be visible, go to Insert->Gadget and select any gadget from the list. Any gadget will do. Click on the “Apply and Close” button and the gadget will be displayed in a floating window. On the upper right corner of the gadget window, you can see an arrow, click on it and select “get query data source url”. The URL to use in our application will be displayed. Copy this URL and note it somewhere.

Using Visualizations

All you need to use Google visualizations is to: load some JavaScript files provided by Google, create a Div layer in your page and draw the visualization. This can be better shown in a 1-2-3 steps example:

1) Load Libraries:

2) Create the visualization container:

3) Draw the visualization:

//Load the visualization library with the visualization packages that we will use
google.load('visualization', '1', {'packages':['piechart','table', 'linechart','motionchart','ImageChart','gauge']});
//Draw the piechart with our data
var chart = new google.visualization.PieChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340, is3D: true});

Implementing Visualizations to Our App

The first thing we need to do is to create our application’s layout.

HTML:


Google Visualization Tutorial

CSS:

#container{
 width:768px;
 margin:0 auto;
 padding:10px;
 background-color:#C9CFFF;
 min-height:500px;
}

select{
 width:200px;
 margin-right:100px;
}

#header{
 margin-bottom:30px;
}

#logo{
 float:right;
}

#vis_chart{
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border: 1px solid #000; padding: 10px;
 clear:both;
 background-color:white;
 min-height:400px;
}

On the first part, we are including the API library from Google, after that, we load the visualization library and we specify the packages we want to load:

google.load('visualization', '1', {'packages':['piechart','table', 'linechart','motionchart','ImageChart']});

We also assign a method to the change event of the select element. The function initialize is responsible for our data to be available to our application:

function initialize() {
 // Replace the data source URL on next line with your data source URL.
 var query = new google.visualization.Query('http://spreadsheets.google.com/tq?range=A1:D11&headers=-1&key=0AtbpzGdXYTjpdDdkUlNLcjV2ZWNZNUVveFZzdU05dmc&gid=0');

 // Send the query with a callback function.
 query.send(handleQueryResponse);
}

In order to use your spreadsheet with the function above, you should replace the URL provided with the one you got from your gadget.

We see that the initialize method, will do a :

query.send(handleQueryResponse);

This, tells us that the callback function that will handle the query response is handleQueryResponse which we will use to set the visualization to the one selected from the dropbox:

function handleQueryResponse(response) {
 var element = document.getElementById('visualization').value;
 if (response.isError()) {
 alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
 return;
 }
 var data = response.getDataTable();
 //first clear the visualization container
 document.getElementById('vis_chart').innerHTML = '';
 switch(element){
 case "Table":
 var chart = new google.visualization.Table(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340});
 break;
 case "PieChart":
 var chart = new google.visualization.PieChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340, is3D: true});
 break;
 case "LineChart":
 var chart = new google.visualization.LineChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340});
 break;
 case "MotionChart":
 var chart = new google.visualization.MotionChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340});
 break;
 case "ImageChart":
 var chart = new google.visualization.ImageChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340});
 break;
 }
}

This is it! Our application is able to get data from our spreadsheet and present it with the visualization of our choice. You can test the application at this stage and see how it works.

Using the Query language to get specific cells

The visualization API supports an SQL like query language that we can use to select, perform actions and data manipulation to our data. For example we could select data based on any cell of our spreadsheet. Lets try to extend our application so that it will be able to display data based on selective criteria. We will add a radio group that will “order” our application to display data by programming language.

The first thing to do is add the radio group:

Filter by:
 ASP
 C
 Java

 PHP
 Ruby
 VB

and the JavaScript function to handle the query:

function filter(){
 var element = document.getElementById('languageselect');
 for (var i=0; i
We set an optional query here:
query.setQuery("select * where D='"+lang+"'");
This selects all rows from our spreadsheet that the programming language (the D column) equals the language we chosen. For an example of this new feature you can check here.
Handling Events
You can handle events generated from user actions on your visualizations too. For example we can display the logo of the programming language the person codes in upon selection of a person. To handle events, we have to listen to the events generated by the visualization and handle the data. This can be done by doing this:
google.visualization.events.addListener(table, 'select', selectHandler);
The above code will add a listener to the select event of the table visualization and it will call the selectHandler method to handle the event. So, based on this line of code, lets add the feature described above (display language logo) to our application. We need a placeholder for our logo:

and we should also modify our handleQueryResponse method and add the listener to our visualization. Our function now looks like this:
function handleQueryResponse(response) {
 var element = document.getElementById('visualization').value;
 if (response.isError()) {
 alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
 return;
 }
 var data = response.getDataTable();
 //first clear the visualization container
 document.getElementById('vis_chart').innerHTML = '';
 switch(element){
 case "Table":
 var chart = new google.visualization.Table(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'});
 break;
 case "PieChart":
 var chart = new google.visualization.PieChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340, is3D: true,title: 'Jeez Tech Visualization Demo'});
 break;
 case "LineChart":
 var chart = new google.visualization.LineChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'});
 break;
 case "MotionChart":
 var chart = new google.visualization.MotionChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'});
 break;
 case "ImageChart":
 var chart = new google.visualization.ImageChart(document.getElementById('vis_chart'));
 chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'});
 break;
 }
//Here we add the listener:
 google.visualization.events.addListener(chart, 'select', selectHandler);
//We set 2 global vars to be available for our handler :
window['data'] = data;
 window['chart'] = chart;
}
Now, the only thing to do, is to add the selectHandler method. Just a simple method that will switch case on the programming language value and display the appropriate image:
var selectHandler = function(){
 var chart = window['chart'];
 var data = window['data'];
//get the selection object
 var selection = chart.getSelection();
 var message = '';
//go through the object
 for (var i = 0; i < selection.length; i++) {
 var item = selection[i];
//Select the third column of the selected row
 var str = data.getFormattedValue(item.row, 3);
 }
 document.getElementById('langlogo').innerHTML = "";
}
Our application is able to handle select events now. You can check it out.
Here is a screenshot of the application :
Our Visualization API demo
We are ready. Our application is now able to display visualizations, filter them and handle user generated events. The  Google Visualizations API is a great tool to create awesome presentations of your data to your pages and applications. We will get back on it in a future post, explaining how you can implement your own data source and some other cool uses of the API.

IE Only, Cool Features, That Should Exist On Other Browsers Too

Kerasiotis Vasileios — Fri, 16 Oct 2009 17:13:47 +0000

OK Internet Explorer (mainly <7 ) is the source of headache for most of us. The box model, the transparency problem and it’s poor CSS support have made designers hack their code to have their designs look the same (not always though) on IE as they would on all other browsers. But, there are some awesome, IE specific, features that should be present on other browsers too. In this article, we will list some IE features that Firefox, Opera and other browsers should have.

The CSS Filter Property

Internet Explorer supports a filter:command style CSS property that can add some style to HTML elements on your pages. For example you can create a fade effect on any block element on your pages with:

ELEMENT {filter: Chroma(Color=#C1DEFF) Alpha(Opacity=200, FinishOpacity=0, Style=2, StartX=gradient start X position, StartY=gradient starting Y position, FinishX=gradient finishing X position, FinishY=gradient finishing Y position)
}

where “ELEMENT” is any block element. You can use the above code to transform this image:

to something like this:

You can also create gradient div elements with the same trick. Another great method of the filter property is “filter:gray” which, when used on images, the images will be gray-scaled. So by doing this:

img{
filter:gray;
}

will display the image like this:

while by using the “filter:fliph” or “filter:flipv” methods, the images will be flipped horizontally and vertically accordingly. The next cool filter method is “filter:invert” which when used on images, would display the image like this:

Another image transformation can be achieved with “filter:wave“. You might have guessed what this method does but if you didn’t, put this code in your page:

img{
filter:wave(Strength=5,lightstrength=15)
}

and you should get an image with a wave effect like this:

A method similar to the “filter:invert” method is “filter:xray” which produces the following effect:

wait.. There’s some more.

You can pixelate any image with this code:

img{
 filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=6)
}

eg:

add some blur with “filter:blur(strength=VALUE)“:

img{
blur(Strength="50")
}

or add some glowing effects to some text and keep the text selectable as shown here:

with this code:

p{
filter: glow(Color="#000eee",Strength="6");
 width:200px;
 font-size:30px;
}

and adding shadows to text can be done with this code:

p{
filter: dropShadow(color="#ddd0d0",offX="2",offY="2");
 width:200px;
 font-size:40px;
}

The result is not 100% what we expected though since the transformation sharpens our text:

The MSDN site has a lot of info about the filter property and some other IE specific CSS properties in case you are interested in it.

We do not advise you to use any of these CSS properties on your pages here. We are just trying to show that some of these properties could be added to other browsers too, since most of them have to do with presentation and style. For example why use a heavy JS library to add some effects like fade or gray-scale when you can do it with 1 line of text?

For flame lovers:

We use Opera (70%) and FireFox (30%). So, no IE lovers here…

CSS Snippets That Can Come Handy

Kerasiotis Vasileios — Tue, 22 Sep 2009 15:20:43 +0000

Sometimes doing something with CSS that looks the same for all browsers is pretty annoying. Some things might look different on different browsers. We all had the same headaches with IE for example. Not to mention the differences from one version of IE to another.

This is a list of ways to make things work ok on all major browsers.

Sticky Footer

A new solution from www.cssstickyfooter.com promises 100% sticky footer with all major browsers, including Chrome.

CSS:

/*
Sticky Footer Solution
by Steve Hatcher

http://stever.ca

http://www.cssstickyfooter.com

*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML:

Here is a nice how-to use the above snippets.

Rounded Corners

CSS3 supports rounded corners using the border-radius property, but untill all browsers support CSS3, rounded corners needs a little more coding to make. An excellent article on creating rounded corners using CSS Sprites explaining a step by step process is all you need to start using them. No need to duplicate the code snippets here since it is worth reading it all.

Min-Height in IE

Dustin Diaz posted a great snippet on his blog that fixes this annoying IE bug.

CSS:

selector {
min-height:500px;
height:auto !important;
height:500px;
}

Hover Effects on every element for IE

Download this file from xs4all.com and use this snippet in your CSS:

body { behavior: url("csshover3.htc"); }

You should first make sure that your server treats .htc files with a mime-type of text/x-component . To do this in Apache you should put this code in your .htaccess file:

AddType text/x-component .htc

Image Ajax like Preloading using only CSS

Grab a loader image and try this on one of your pages (preferably large images):

CSS:

img { background: url(loader.gif) no−repeat 50% 50%; }

Fade text with CSS

You can make your text fade using a fading image and some css. For example you can use this image and this code:

CSS:

#bottom_fade {
z-index: 99;
position: fixed;
bottom: 0%;
background-image: url("bottom-fade.png");
}

to produce something like this:

Using a little variation you can create gradient or glossy headers:

CSS:

h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

HTML:


 Content Here

For IE 6 users:

Center Elements with CSS

element{
margin:0 auto;
}

Display Block Elements Side by Side

DIV{
display:inline;
float:left;
}

The DIV mentioned above can be any block element.

Usability Feature on Links

You can set an access key on each of your links. This will act as a shortcut and a user can access your link by holding the Alt+KEY. This can be done like this:

Some File

There is a way to display the accesskey on each link with css :

a:hover:after, a:focus:after
{
content: " (" attr(accesskey) ") ";
}

So when the user hovers the link, the link will display the shortcut in parenthesis. eg: Some File (s)

No Fieldset Border on Opera

fieldset {border:0 solid}

Styling XML With CSS Only

Do you know you can style XML documents with CSS only? No extra knowledge needed, just plain css. You just have to set the display property of each element. So for example this code:

Hello

Can be transformed to a nice bordered block with red text using this css:

sample{
display:block;
border:1px solid silver;
padding:5px;
}

red{
color:red;
}

Here is a full layout built with this technic.

Note: The above snippet works anywhere except… You know who.

Exposing Microformats on Your Pages

Just use the class name to do this. Generally microformats use these class names:

hCard
hReview
hCalendar

You can also expose microformats using :before, :after in combination with the “rel” attribute.

Displaying Elements Centered Vertically

Display text in the middle of a paragraph.

DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle
}



Vertical middle

Some Premium Joomla Themes Designing Companies

Kerasiotis Vasileios — Fri, 18 Sep 2009 15:47:09 +0000

Joomla is a state of the art publishing platform and CMS. It is also an open source software, that has a large community that supports it, creates plugins and extensions and themes.

Joomla is a great example of how someone can make money from open source. Name it premium plugins creation or templating, Joomla is a way to get you money.

We list here our favorite premium (we mean paid when we say premium) theme designing companies and some demo templates these companies created.

1) Bonus Themes

The company published it’s first template on May 2007 and since then every month a new awesome template is published. Custom menus (cpmenu) and mods, give extra functionality to the templates.

2) RocketTheme

RocketTheme’s Joomla Templates Club is the longest running and best known template club in the joomlasphere. RocketTheme was created by Andy Miller, aka rhuk, the author of the standard templates that are included in Joomla. The company also offers phpBB templates.

3) JoomlaShack

JoomlaShack is a great place to get free and paid templates for Joomla. There is also theming support for the K2 component and clean coded templates.

4) YOOtheme

Commercial template club for Joomla. YOOtheme offers a wide variety of stylish templates with professional Web 2.0 features.

5) Theme Forest

ThemeForst is a themes marketplace. At ThemeForest you can buy and sell site templates and themes to skin popular CMS products like WordPress, Drupal and Joomla. Files are priced from just five dollars, based on the complexity, quality and use of the file. Anyone is free to sign up for an account and begin trading or purchasing files.

Do you run a templating company for Joomla or any other CMS? If you do or if you have created any premium themes, please post a link here and show us your work.