Publish your application｜Mash up the Linked Open Data

function submitStop(e){
    if (!e) var e = window.event;
    if(e.keyCode == 13)
        return false;
};

// Get a parameter value in URL (e.g. ?paramString=value )
function getParameterFromURL( paramString )
{			
	var value = "";
	var topWindow = top.window.location.search;
	if( topWindow ){
		var q = decodeURIComponent(topWindow.substring(1,topWindow.length)).split("&");
		for ( var i = 0; i < q.length; i++ ){
			var r = q[i].split("=");
			if ( r[0] ==  paramString )
				value = r[1];
		}
	}
 	return value;
}

// Highlight keyword in the string
function highlight( string, keyword )
{
	if ( keyword.length > 0 ) {
		var ss = string.split(keyword);
		var len = ss.length;
		if ( len > 1 ) {
			string = ss[0];
			for ( i = 1; i < len; i++ )
//				string += "<font color=\"red\">"+keyword+"</font>"+ss[i];
				string += "<span class=\"highlight\">"+keyword+"</span>"+ss[i];
		}
	}
	return string;
}

// get the last name of the string separated with # and /
function getLastName( string )
{
	string = decodeURIComponent(string);
	var sharp = string.split("#");
	var slash = sharp[sharp.length-1].split("/");
	var lastName = slash[slash.length-1];
	return lastName;
}

// return a link to Google map search
function addLinkToMap( latitude, longitude )
{
	var s = "<br><a target=\"_blank\" href=\"http://www.google.com/maps/?q=" + latitude + "," + longitude + "\">Show map</a>";
	return s;
}

// shortening URL e.g. http://.../123.jpg
function shortenURL( url )
{
	url = decodeURIComponent(url);
	var slash = url.split("/");
	var lastName = slash[slash.length-1];
	return url.split(":")[0]+"://.../"+lastName;
}

function drawChart(total,str2) {
	//alert("chart_start");
	//alert(str2);
	//alert(total);
	var a0 = "";
	var a1 = "";
	var a2 = "";
	var a3 = "";
	var a4 = "";
	var a5 = "";
	var a6 = "";
	var a7 = "";
	var a8 = "";
	var a9 = "";
	var a10 = "";
	a0 = total[0][0];
	//alert(a0);
	b0 = Number(total[0][1]);
	//alert(b0);
	c0 = Number(total[0][2])/1000;
	//alert(c0);
	a1 = total[1][0];
	//alert("さば１");
	//alert(a1);
	b1 = Number(total[1][1]);
	c1 = Number(total[1][2])/1000;
	a2 = total[2][0];
	b2 = Number(total[2][1]);
	c2 = Number(total[2][2])/1000;
	a3 = total[3][0];
	b3 = Number(total[3][1]);
	c3 = Number(total[3][2])/1000;
	a4 = total[4][0];
	b4 = Number(total[4][1]);
	c4 = Number(total[4][2])/1000;
	a5 = total[5][0];
	//alert("さば５");
	//alert(a5);
	b5 = Number(total[5][1]);
	c5 = Number(total[5][2])/1000;
	a6 = total[6][0];
	b6 = Number(total[6][1]);
	c6 = Number(total[6][2])/1000;
	a7 = total[7][0];
	b7 = Number(total[7][1]);
	c7 = Number(total[7][2])/1000;
	a8 = total[8][0];
	b8 = Number(total[8][1]);
	c8 = Number(total[8][2])/1000;
	a9 = total[9][0];
	b9 = Number(total[9][1]);
	c9 = Number(total[9][2])/1000;
	a10 = total[10][0];
	b10 = Number(total[10][1]);
	c10 = Number(total[10][2])/1000;
	//alert(b9);
	//alert(c9);
	//alert("new_table");
        var data = new google.visualization.DataTable();
        data.addColumn('number', '年度');
        data.addColumn('number', '総数-水揚数量（t）');
        data.addColumn('number', '総数-水揚金額（百万円）');
	//alert("google_data");

data.addRows([
		[18,b0,c0],
        [19,b1,c1],
        [20,b2,c2],
        [21,b3,c3],
        [22,b4,c4],
        [23,b5,c5],
        [24,b6,c6],
        [25,b7,c7],
        [26,b8,c8],
        [27,b9,c9],
        [28,b10,c10]
      ]);
	  //alert("描画開始");

var options = {
		  chart: {
          title: '魚種別水揚高',
          subtitle: str2,
        },
        width: 900,
        height: 500,
      };

var chart = new google.charts.Line(document.getElementById('linechart_material'));

chart.draw(data, options);
}

宮城県石巻市　魚種別水揚高
<form name="js">
調べたい魚種：<input type="text" name="txtc" list="data2" onKeyPress="return submitStop(event);"><br>
<datalist id="data2">
<option value="にしん"></option>
<option value="たら"></option>
<option value="すけそうたら"></option>
<option value="その他のたら"></option>
<option value="ぎんたら"></option>
<option value="めぬけ"></option>
<option value="きちじ"></option>
<option value="ほっけ"></option>
<option value="さめ類"></option>
<option value="たい類"></option>
<option value="ひらめ"></option>
<option value="油かれい"></option>
<option value="からすかれい"></option>
<option value="その他のかれい"></option>
<option value="あじ"></option>
<option value="ぶり"></option>
<option value="さけ・ます"></option>
<option value="たい"></option>
<option value="まいわし"></option>
<option value="せぐろいわし"></option>
<option value="さば"></option>
<option value="さんま"></option>
<option value="かつお"></option>
<option value="まぐろ"></option>
<option value="めじ"></option>
<option value="びんちょう"></option>
<option value="その他のまぐろ"></option>
<option value="めかじき"></option>
<option value="かじき類"></option>
<option value="子女子"></option>
<option value="めろうど"></option>
<option value="すずき"></option>
<option value="あなご"></option>
<option value="あんこう"></option>
<option value="沖はも"></option>
<option value="はも"></option>
<option value="たこ"></option>
<option value="いか類"></option>
<option value="かに"></option>
<option value="いさだ"></option>
<option value="銀ざけ"></option>
<option value="鯨"></option>
<option value="海草類"></option>
<option value="貝類"></option>
<option value="その他"></option>
</datalist>
<br>
<input type="button" value="実行" onclick="zzz()"><br>
<br>横軸：年度、縦軸：水揚数量(t)及び水揚金額（百万円）<br>
※縦軸の数値に"k"が付加されている場合、数値*1000を現す。<br>
</form>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    // Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['line']});
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
    google.charts.load('current', {'packages':['table']});
    google.charts.setOnLoadCallback(drawTable);
    //google.load("visualization", "1", {packages:["corechart"]});
    //google.setOnLoadCallback(drawChart);

</script>
<body>
    
    <div id="linechart_material" style="width: 600px; height: 300px"></div>
    <div id="table_div"></div>
</body>