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

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

source:misc/image/screenshot/sText.png

Sgvizler Generic HTML

Generic HTML rendering function that can be used to display query result sets as many different HTML elements by using the chart options. The default setup displays the results as a block of text.

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

Query result set format

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

Chart options

Name Default Description
cellSep , string (can be HTML) to separate cells in each column.
cellPrefix (empty string) string (can be HTML) to prefix each cell with.
cellPostfix (empty string) string (can be HTML) to postfix each cell with.
rowPrefix <p> string (can be HTML) to prefix each row with.
rowPostfix </p> string (can be HTML) to postfix each row with.
resultsPrefix <div> string (can be HTML) to prefix the results with.
resultsPostfix </div> string (can be HTML) to postfix the results with.

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

Live Example

Query: List the muncipalities of Rogaland, Norway with their location and description.

Note that special characters like <, > and " in the SPARQL query must be encoded.

HTML

<div id="ex"
     data-sgvizler-endpoint="http://dbpedia.org/sparql"
     data-sgvizler-endpoint_output_format="json"
     data-sgvizler-query="
        SELECT ?name ?lat ?long ?text
        { ?url a dbpo:AdministrativeRegion ;
               dct:subject &lt;http://dbpedia.org/resource/Category:Municipalities_of_Rogaland> ;
               rdfs:label ?name ;
               geo:lat ?lat ;
               geo:long ?long ;
               rdfs:comment ?text .
               FILTER(lang(?text)=&#34;en&#34;)
               FILTER(lang(?name)=&#34;en&#34;) }"
      data-sgvizler-chart="sgvizler.visualization.Text"
   style="width:400px; height:265px; border:1px solid black; display: inline-block; overflow: scroll;"></div>

The CSS style specification overflow: scroll; is set to shorten the height of the output.

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.