Sgvizler has moved to github. This site and its repository will no longer be maintained.

This page conserns Sgvizler/0.6.
Other available versions:

Sgvizler 0.6 User Functions

Sgvizler is built to be extended by user-defined functions.

To create your Sgvizler enabled function use the function sgvizler.chartsAdd, see the  documentation. This function makes your visualization function inherit functions the "super"-object sgvizler.Chart1. It has four input parameters:

  1. module: the javascript namespace to where the function to be created belongs, e.g., MyOwnNamespace
  2. name: the name of the function, e.g., HelloWorld
  3. draw: the draw function, i.e., the function that does all the work. This function should take two arguments: function (datatable, chartOpt), where data is a Google DataTable object and chartOpt is an object of options for the chart function.
  4. dependencies: an object of dependencies that that function requires, typically external javascript libraries. The variable names of the object must be a function name that is contained in the javascript to be loaded.


Hello World example, displays a table where all cells contain as default Hello World.

More "real" examples are found in source:trunk/src/visualization/ .

Chart function

// Meta comment - chart function object documentation:
 * Hello World chart function. Writes a table where all values are
 * replaced by the string "Hello World", or an other string. We assume
 * the container is a <table>.
 * @class MyOwnNamespace.HelloWorld
 * @extends sgvizler.charts.Chart
 * @constructor
 * @param {Object} container The container element where the
 * chart will be drawn.
 * @since 0.6.1

// Meta comment - documentation of draw(.,.) function:
  * Available options:
  *  - 'word' :  The word to replace all result values with  (default: "Hello World")
  * @method draw
  * @public
  * @param {google.visualization.DataTable} datatable
  * @param {Object} [chartOptions]
  * @since 0.6.1

var MyOwnNamespace = {};
MyOwnNamespace.HelloWorld = sgvizler.chartsAdd(
    function (datatable, chartOptions) {
            // collect from numbers from the datatable:
        var c, noColumns = datatable.getNumberOfColumns(),
            r, noRows    = datatable.getNumberOfRows(),
            // set default values for chart options
            opt = $.extend({ word: 'Hello World' }, chartOptions),
            tablecontents = "";

        for (r = 0; r < noRows; r += 1) {
            tablecontents += '<tr>';
            for (c = 0; c < noColumns; c += 1) {
                tablecontents += '<td>' + opt.word + '</td>';
            tablecontents += '</tr>';


        // here we're using an external library:
        new Tablesort(this.container);
    // dependencies, 'Tablesort' is the function we need.
    { Tablesort: "//" }


The result of the following HTML ...

<table id="example" style="border: 1px solid brown;"
     data-sgvizler-query="SELECT * { ?s ?p ?o } LIMIT 4"
     data-sgvizler-chart-options="word=Hi World">

... is this:

  1. 1. sgvizler.Chart contains a constructor and listener functions. The constructor takes the element to where each chart instance will be put.