SPARQL with Graphic inside the CLM Web

As you already know …the Open Social Widget are so useful to extend the CLM Webinterface without any hacks or quirks. Today we will use sgvizler to visualise the results of CLM SPARQL queries. What me still really surprise is how less Javsscript code is necessary to create meaningful information.

Some Screen dumps…

Interactive Graphic ...dragging is possible!

Interactive Graphic …dragging is possible!

Bildschirmfoto 2014-04-10 um 20.58.46

For this we need:

 

Codesnippets status.xml

<!--?xml version="1.0" encoding="UTF-8" ?-->

<![CDATA[
    	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/sgvizler.charts.css" type="text/css" media="screen" />

	This extension uses <a href="http://dev.data2000.no/sgvizler/">sgvgizler</a>. For installation instruction visit this site.

        <h4 class="title">SPARQL Graph</h4>

        <script type="text/javascript" src="lib/jquery-1.10.1.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="lib/sgvizler.js"></script>
        <script src="js/status.js"></script>

        <div id="CLMExample"
		 data-sgvizler-endpoint="https://ssejtsserver:9443/lqe/sparql"
		 data-sgvizler-query="
					SELECT ?cm_title ?qm_title 
					WHERE { 
						?cm_uri
                                                        dcterms:title ?cm_title ;
							oslc_cm:testedByTestCase ?qm_uri .
						?qm_uri
							dcterms:title ?qm_title  .
					}
					ORDER BY ASC(?cm_shortTitle)
                                      "
		 data-sgvizler-chart="sgvizler.visualization.D3ForceGraph"
		 data-sgvizler-chart-options="maxnodesize=5"
		 style="width:900px; height:600px; border:1px solid black; display: inline-block"></div>

]]>

Codesnippets status.js

$(
function (){ sgvizler

.prefix('dcterms', "http://purl.org/dc/terms/")
.prefix('rdf',     "http://www.w3.org/1999/02/22-rdf-syntax-ns#")
.prefix('oslc',    "http://open-services.net/ns/core#")
.prefix('oslc_cm', "http://open-services.net/ns/cm#")
.prefix('oslc_qm', "http://open-services.net/ns/qm#")

.containerDrawAll(); }
);
  1. #1 by Carlos on 11/04/2014 - 15:07

    Stefan this is really great work@@@

    • #2 by rtcpractise on 11/04/2014 - 17:10

      Thank you…and this is just the beginning! :-)

  2. #3 by rsjazz on 14/04/2014 - 13:17

    Amazing stuff Stefan. Thanks for sharing!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: