Mosuro | UI/Web Designer

Google Chart Tools

amosuro — Fri, 30 Mar 2012 14:59:07 +0000

In brief, Google Chart Tools is a service which allows you to easily display charts on your web page using the Google Chart Tools API.

To give you an example, I’m currently working on implementing the data used for a project with Google Chart Tools in order to achieve a variety in data visualisation.

You can use the Google Chart Tools service in two ways:

The Easy Way
The Very Easy Way

Starting with the latter, Google Chart Tools can be as simple as including a URL in your webpage. You can use the Google Chart Playground to edit the parameters to fine-tune the results and then output the results in a PNG image using the URL generated. Here’s an example:

http://chart.googleapis.com/chart?cht=bvg&chs=250x150&chd=s:Monkeys&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt

Alternatively, we can use the easy way – which is the best method for me, because it allows me to grab the data and display it within the charts generated by Google Chart Tools – via AJAX.

However we grab the data, we’ll need to place it into a dataTable object, which is simply a table with columns and rows, whereby each column is defined with a data type (e.g. string, integer).

First, load the Google Visualization API

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Include the required Google Visualization library

google.load("visualization", "1", {packages:["corechart"]});

The second parameter indicates the version of API to use, and the ‘packages’ array consists of all the visualizations used (in this case, I’ve selected corechart in order to use a line chart).

Ensure the Google Visualization library is fully loaded by registering a callback

var dataTable = new google.visualization.DataTable();

Create the dataTable

var dataTable = new google.visualization.DataTable();

Define all of the columns in our table

data.addColumn('string', 'Month');
data.addColumn('number', 'Updated Data');
data.addColumn('number', 'Synced Alumni');

Then define all of the rows in the table

data.addRows([
['Jan', 1000, 400],
['Feb', 1170, 460],
['Mar', 860, 580],
['Apr', 1030, 540]
]);

Here we have a set of arrays within an array. This is because each row is an array, and all data within that row is enclosed in an array.

There a number of options to manipulate the visualization (e.g. chart width, height, background colour etc).

var&nbsp;options&nbsp;=&nbsp;{
width:&nbsp;950,&nbsp;height:&nbsp;250,
title:&nbsp;'',
backgroundColor:&nbsp;'#F0F0F0',
colors:['#920000','#7FA02D'],
fontName:&nbsp;'Helvetica',
};

Once everything is set, we simply need to initiate and then draw our chart object.

var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
chart.draw(data, options);

Finally, set the div where the chart will be displayed and that’s it!

id="chartDiv" style="width:950; height:250"></div>

See the demo in action.

Tutorial: Creating simple, flexible jQuery Tooltips

amosuro — Thu, 05 Jan 2012 22:07:17 +0000

I don’t often post tutorials on my blog, as I usually focus on forums and Stackoverflow, but here’s a very simple, straight-forward tutorial that will be useful for anybody just getting to grips with jQuery.

The Aim

The idea here is to avoid any uneccessary steps and focus 100% on what we’re trying to achieve – a flexible jQuery tooltip to add and customize to your website without the need for any clunky plugins.

How to

First, we will start off with a very simple HTML page with no design whatsoever, so we can keep our attention on the tooltip and nothing else.

jQuery Tooltips

Ashley's Tooltips (Jquery)

This has a tooltip: Hover over me!

Hello!

Notice that I have already included my jQuery library by using the link provided by Google’s CDN.

We need to add some simple CSS to this page, in order for the tooltip functionality to work. Although most of this CSS is optional, there are some parts of the code which need to be included in order to make this all work:

The .tooltip element must be set to display none and opacity 0.0, because the whole idea of a tooltip is that they appear on click or on hover, so we do not need the element to display until we trigger it, and when it does display we want to fade the opacity to visible, so it’s intial state should be invisible (hence the need to declare it’s opacity).

Now that we have the HTML page set up and some basic CSS styling, let’s add some jQuery to create the tooltip functionality. Add this piece of code to the head of the page:

So to get a better understanding of what’s happening here, I’ve broken up the above code to explain exactly what is happening:

var offset = $("p").offset();

This gets the position (offset) of the element. In this case, the element is the p tag.

$("#tooltip1").css("top", offset.top).css("left", offset.left).css("display", "block");

We position the element to top/left of the element above (p tag) and show the tooltip by editing the CSS and setting the display to block.

$("#tooltip1").animate({ opacity: 1.0 }, 300);

Here we create a fade in animation for the element when the tooltip displays.

function() {
                 $("#tooltip1").animate({ opacity: 0.0 }, 300, function() {
                     $("#tooltip1").css("display", "none");
                   });
                }

The above piece of code simply does the opposite of everything we have declared in the jQuery code so far, but for when the user’s mouse moves away from the tooltip link. So it simply creates another fade effect to make the tooltip disappear and then sets the display to none using CSS.

So with all of that in place, our simple but very flexible tooltip will be working! By using this method, there are a number of different ways you can use the functionality. A good example is to use it as a method of displaying an image whenever the user hovers over a thumbnail of that image.

Mark Randall – brave soldier, great artist. Loving Grandad.

amosuro — Fri, 28 Oct 2011 17:27:04 +0000

Mark Randall was born in Coventry. He studied for a short time at Coventry School of Art, before war time service with the Royal Navy (1941- 1946), interrupted his studies. After leaving the forces, he settled in London working as a commercial artist and graphic designer in advertising, whilst continuing with evening studies at Hornsey Art School and subsequently at the Central School of Arts and Crafts. Mark retired in 1986 and has since concentrated all his activities into fine art.

He has a painting exhibited in the Royal Academy in 1960, and for many years he was a regular exhibitor with the Royal Institute of Oil painters, and also the Pastel Society, and the National Society. In 1985 he was awarded the Cornelissen Prize for his painting at the National Society Exhibition at the Mall Galleries, London.

His oils and pastels have mainly concentrated on capturing the landscape and marine life of East Anglia, but for the last few years an interest in the moving figure has entered his work. This is conveyed in his dramatic equestrian scenes and the magical world of ballet.

May he rest in peace and let us celebrate his fascinating 90-year life.

Web site launch – Enlightenment Business Solutions

amosuro — Tue, 18 Oct 2011 20:44:52 +0000

Founded by Shamim Sarif & Hanan Kattan, Enlightenment Business Solutions (EBS) provides a number of online marketing solutions in the UK and USA.

EBS required a complete Web site re-design, implementing a user-friendly content management system. I decided that WordPress would be perfect for the project and this is the outcome…

Visit the new EBS site

Engage, inspire, motivate

amosuro — Fri, 23 Sep 2011 16:37:48 +0000

A design concept I’m working on for a video production company based in Cambridge. Web site launch coming soon!