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

This chart and its examples are implemented using Sgvizler 0.6, for version 0.5 see Sgvizler/0.5/DesigningQueries.

source:misc/image/screenshot/sList.png

Sgvizler List

Creates an (ordinary) HTML list, <ul> or <ol>. Each row in the query result set becomes a row in the list. How each row is presented is customizable.

Chart ID
sgvizler.visualization.List
Source
 src/visualization/List.js

Query result set format

Any number of columns on any format. All values are treated as strings.

Chart options

Name Default Description
list ul Specifies the listtype, should be either ul (unordered/bullets) or ol (ordered/numbered).
cellSep , The "glue" between cells in each row. Can be HTML.
rowPrefix (empty string) String to prefix each row with. Can be HTML.
rowPostfix (empty string) String to postfix each row with. Can be HTML.

See Sgvizler/Using, or the example(s) below, for how to set options.

Live Example

Query: The 10 largest countries by population.

We use * to select two values: ?Name and ?Population, and specify the result to display as an ordered list, separating the values in each list item by ": ".

HTML

<div id="ex"
   data-sgvizler-endpoint="http://sws.ifi.uio.no/sparql/world"
   data-sgvizler-query="
       SELECT * 
       { [] a w:Country ; 
            w:hasName ?Name ; 
            w:hasCountryPopulation ?Population ; 
       } ORDER BY DESC(?Population) LIMIT 10"
   data-sgvizler-chart="sgvizler.visualization.List"
   data-sgvizler-chart-options="list=ol|cellSep=: "
   style="width:400px; height:265px; border:1px solid black; display: inline-block;"></div>

Result

The result of the HTML above (left), and a google.visualization.Table rendering of the same query (right).


Notes

See Sgvizler/Setup for how Sgvizler is setup on this site.

Note that the query and visualization is ment to show the use of Sgvizler, and may not be the most appropriate way of illustrating this result set.

User Examples and Comments

Users, please insert (links to) other examples of usage of this Sgvizler chart, or relevant comments here.