Introduction
One of the most important goals of a new technology is to be widely used in its target area. This process is not always easy if other technologies are available with the same aim. The new technology will have to grow in the market step by step, defining useful applications for specific areas. SVG is a standard technology designed by the World Wide Web Consortium to represent vectorial graphics. Nowadays, this technology is still underused. Another technology, called Flash, holds 90% of the market. In spite of being an important W3C technology and the number of companies behind it, SVG will need a considerable set of small contributions to reach a distinguished position in the vectorial graphics area. The aim of this work is to be one of these small contributions, and help SVG to become the main technology in this field.
Goal
The principal goal of this work is to implement a library of functions which allows us to dynamically define graphical representations for statistical data. Using the Document Object Model of an empty SVG file, we will be able to generate graphs using a set of functions defined in javascript which load the data dynamically.
The library allows us to represent different types of graphs, such as histograms, time series, scatter plots, etc. This type of representations is widely used to present information extracted from analysis tools, opinion polls and any system which summarizes numerical data. Some of these graphs are presented in figure1.
|
|
|
|
Figure 1: some statistical graphs
The possibility of loading this information from a database and generating the graphs just-in-time is a very useful characteristic. Furthermore, an SVG graph can replace other tools like java applets whose load-times are quite long, or Flash applications which are based on a no open technology. In figure 2, an example of java applet for statistical representation is shown. Although its quality is very high (grid, scroll bars, legend, etc), these tools usually present performance problems, so if a quick response is required, its use is not recommended. In case of Flash, despite the fact that these files can be loaded fast, its use presents other problems derived from the fact of being a closed technology. Moreover, SVG is a multidevice technology, so it can be used in PCs, mobile phones, etc.
Figure 2: a java applet for statistical graphs presentation
Proposed work
The main idea of this work is to use the DOM to generate statistical graphs at the same time the source data is loaded from an information system, e.g., a relational database, a datawarehouse, or a file. An SVG file can be easily included in a Web page using an <object> tag. If the SGV file can receive data just when it is being loaded, it will be possible to dynamically generate graphical representations for this data.
With this aim, different functions can be included in the SVG file. These functions can modify the DOM of the SVG document and create new children in a basic SVG structure. Each child can be a new element in the graph, such as a bar, a point, the title, or an axis. In figure 3 a diagram with the generation process is presented. Three steps are necesary to carry out this process:
- Extract the source data from the information system. Different types of tools can be used for this purpose, such as java servets, php, asp, etc.
- Load the SVG file using a set of javascript functions.
- Present the SVG result graph on a Web page.
Figure 3: graph generation process
These functions have to convert the numerical data into different types of representation depending on the type of graph, e.g. bars for the histograms, points for the scatter plot, and site in a specific position.
Moreover, some functions will be designed to include different auxiliary elements in the graphs. For instance:
- Title: setting the title of the graph.
- Grid: activating or deactivating the grid.
- Scale: setting the scale values of the graph.
- Axis explanation: explaining the meaning of the axis variables.
- Legend: showing the legend of the axis.
- Numerical values: Showing numerical values of the source data.
- Colours: Using different colours in the charts.
Other interesting characteristics can be added, such as 3D representation and animated graphs. Thanks to the great animation capabilities of SVG, a graph can be converted into a powerful interactive tool.
Example
A basic example of this library can be the code presented in the following box. This is only a first approach but it shows perfectly the aim of the work.
<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400">
<script type="text/ecmascript"> <![CDATA[
SVGDocument = null;
parent.setPoint = setPoint;
parent.setTitle= setTitle;
////////////////////////////////////////////////////////////////////
//
// SET TITLE
//
////////////////////////////////////////////////////////////////////
function setTitle(text)
{
// creating the title
var title= document.createElement('text');
// style a properties
title.setAttribute('x', 40);
title.setAttribute('y',20);
title.setAttribute('fill', 'black');
title.setAttribute('font-family','arial');
title.setAttribute('font-size',40);
var child =document.createTextNode(text);
titulo.appendChild(hijo);
// adding the new child
var contend= document.getElementById('contend');
title = contend.appendChild(title);
}
////////////////////////////////////////////////////////////////////
//
// SET POINT
//
////////////////////////////////////////////////////////////////////
function setPoint(x, y, color)
{
// creating a new point
var point= document.createElement('rect');
// setting style and properties
var width= 2;
var height= 2;
point.setAttribute('x', x+30);
point.setAttribute('y', y+30);
point.setAttribute('width', width);
point.setAttribute('height',height);
point.setAttribute('stroke', color);
// adding the new child
var contend= document.getElementById('contend');
point = contend.appendChild(point);
}
]]>
</script>
<g id="contend" >
<rect fill="none" stroke="black" stroke-width="1" width="740" height="740" x="30" y="30" />
</g>
</svg>
The SGV file has two parts. One of them is a basic skeleton of an SGV graph, and the other is a set of functions capable of adding new elements to the chart. In this case, two functions have been designed: one to draw points in a scatter plot and another to set a title for the graph. The result is a useful system to generate a graph with data extracted from an information system.
<!--loading data -->
<script language="Javascript">
function load()
{
window.setPoint(50,530,'red');
window.setPoint(24,5,'red');
window.setPoint(360,34,'blue');
window.setPoint(5,43,'blue');
window.setPoint(50,550,'red');
window.setPoint(254,5,'red');
window.setPoint(30,324,'blue');
window.setPoint(5,43,'blue');
window.setPoint(250,50,'red');
window.setPoint(224,5,'red');
window.setPoint(320,324,'blue');
// ...
window.setPoint(5,423,'blue');
window.setTitle('Video Length vs Reproduction Length');
}
</script>
To load the data, the designed functions are invoked from the web page where the SVG graph has been included. Using tools such as PHP, ASP or JSP, the data can be extracted from a database and loaded in the graph using the designed functions.
The result of this basic example is shown in figure 4.
Figure 4: example result
Cristina González Cachón
Cristina was born in Cangas del Narcea (Asturias) the 8th of December 1984. Currently, she is studying the last year (third) of Telecomunications in the Escuela de Ingeniería Técnica Informática y Telemática de Gijón within the Universidad de Oviedo. Furthermore, she is putting her knowledge into practice in the Digital News service of La Nueva España.
e-mail: peipa60@hotmail.com
