Google Charts are handy tools

I have been experimenting for a while with Google Chart Tools [01] and they are a powerful tool to apply on many situations when we might want to present data in a nicely and more readable manner.

It causes a much better impact to present a chart rather than the raw data. Therefore the task of adding graphics might be a repeatable task, but of course, we would like to perform this in an easier way. This is why the fact of having a tool on the toolkit comes as a great thing, and besides the particular technology you use (Google charts are not the only technology for this), what is important (from my point of view) is to have something located so you can call it when you need it.

This particular set of tools are very powerful (because most of the reasons I explained on the previous paragraph), but it is also very simple to use (it just requires a few examples and an understanding of JavaScript, but after identifying a pattern, it becomes easier).

It displays the data based on sources which could be data tables or data sources (bases, etc.). Regardless the underlying data source, I would like to present how is the process of displaying the graphics and perhaps let the data sources for a further post.

Getting started with a simple example
The steps for achieving this are actually simple. It requires to add the Google-chart libraries and after they are linked, create the structure the chart will have, fill in the data, and then define the HTML section (div) on where the graphic is going to be displayed (the part on the DOM identified by an id, that will be referenced within the JavaScript code).

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

var data_table =
[ ['col1' , 'col2' ]
, [ x11 , x12 ]
, [ x21 , x22 ]
, [ x31 , x32 ]
//......
];

var data = google.visualization.arrayToDataTable(
data_table
);

var options = {
title: 'Function Graphic',
curveType: 'function'

};

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


Then with this generic code skeleton (along with other HTML elements that are required) we just create an element on the DOM with the id “chart_div” (for this case, as it was references on the chart function), and the graphic will be displayed.
One important thing is the way we define the data values on the variable, is that the function expects a list of list where the first element refers to the header and the rest of them are the pair-values that will be displayed. For all the kind of graphic that this type of information applies, we could change the type of chart (instead of LineChart, for a different one, if applies).

For example, by following a structure like this one (it’s not the only one, different kind of graphics might require a different structure, but it is a common programming idiom for cases like this one), we could create a representation of a mathematical function (x² for example).

The code would be like the following one:

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data_results = generate_values( f , -10 , 10 , 0.5 ) ;
console.log(data_results);
var axis = ['X' , 'Y=f(x)'];
var table = data_results;
data_results.unshift(axis); //add the header at the beginning of the table

var data = google.visualization.arrayToDataTable(
data_results
);

var options = {
title: 'Function Graphic',
curveType: 'function'

};

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

function f(x){
return Math.pow( x , 2 );
}
function generate_values( fn , startValue , endValue , pace ){
var results = [];
for(var i = startValue ; i <= endValue ; i += pace ){
results.push([ i , fn(i) ]);
}
return results;
}

The only difference here is that an auxiliary function is used for the generation of the values to represent, and it works for any kind of function passed by parameter (courtesy of JavaScript), but all in all this function returns an Array with the required structure, and the headers are added at the beginning of this array. Therefore, the resulting object is a valid structure for what the library needs, and there is no issue with the rendering.

The options parameter is an object that handles and owns the properties of the chart to draw. All type of charts share some generic options, but they also have particular private ones depending on the type of graphic. The details and explanation of each one are perfectly documented on the API page.

Although there are many resources within this library, explaining all of them would demand much time. Therefore is a good point to make on saying that probably one of the greatest things this has is a common structure, or idiom that works as a starting point and allows to initially know how to work with the tool.

References

1. [01] – https://google-developers.appspot.com/chart/interactive/docs/index

Node.js and server-side JavaScript

It is really clear now the importance that JavaScript has nowadays on the IT world for building a web system .One thing that it is not always clear is that despite the fact that JavaScript is most of the times used for client-side executions or for adding logic at the client end (which has a lot of advantages by the way) this is not the only possible implementation, so there is also possible to execute JavaScript code on the server side.

This is the approach taken by node.js, which is a platform for building applications based on JavaScript code, so yes, it executes JavaScript on the server.

According to it’s web page [01]

“Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.[…] “

Despite the fact that it is a technology for building applications on a web architecture, it has many other possible features or things that can be used for. For example, by installing node.js I could run my JavaScript code locally in a terminal which makes probably much more easier to run it and debug it. This is an interesting point, however it is still limited to just pure JavaScript code, because things like the DOM are still not possible to be simulated or executed locally (but there are projects to make this possible in the near future).

 

Recalling the main idea of presenting node.js, probably the most important point to make is the fact that it allow us to create new web applications with a different approach. What do I mean by this? Well, the entire architecture of node.js is very different from the classic paradigms or languages like Java/Ruby/PHP, etc., because it works by events (but that is a completely different topic, out of the scope of this introduction).

 

An important note is that node.js is based on the V8 JavaScript virtual machine, an open source project from Google [06].

 

A simple example

Installing node.js is quite simple. We first download the source code from the web page [01] and extract it. After this, once in the local folder of the node.js files we proceed with the installation:

$./configure

$make

$sudo make install

 

Now we can run the node.js console on the terminal, with $node

(the “>” prompt is from the node.js console).

 

By this way it is possible to test a JavaScript file with the console, for example for a simple file like script.js, the following command will execute it:

$node script.js

 

But this is for trying JavaScript locally, which is great but it is not the only possibility, as node.js goes beyond that for being a development platform itself, so let’s try to build a simple example.

This simple example does not intend to be something really complex, on the contrary is just an small piece of code with the purpose of illustrate a simple application made running at the server side and written in JavaScript. This brief example runs a service with returns in HTTP the URL requested by the user while browsing it, and it logs that same request on the nodejs console. The code is the following one:

 

var http = require("http");
var url = require("url");

function onRequest(request , response){

pathname = url.parse(request.url).pathname;

console.log("Index started - "+ pathname + " requested");

response.writeHead( 200 , {"Content-Type":"text/plain"});

response.write("Hello. Your request was " + pathname);

response.end();

}

http.createServer(onRequest).listen(1234);

console.log("server started");

 

I called this file index.js and executed it by:

$node index.js

 

So in this case, we could load the application through http://localhost:1234 and we will see the requested url as a response, and then by requesting any url like http://localhost:1234/hello the result would be

Hello. Your request was /hello

 

This is something that could be useful for other functions like redirect, etc.

 

Running applications like this one will require a particular (but simple, in general) configuration and set up of the environment as well as particular services (some of them are indicated on the references, they are mainly cloud computing SaaS solutions).

 

All in all, the main idea was to present an original, relative state-of-the-art project which shows a new face of JavaScript in a way which was not so commonly used until now. There are lots of resources and a lot of information out there regarding this, but I believe it is important to have an initial knowledge to start from.

 

References

[01] – http://nodejs.org

[02] –http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb

[03] – http://groups.google.com/group/nodejs

[04] – http://www.nodecloud.org/

[05] – http://nodester.com/

[06] – http://code.google.com/p/v8/