Language
Login
Language Setting
X
English
日本語 [Japanese]
about this App
SPARQLクエリ結果の「棒グラフ」表示例
useful
0
Loading...
$(window).load(function() { sparql = new Sparql(); //SPARQL検索の実行 $('#find_query').click(function(){ //sparql.findByQuery($('#query_area').val().replace(/[\n\r]/g,"")); //使用するSPARQLクエリの設定 query = 'PREFIX lodosaka:<http://lodosaka.hozo.jp/>\n'+ 'SELECT ?ku (COUNT(?uri) AS ?count) WHERE{\n'+ ' ?uri lodosaka:category_1 ?cat;\n'+ ' lodosaka:ku ?ku.\n'+ ' FILTER regex(str(?cat), "^(名所・旧跡)|(文化・観光)$")\n'+ '}GROUP BY ?ku\n'+ 'ORDER BY DESC(?count)\n' //結果を表示する欄の設定 sparql.result_div = $('#result_div'); //クエリの実行 sparql.findByQuery(query); }); /* //SPAQRLエンドポイントの切り替え $('#change_endpoint').click(function(){ init(); });*/ $('#result_div').hide(); init(); }); function init(){ // Servletサーバアドレス sparql.server = "http://lod.hozo.jp"; // 検索対象エンドポイント(途中での改行は不可) //var endpoint = $('#endpoint_url').val(); sparql.endpoint = {"endpoint": "http://lod.hozo.jp/repositories/OsakaCityMap", "namespaces": ""}; sparql.init(); //結果表示処理を行う関数を指定 // sparql.result_func = result_table; sparql.result_func = bar_chart; } //結果表示の関数(棒グラフ) function bar_chart(data){ var result_div = $('#result_div'); var arry = new Array(); //SPARQLクエリの結果(JSON形式)から,表示用データを作る //利用しているグラフライブラリでは,labelに項目,dataにその項目のデータを入れる for (var i=0; i<data.length; i++){ arry.push({'label':data[i].ku, data:[[i, data[i].count]]}); } $('#result_div').show(); $.plot('#result_div', arry, { series: { bars: { show: true, } }, }); } //結果表示用の関数(テーブル表示) //「ひな形」で用意しているデフォルト表示★この例では使っていない function result_table(data){ var result_div = $('#result_div'); var table = $('#result_list')[0]; if (table == undefined) { result_div.append($('<table border="1"></table>').attr({ 'id' : 'result_list', 'class' : 'table' })); table = $('#result_list')[0]; } while (table.rows.length > 0) { table.deleteRow(0); // 行を追加 } if (data instanceof Array) { result_div.show(); // ヘッダ var header = table.createTHead(); // 行を追加 var headerRow = header.insertRow(0); id = 1; for (var d = 0; d < data.length; d++) { var row1 = table.insertRow(d + 1); // 行を追加 if (d == 0) { for ( var key in data[0]) { var th = document.createElement('th'); var label = key; th.innerHTML = key; headerRow.appendChild(th); } } var i = 0; // ID for ( var key in data[d]) { var cell = row1.insertCell(i++); // 2つ目以降のセルを追加 var value = data[d][key]; if (value.uri != undefined){ value = value.uri; } if (value == null) { value = ''; } var link = true; if (link) { if (value != null && value.indexOf("http://") == 0) { value = '<a href="'+value+'" target="_blank">' + value + '</a>'; } } cell.innerHTML = value; } } } };
.popup { width:800px; background-color:rgb(255, 255, 255); border:outset 2px; position:absolute; z-index:1000; } .quote { border:solid 2px; }
<!--<div id="result"></div>--> <div id="container"> <div id="header"> <h2 style="background-color: #99cc00">SPARQL利用の簡易サンプル</h2> </div> <div id="right" class="right"> <div><a href="http://lodosaka.hozo.jp/OsakaCityMapLOD.htm">大阪市の施設情報</a>のSPAQRLエンドポイント(<b>http://lod.hozo.jp/repositories/OsakaCityMap</b>)から<br> 文化・観光もしくは名所・旧跡の施設が多い区ランキングを取得し,棒グラフで可視化視する例<br> <br> <b>使用するSPARQLクエリ</b> <pre> PREFIX lodosaka:<http://lodosaka.hozo.jp/> SELECT ?ku (COUNT(?uri) AS ?count) WHERE{ ?uri lodosaka:category_1 ?cat; lodosaka:ku ?ku. FILTER regex(str(?cat), "^(名所・旧跡)|(文化・観光)$") } GROUP BY ?ku ORDER BY DESC(?count) </pre><br> <input type="button" id="find_query" value="query"/> </div> <!-- 結果ペイン --> <div id="result_div" style="width:500px; height:500px;" > </div> </div> </div>
Preview
Input Data
ReadMe
Snapshots
This application does not using any data or contains private/limited data.
Link http://app.linkdata.org/run/app1s590i?tab=readme
http://code.jquery.com/jquery-1.10.2.min.js
http://lod.hozo.jp/SparqlFinder/js/sparql.js
http://code.jquery.com/ui/1.10.3/jquery-ui.min.js
http://lod.hozo.jp/SparqlFinder/js/flot/jquery.flot.js
Work
Add
Clear
insert work id or work name.