Semwidg.org

Built-in Widget Types

On this page, we provide an overview about the built-in widgets types of the standard SemwidgJS library. The SemwidgJS light version only contains a subset of these widgets types (SwText, SwResultTable, SwDebug).

Table of Content

Basic Widget Information

Property Types
Basic Widget Properties
Additional Query Properties

GUI Widgets

Output

Debug (SwImage)
Image (SwImage)
Image Grid (SwImageGrid)
(Hyper-) Link (SwLink)
Map (SwOpenStreetMap)
SPARQL Result Table (SwResultTable)
Simple List (SwSimpleList)
Table (SwTable)
Text (SwText)

Input

Drop-Down List (SwDropDown)
Text Input Field (SwInputText)

Chart Widgets

Single Value

Doughnut Chart (ChartsDoughnutChart)
Pie Chart (ChartsPieChart)
Polar Area Chart (ChartsPolarAreaChart)

Multiple Values

Bar Chart (ChartsBarChart)
Line Chart (ChartsLineChart)
RadarChart (ChartsRadarChart)

Basic Widget Information

Property Types

Widget properties are classified by four types:

Name	Description
fixed	Once a value was set for this property, it cannot be changed anymore. For instance, this applies for data-swp-id.
static	These properties cannot contain a query but only a regular string value. For instance, this applies for data-swp-endpoint
query	These properties can contain SemwidgQL and SPARQL queries, but also static text or a combination of all these. Most properties belong to this type. Each property of this type creates several additional properties. These properties are listed in the next section.
selector	Selectors are used by interactive widgets (such as the SwInputText widget) that are able to write data to other SemwidgJS elements. The selector describes to which element and to which property the data should be written. For instance, university.uri would select the resource from the previous Resource example and would allow a widget to change its uri value.

Basic Widget Properties

Each widget has the following properties:

Name	Type¹	Description
Id	fixed	Unique identifier in SemwidgJS and HTML.
Endpoint	static	Default endpoint to use, if neither query nor value property define an endpoint.
Styleclass	query	CSS class name(s) applied to HTML.
Style	query	CSS styles applied to HTML.
Title	query	Title attribute applied to HTML, typically mouse over text.
Other	query	All other possible HTML attributes. Value of "other" will be inserted into HTML as it is entered.
Value	query	Value to display in HTML document. Typically, this is the most important property for every widget.

Example:

Following example requests all parties that participates in the 2013 German federal election (Bundestagswahl 2013) and shows the results in a table:

Result:

Additional Query Properties

For each widget property of type query several additional properties specific attributes exist:

Name	Description
*-endpoint	Endpoint to use, if query does not define an endpoint.
*-order	Comma-separated list of indices and optional order direction. Example: last - 1 asc, last desc
*-selector	A selector function.
*-transform	A transform function.
*-refresh	Refresh Interval for widget property. SemwidgJS uses Later.js for parsing textual interval descriptions.
*-limit	Number of maximum results for a query.
*-cache	The duration query results will be cached. Minimum: 1 minute, Maximum: 7 days.

GUI Widgets

Output

Debug (SwDebug)

A Debug widget does not have any properties in addition to the Basic Properties².

Example:

Following example requests all parties that participates in the 2013 German federal election (Bundestagswahl 2013) and shows the results in a table. Additionally, the data of the value property and the generated SPARQL queries are displayed:

Result:

Image (SwImage)

In addition to the Basic Properties² an Image widget has the following property:

Name	Type¹	Description
alt	query	Specifies an alternate text for this image.

Example:

Following example requests the logo of the political party Die PARTEI and display the first result object as an image:

Result:

Image Grid (SwImageGrid)

In addition to the Basic Properties² an Image Grid widget has the following property:

Name	Type¹	Description
max	query	Specifies the number of maximum images to display.
max-width	static	Maximum width of each image. Default = 200px
max-height	static	Maximum height of each image. Default = 200px

Example:

Following example requests the logo of all political parties that participated at the German federal election (Bundestagswahl 2013) and shows the results in a grid:

Result:

(Hyper-) Link (SwLink)

In addition to the Basic Properties² a Link widget has the following properties:

Name	Type¹	Description
label	query	Label of the created link.
target	query	The Links target. Possible values are "_blank", "_self", "_parent", "_top" or a framename.

Example:

Following example

Result:

Map (SwOpenStreetMap)

In addition to the Basic Properties² a Map widget has the following properties:

Name	Type¹	Description
lat	query	Latitude.
long	query	Longitude.
zoom	query	Zoom level.
area	query	Coordinates of an outline describing an area.

Example:

Result:

SPARQL Result Table (SwResultTable)

A SPARQL Result Table widget does not have any properties in addition to the Basic Properties².

Example:

Following example requests all parties that participates in the 2013 German federal election (Bundestagswahl 2013) and shows the results in a table:

Result:

List (SwSimpleList)

In addition to the Basic Properties² a List widget has the following property:

Name	Type¹	Description
max	query	Number of maximum elements to display

Example:

Result:

Table (SwTable)

In addition to the Basic Properties² a Table widget has the following properties:

Name	Type¹	Description
header-index	static	default = last
data-indices	static	Comma-separated list of indices, default = last - 1
data-labels	query	Comma-separated list of labels
pivot	static	default = false

Example:

<div data-sw-widget="SwTable"
     data-swp-id="MyTableWidgetExample"
     data-swp-endpoint="election"
     data-swp-style="border-collapse: collapse;"
     data-swp-value="{*(@type = elec_class:PartyVotes && elec_prop:election = {bundestagswahl_2013} && elec_prop:district = {nordrhein_westfalen} && elec_prop:number_of_first_votes > 0).[elec_prop:number_of_second_votes, elec_prop:number_of_first_votes, elec_prop:party.rdfs:label]}"
     data-swp-value-order="last - 2 desc"
     data-swp-dataindices="last - 2, last - 3"
     data-swp-datalabels="{elec_prop:number_of_first_votes.rdfs:label}, {elec_prop:number_of_second_votes.rdfs:label}"
     data-swp-headerindex="last"
     data-swp-pivot="yes"></div>

Result:

Text (SwText)

A Text widget does not have any properties in addition to the Basic Properties².

Example:

Following example requests a description of the political party Die PARTEI and display the first result object as a text:

Result:

Input

Drop-Down List (SwDropDown)

In addition to the Basic Properties² a Dop-Down List widget has the following properties:

Name	Type¹	Description
target	selector	Element and property to change with input text. Example: mySemwidgId.value
label-index	static	default = last
value-index	static	default = last - 1

Example:

Result:

Text Input Field (SwInputText)

In addition to the Basic Properties² a Text Input Field widget has the following property:

Name	Type¹	Description
target	selector	Element and property to change with input text. Example: "mySemwidgId.value"

Example:

Result:

Chart Widgets

Single Value

Doughnut Chart (ChartsDoughnutChart)

In addition to the Basic Properties² a Doughnut Chart widget has the following properties:

Name	Type¹	Description
header-index	static	default = last
data-index	static	default = last - 1
show-legend	query	default = true
colors	static	Comma-separated list of colors: (#FF00FF, #00FFFF) or a list of mappings: (mylabel: #FF00FF, default: #00FFFF)

Example:

Result:

Pie Chart (ChartsPieChart)

In addition to the Basic Properties² a Pie Chart widget has the following properties:

Name	Type¹	Description
header-index	static	default = last
data-index	static	default = last - 1
show-legend	query	default = true
colors	static	Comma-separated list of colors: (#FF00FF, #00FFFF) or a list of mappings: (mylabel: #FF00FF, default: #00FFFF)

Example:

Result:

Polar Area Chart (ChartsPolarAreaChart)

In addition to the Basic Properties² a Polar Area Chart widget has the following properties:

Name	Type¹	Description
header-index	static	default = last
data-index	static	default = last - 1
show-legend	query	default = true
colors	static	Comma-separated list of colors: (#FF00FF, #00FFFF) or a list of mappings: (mylabel: #FF00FF, default: #00FFFF)

Example:

More than 100000 votes

<div data-sw-widget="ChartsPolarAreaChart"
     data-swp-id="MyChartsPolarAreaChartExample"
     data-swp-endpoint="election"
     data-swp-value="{*(@type = elec_class:PartyVotes && elec_prop:election = {bundestagswahl_2013} && elec_prop:district = {nordrhein_westfalen} && elec_prop:number_of_second_votes > 100000).[elec_prop:number_of_second_votes, elec_prop:party.rdfs:label]}"
     data-swp-value-order="last - 2 desc"
     data-swp-headerindex="last"
     data-swp-dataindex="last - 2"
     data-swp-showlegend="true"
     data-swp-colors="CDU: #000000, SPD: #E2001A, FDP: #FFED00, DIE LINKE: #DC0000, GRÜNE: #1FA12D, PIRATEN: #FF8800, NPD: #8b4513, AfD: #009EE0"></div>

Result:

Multiple Values

Bar Chart (ChartsBarChart)

In addition to the Basic Properties² a Bar Chart widget has the following properties:

Name	Type¹	Description
header-index	static	default = last
data-indices	static	default = last - 1
data-indices	query	Comma-separated list of labels.
show-legend	query	default = true
colors	static	Comma-separated list of colors: (#FF00FF, #00FFFF) or a list of mappings: (mylabel: #FF00FF, default: #00FFFF)

Example:

Result:

Line Chart (ChartsLineChart)

In addition to the Basic Properties² a Line Chart widget has the following properties:

Name	Type¹	Description
header-index	static	default = last
data-indices	static	default = last - 1
data-indices	query	Comma-separated list of labels.
show-legend	query	default = true
colors	static	Comma-separated list of colors: (#FF00FF, #00FFFF) or a list of mappings: (mylabel: #FF00FF, default: #00FFFF)

Example:

Result:

RadarChart (ChartsRadarChart)

In addition to the Basic Properties² a Radar Chart widget has the following properties:

Name	Type¹	Description
header-index	static	default = last
data-indices	static	default = last - 1
data-indices	query	Comma-separated list of labels.
show-legend	query	default = true
colors	static	Comma-separated list of colors: (#FF00FF, #00FFFF) or a list of mappings: (mylabel: #FF00FF, default: #00FFFF)

Example:

<div data-sw-widget="ChartsRadarChart"
     data-swp-id="MyChartsRadarChartExample"
     data-swp-endpoint="election"
     data-swp-value="{*(@type = elec_class:PartyVotes && elec_prop:election = {bundestagswahl_2013} && elec_prop:district = {nordrhein_westfalen} && elec_prop:number_of_second_votes > 100000).[elec_prop:number_of_first_votes, elec_prop:number_of_second_votes, elec_prop:party.rdfs:label]}"
     data-swp-value-order="last - 2 desc"
     data-swp-headerindex="last"
     data-swp-dataindices="last - 3, last - 2"
     data-swp-datalabels="{elec_prop:number_of_first_votes.rdfs:label}, {elec_prop:number_of_second_votes.rdfs:label}"
     data-swp-showlegend="true"
     data-swp-colors="#EF7C00, #BD1789"></div>

Result: