Archive for the ‘Jquery’ Category

Google Chart Tools

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

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 options = {
width: 950, height: 250,
title: '',
backgroundColor: '#F0F0F0',
colors:['#920000','#7FA02D'],
fontName: '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!

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

See the demo in action.

Tutorial: Creating simple, flexible jQuery Tooltips

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.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Tooltips</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
    <h1>Ashley's Tooltips (Jquery)</h1>
    <p>This has a tooltip: <a href="#" id="ashTip">Hover over me!</a></p>
    <div id="tooltip1">
        <p>Hello!</p>
    </div>
</body>
</html>

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:

<style type="text/css">
    .toolTip {
        display:none;
        position:absolute;
        opacity:0.0;
    }
    #tooltip1 {
        background:#CF0;
        border-radius:5px;
        padding:20px;
        text-align:center;
    }
</style>

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:

<script type="text/javascript">
        $(function() {
            $("#ashTip").hover(
                function() {
                    var offset = $("p").offset();
                    $("#tooltip1").css("top", offset.top).css("left", offset.left).css("display", "block");
                    $("#tooltip1").animate({ opacity: 1.0 }, 300);
                },
                function() {
                    $("#tooltip1").animate({ opacity: 0.0 }, 300, function() {
                        $("#tooltip1").css("display", "none");
                    });
                }
            );
        });
    </script>

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.