Sgvizler has moved to github. This site and its repository will no longer be maintained.
wiki:Sgvizler/0.6/Setup

This page conserns Sgvizler/0.6.
Other available versions:

Sgvizler 0.6 Setup

To set up Sgvizler on your own site you will need to include a few javascripts to your pages and configure Sgvizler to fit your SPARQL endpoints and dataset.

To include the Sgvizler script, either

  • use cdnjs (not yet available, #39),
  • or use one of the following URI (probably slow):

 http://beta.data2000.no/sgvizler/release/0.6/sgvizler.js

 http://beta.data2000.no/sgvizler/release/0.6/sgvizler.min.js

Your Sgvizler instance is then best configured by a series of functions defined on the sgvizler object, setting the default endpoint, default chart, default chart size and so on; see the documentation for the complete list:  http://doc.data2000.no/sgvizler/0.6/classes/sgvizler.html, an example showing how Sgvizler is set up for this site is given below.

Note that settings given for specific HTML containers or on a Query object instance, as explained in Sgvizler/0.6/Using, overrides the configuration on the sgvizler object.

Sgvizler requires also:

 Google Visualization API
Includes many chart types and the DataTable object, which is the input to the visualization functions and a handy object for manipulating the result set.
 jQuery
Used for communicating with the endpoint and to manipulate the DOM.

These scripts can be imported the regular manner for HTML pages, see the example below.

Example

JavaScript loading

The listing below is the way that the different javascripts are loaded on this site of the purpose of setting up Sgvizler. The two first scripts in the listing are jQuery and the Google javascript API. The third is the trunk version of Sgivlzer, and the last is the setup of Sgvizler for this site. This latter file is included in full below.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://beta.data2000.no/sgvizler/release/0.6/sgvizler.js"></script>
<script type="text/javascript" src="http://beta.data2000.no/sgvizler/misc/trac/sgvizler-setup.js"></script>

Sgvizler setup

The listing below shows the current setup of the Sgvizler running on this development site -- used in the chart examples.

/*  Setup of Sgvizler trunk version on Trac 0.11.  */

// Wait until page is ready to configure Sgvizler:
$(document).ready(
    function (){
        sgvizler
            .defaultEndpointOutputFormat('jsonp')
            // Add prefixes used in examples:
            .prefix('w',     "http://sws.ifi.uio.no/ont/world.owl#")
            .prefix('dbpo',  "http://dbpedia.org/ontology/")
            .prefix('geo',   "http://www.w3.org/2003/01/geo/wgs84_pos#")
            .prefix('dct',   "http://purl.org/dc/terms/")
            .prefix('fn',    "http://www.w3.org/2005/xpath-functions#")
            .prefix('afn',   "http://jena.hpl.hp.com/ARQ/function#")
            .prefix('npdv',  "http://sws.ifi.uio.no/vocab/npd#")
            .prefix('npdv2', "http://sws.ifi.uio.no/vocab/npd-v2#")
            .prefix('geos',  "http://www.opengis.net/ont/geosparql#")

            // Draw all sgvizler containers on page:
            .containerDrawAll();
    }
);

/* Trac 0.11 uses an old version of jQuery. Sgvizler requires a newer
   version. We re-introduce some old jQuery functions used by Trac but
   not in the new version: 
   - loadStylesheet 
*/
jQuery.extend(
    {
        loadStyleSheet: function(file, type) {
            $('<link>').attr('rel', 'stylesheet')
                .attr('type', type)
                .attr('href', file)
                .appendTo('head');
        }
    }
);