Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 54 Next »

Die Idee hinter dieser Variante ist, dass wir euch den html-Code zur Anzeige von Daten zur Verfügung stellen. Ihr könnt den Code so bearbeiten wie ihr möchtet und dann diesen direkt in euer CMS wie Wordpress, Joomla, Jimdo, Wix etc. einfügen. Mit dieser Variante passen sich die Daten aus der HGVerwaltung optimal an eure Vereinshomepage an. 

Dazu haben wir euch hier eine Übersicht von unseren aktuellen Codes, welche wir zur Verfügung stellen inkl. eines Beispiels vom Team Test. Den Code könnt ihr mit einem Doppelklick markieren. Wenn ihr die eigenen Daten als Vorschau wollt, könnt ihr in der URL das Wort "test" mit eurem Webcode ersetzen. 

Übersicht Spiele

HTML-CodeBeschreibungBeispiel

Übersicht der Spiele
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data td,
	#hg_data th {
		padding-left: 3px;
		padding-right: 10px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="datum">Datum</th>
			<th class="sort" data-sort="zeit">Zeit</th>
			<th class="sort" data-sort="art">Anlass</th>
			<th class="sort" data-sort="gegner">Gegner</th>
			<th class="sort" data-sort="spielort">Ort</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="datumDisplay"></td>
		<td class="zeit"></td>
		<td class="art"></td>
		<td class="gegner"></td>
		<td class="spielort"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}

		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre?alle=1', 'hg_jahrSelect', (new Date()).getFullYear(), getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		// var tbody = hgDataTable.createTBody();
		// tbody.classList.add('hg_list');
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spiele/' + teams.join(',') + '?jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			results.forEach(function (row) {
				row.datumDisplay = row.datum.substring(8, 10) + '.' + row.datum.substring(5, 7) + '.' + row.datum.substring(0, 4);
				row.zeit = row.datum.substring(11);
			});
			dataList.add(results);

			dataList.sort('datum', { order: "asc" });
		}

	})();

</script>


Terminübersicht der Spiele einer Saison

Übersicht der Spiele mit Resultaten
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data td,
	#hg_data th {
		padding-left: 3px;
		padding-right: 10px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	a {
		color: black;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="datum">Datum</th>
			<th class="sort" data-sort="zeit">Zeit</th>
			<th class="sort" data-sort="art">Anlass</th>
			<th class="sort" data-sort="team">Team</th>
			<th class="sort" data-sort="gegner">Gegner</th>
			<th class="sort" data-sort="spielort">Ort</th>
			<th class="sort" data-sort="totalNr">Nummero</th>
			<th class="sort" data-sort="totalNrGegner">Nummero Gegner</th>
			<th class="sort" data-sort="schlagPunkte">Punkte</th>
			<th class="sort" data-sort="schlagPunkteGegner">Punkte Gegner</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="datumDisplay"></td>
		<td class="zeit"></td>
		<td class="art"></td>
		<td>
			<a href="" class="team spielLink"></a>
		</td>
		<td>
			<a href="" class="gegner gegnerSpielLink"></a>
		</td>
		<td class="spielort"></td>
		<td class="totalNr hg_number"></td>
		<td class="totalNrGegner hg_number"></td>
		<td class="schlagPunkte hg_number"></td>
		<td class="schlagPunkteGegner hg_number"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			if (tdElements[v].classList.length > 0) {
				valueNames.push(tdElements[v].classList[0]);
			}
		}
		valueNames.push('team');
		valueNames.push('gegner');
		valueNames.push({ name: 'spielLink', attr: 'href' });
		valueNames.push({ name: 'gegnerSpielLink', attr: 'href' });

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spiele/' + teams.join(',') + '?jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			results.forEach(function (row) {
				row.datumDisplay = row.datum.substring(8, 10) + '.' + row.datum.substring(5, 7) + '.' + row.datum.substring(0, 4);
				row.zeit = row.datum.substring(11);
				row.spielLink = 'detail.html?spielId=' + row.id + '&club=' + club;
				row.gegnerSpielLink = 'detail.html?gegner=1&spielId=' + row.id + '&club=' + club;
			});
			dataList.add(results);

			dataList.sort('datum', { order: "asc" });
		}

	})();

</script>

Terminübersicht der Spiele einer Saison mit Resultaten

Übersicht der Spiele mit Resultaten V2
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<script src="https://hgverwaltung.ch/static/tingle-0.13.2.min.js"></script>
<link href="https://hgverwaltung.ch/static/tingle-0.13.2.min.css" rel="stylesheet">

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data td,
	#hg_data th {
		padding-left: 3px;
		padding-right: 10px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_data td {
		white-space: nowrap;
	}

	.spiellistelink {
		color: gray;
		padding-left: 5px;
		padding-right: 5px;
	}

	/* detail css */

	.tingle-modal-box__content {
		padding: 1rem;
	}

	.tingle-modal--overflow {
		padding-top: 3vh;
	}

	.hg_detail {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		margin-left: 10px;
	}

	.hg_detail h1 {
		font-size: 26px;
		font-weight: bold;
		margin-left: 10px;
	}

	.hg_detail .nr {
		border-bottom-color: black;
		border-bottom-width: 3px;
		border-bottom-style: solid;
	}

	.hg_detail .hg_number {
		text-align: right;
		padding-right: 3px;
	}

	.hg_detail .reihenfolge {
		padding: 0 15px 0 10px !important;
	}

	.hg_detail td.nachname {
		width: 150px;
	}

	.hg_detail td.vorname {
		width: 150px;
	}

	.hg_detail td.ries {
		width: 50px;
	}

	.hg_detail td.total {
		width: 70px;
	}

	.hg_detail td.rangpunkt {
		width: 70px;
	}

	.hg_detail td.total,
	.hg_detail tr.total td {
		font-weight: bold;
	}

	#hg_spieler_header th,
	#hg_header th {
		text-align: left;
	}

	#hg_spieler_header th.hg_number,
	#hg_header th.hg_number {
		text-align: right;
		padding-right: 3px;
	}

	#hg_spieler {
		margin-top: 20px;
	}

	#hg_spieler tfoot {
		line-height: 2.2em;
	}

	#hg_spieler thead {
		line-height: 2.2em;
	}

	#hg_bericht {
		margin-top: 15px;
		width: 90%;
		margin-left: 15px;
		font-size: 14px;
	}

	#hg_ueber_spieler {
		margin-top: 5px;
	}

	#hg_header {
		margin-left: 10px;
	}

	#hg_header th {
		text-transform: uppercase;
		font-size: 10px;
		padding: 3px;
	}

	#hg_header .mannschaft {
		width: 200px;
	}

	#hg_header .hg_number {
		width: 100px;
	}

	#hg_first td,
	#hg_second td {
		font-size: 18px;
		padding: 3px;
	}

	#hg_first td {
		font-weight: bold;
	}

	.hg_detail a {
		text-decoration: none;
		color: black;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="datum">Datum</th>
			<th class="sort" data-sort="zeit">Zeit</th>
			<th class="sort" data-sort="art">Anlass</th>
			<th class="sort" data-sort="team">Mannschaft</th>
			<th class="sort" data-sort="gegner">Gegner</th>
			<th class="sort" data-sort="spielort">Ort</th>
			<th class="sort" data-sort="totalNr">Nr</th>
			<th class="sort" data-sort="schlagPunkte">Punkte</th>
			<th class="sort" data-sort="totalNrGegner">Nr Gegner</th>
			<th class="sort" data-sort="schlagPunkteGegner">Punkte Gegner</th>
			<th></th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="datumDisplay"></td>
		<td class="zeit"></td>
		<td class="art"></td>
		<td class="team"></td>
		<td class="gegner"></td>
		<td class="spielort"></td>
		<td class="totalNr hg_number"></td>
		<td class="schlagPunkte hg_number"></td>
		<td class="totalNrGegner hg_number"></td>
		<td class="schlagPunkteGegner hg_number"></td>
		<td>
			<a href="#" class="spiellistelink"></a>
		</td>
	</tr>
</table>

<script>
	(function () {

		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			if (tdElements[v].classList.length > 0) {
				valueNames.push(tdElements[v].classList[0]);
			}
		}
		valueNames.push({ data: ['id'] });
		valueNames.push('spiellistelink');

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spiele/' + teams.join(',') + '?jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var now = Date.now();

			results.forEach(function (row) {
				row.datumDisplay = row.datum.substring(8, 10) + '.' + row.datum.substring(5, 7) + '.' + row.datum.substring(0, 4);
				row.zeit = row.datum.substring(11);
				var sd = new Date(parseInt(row.datum.substring(0, 4)), parseInt(row.datum.substring(5, 7)) - 1, parseInt(row.datum.substring(8, 10)));

				if (sd.getTime() <= now) {
					row.spiellistelink = 'Spielliste';
				}
			});
			dataList.add(results);

			dataList.sort('datum', { order: "asc" });

			var i = 0;
			var rows = document.getElementById('hg_data').getElementsByTagName('tr');
			for (; i < rows.length; i++) {
				var spielId = rows[i].dataset.id;
				if (spielId) {
					var atags = rows[i].getElementsByTagName('a');
					for (var j = 0; j < atags.length; j++) {
						(function () {
							var atag = atags[j];
							var sid = spielId;
							atag.addEventListener("click", function () {
								var gegner = atag.dataset.gegner;

								var modal = new tingle.modal({
									footer: false,
									stickyFooter: false,
									closeMethods: ['overlay', 'button', 'escape'],
									closeLabel: "Schliessen",
								});

								showDetail(modal, sid, gegner == '1');

							});
						})();
					}
				}
			}
		}

		function showDetail(modal, spielId, gegner) {
			var gegnerQuery = '';
			if (gegner) {
				gegnerQuery = '?gegner=1';
			}

			var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spiel/' + spielId + gegnerQuery;

			fetch(url).then(function (response) {
				return response.json();
			}).then(function (result) {
				modal.setContent(createDetailHtml(result, gegner));
				modal.open();
			});
		}

		function createDetailHtml(result, gegner) {
			var html = [];

			var spielerProperty = 'spieler';
			if (gegner) {
				spielerProperty = 'gegnerSpieler';
			}

			var d = result.datum;

			var map = {
				hg_art: result.art,
				hg_datum: d.substring(8, 10) + '.' + d.substring(5, 7) + '.' + d.substring(0, 4) + ' ' + d.substring(11)
			};

			map.hg_mann1 = result.team;
			map.hg_rp1 = result.rangPunkte;
			map.hg_nr1 = result.totalNr;
			map.hg_pu1 = result.schlagPunkte;

			map.hg_mann2 = result.gegner;
			map.hg_rp2 = result.rangPunkteGegner;
			map.hg_nr2 = result.totalNrGegner;
			map.hg_pu2 = result.schlagPunkteGegner;


			map.hg_bericht = result.bericht ? result.bericht : '';

			html.push('<div class="hg_detail">');
			html.push('<h1 id="hg_title">' + map.hg_art + ' vom ' + map.hg_datum + '</h1>');
			html.push('<table id="hg_header">');
			html.push('<tr>');
			html.push('<th class="mannschaft">Mannschaft</th>');
			if (result.meisterschaft) {
				html.push('<th class="hg_number">Rangpunkte</th>');
			}
			html.push('<th class="hg_number">Nummer</th>');
			html.push('<th class="hg_number">Punkte</th>');
			html.push('</tr>');
			html.push('<tr id="hg_first">');

			html.push('<td>' + map.hg_mann1 + '</td>');
			if (result.meisterschaft) {
				html.push('<td class="hg_number">' + (map.hg_rp1 != null ? map.hg_rp1 : '') + '</td>');
			}
			html.push('<td class="hg_number">' + (map.hg_nr1 != null ? map.hg_nr1 : '') + '</td>');
			html.push('<td class="hg_number">' + (map.hg_pu1 != null ? map.hg_pu1 : '') + '</td>');
			html.push('</tr>');
			html.push('<tr id="hg_second">');
			html.push('<td>' + map.hg_mann2 + '</td>');
			if (result.meisterschaft) {
				html.push('<td class="hg_number">' + (map.hg_rp2 != null ? map.hg_rp2 : '') + '</td>');
			}
			html.push('<td class="hg_number">' + (map.hg_nr2 != null ? map.hg_nr2 : '') + '</td>');
			html.push('<td class="hg_number">' + (map.hg_pu2 != null ? map.hg_pu2 : '') + '</td>');
			html.push('</tr>');
			html.push('</table>');

			html.push('<div id="hg_bericht">' + map.hg_bericht + '</div>');

			if (!result[spielerProperty] || result[spielerProperty].len === 0) {
				return html.join('');
			}

			html.push('<table id="hg_spieler">');
			html.push('<thead>');
			html.push('<tr id="hg_spieler_header">');


			// Header			
			html.push('<th class="reihenfolge hg_number">#</th>');
			html.push('<th>Name</th>');
			html.push('<th>Vorname</th>');

			for (var r = 0; r < result.anzahlRies; r++) {
				html.push('<th class="hg_number">' + (r + 1) + '</th>');
			}

			html.push('<th class="hg_number">Total</th>');

			if (result.meisterschaft) {
				html.push('<th class="hg_number">RP</th>');
			}
			if (result.fest) {
				html.push('<th>Ausz.</th>');
			}			

			html.push('</tr>');
			html.push('</thead>');
			html.push('<tbody>');



			// Spieler
			var spieler = [];
			result[spielerProperty].forEach(function (row) {
				if (!row.ueberzaehlig) {
					spieler.push(createSpielerRow(result, row));
				}
			});

			Array.prototype.push.apply(html, spieler);

			html.push('</tbody>');
			html.push('<tfoot>');


			// Total Row
			var totals = [0, 0, 0, 0, 0, 0, 0, 0];
			var grandeTotal = 0;

			result[spielerProperty].forEach(function (row) {
				if (!row.ueberzaehlig) {
					for (var l = 0; l < row.ries.length; l++) {
						if (row.ries[l] !== null) {
							totals[l] += row.ries[l];
							grandeTotal += row.ries[l];
						}
					}
				}
			});

			html.push('<tr class="total">');
			html.push('<td colspan="3"></td>');

			for (var r = 0; r < result.anzahlRies; r++) {
				html.push('<td class="hg_number">' + totals[r] + '</td>');
			}
			html.push('<td class="hg_number">' + grandeTotal + '</td>');
			html.push('</tr>');


			html.push('</tfoot>');
			html.push('</table>');


			// Ueberzaehlige Spieler

			html.push('<table id="hg_ueber_spieler">');
			html.push('<tbody>');

			var ueberSpieler = [];
			result[spielerProperty].forEach(function (row) {
				if (row.ueberzaehlig) {
					ueberSpieler.push(createSpielerRow(result, row));
				}
			});

			Array.prototype.push.apply(html, ueberSpieler);

			html.push('</tbody>');
			html.push('</table>');
			html.push('</div>');

			return html.join('');
		}

		function createSpielerRow(result, spieler) {
			var len = result.anzahlRies;
			var ms = result.meisterschaft;
			var fest = result.fest;
			
			var rowTotal = 0;

			var row = [
				'<tr>',
				'<td class="reihenfolge hg_number">' + spieler.reihenfolge + '</td>',
				'<td class="nachname">' + spieler.nachname + '</td>',
				'<td class="vorname">' + spieler.vorname + '</td>',
			];

			for (var r = 0; r < len; r++) {
				var rs = '<td class="ries hg_number">';
				var value = spieler.ries[r];
				if (spieler.nr[r]) {
					rs += '<span class="nr">';
				}

				if (value !== null) {
					rowTotal += value;
					if (value < 10) {
						rs += '0';
					}
					rs += value;
				}

				if (spieler.nr[r]) {
					rs += '</span>';
				}

				row.push(rs + '</td>');

			}

			row.push('<td class="total hg_number">' + rowTotal + '</td>');

			if (ms) {
				row.push('<td class="rangpunkt hg_number">' + (spieler.rangpunkte ? spieler.rangpunkte : '') + '</td>');
			}
			if (fest) {
				row.push('<td>' + (spieler.auszeichnung ? spieler.auszeichnung : '') + '</td>');
			}			

			row.push('</tr>');
			return row.join('');
		}

	})();

</script>

Terminübersicht der Spiele einer Saison mit Resultaten und der Spielliste als Popup ohne Gegnerliste

Übersicht der Spiele mit Resultaten V3
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<script src="https://hgverwaltung.ch/static/tingle-0.13.2.min.js"></script>
<link href="https://hgverwaltung.ch/static/tingle-0.13.2.min.css" rel="stylesheet">

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data td,
	#hg_data th {
		padding-left: 3px;
		padding-right: 10px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_data td {
		white-space: nowrap;
	}

	.spiellistelink {
		color: gray;
		padding-left: 5px;
		padding-right: 5px;
	}

	/* detail css */

	.tingle-modal-box__content {
		padding: 1rem;
	}

	.tingle-modal--overflow {
		padding-top: 3vh;
	}

	.hg_detail {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		margin-left: 10px;
	}

	.hg_detail h1 {
		font-size: 26px;
		font-weight: bold;
		margin-left: 10px;
	}

	.hg_detail .nr {
		border-bottom-color: black;
		border-bottom-width: 3px;
		border-bottom-style: solid;
	}

	.hg_detail .hg_number {
		text-align: right;
		padding-right: 3px;
	}

	.hg_detail .reihenfolge {
		padding: 0 15px 0 10px !important;
	}

	.hg_detail td.nachname {
		width: 150px;
	}

	.hg_detail td.vorname {
		width: 150px;
	}

	.hg_detail td.ries {
		width: 50px;
	}

	.hg_detail td.total {
		width: 70px;
	}

	.hg_detail td.rangpunkt {
		width: 70px;
	}

	.hg_detail td.total,
	.hg_detail tr.total td {
		font-weight: bold;
	}

	#hg_spieler_header th,
	#hg_header th,
	#hg_spieler_header_g th {
		text-align: left;
	}

	#hg_spieler_header th.hg_number,
	#hg_header th.hg_number,
	#hg_spieler_header_g th.hg_number {
		text-align: right;
		padding-right: 3px;
	}

	#hg_spieler,
	#hg_spieler_g {
		margin-top: 20px;
	}

	#hg_spieler tfoot,
	#hg_spieler_g tfoot {
		line-height: 2.2em;
	}

	#hg_spieler thead,
	#hg_spieler_g thead {
		line-height: 2.2em;
	}

	#hg_bericht {
		margin-top: 15px;
		width: 90%;
		margin-left: 15px;
		font-size: 14px;
	}

	#hg_ueber_spieler {
		margin-top: 5px;
	}

	#hg_header {
		margin-left: 10px;
	}

	#hg_header th {
		text-transform: uppercase;
		font-size: 10px;
		padding: 3px;
	}

	#hg_header .mannschaft {
		width: 200px;
	}

	#hg_header .hg_number {
		width: 100px;
	}

	#hg_first td,
	#hg_second td {
		font-size: 18px;
		padding: 3px;
	}

	#hg_first td {
		font-weight: bold;
	}

	.hg_detail a {
		text-decoration: none;
		color: black;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="datum">Datum</th>
			<th class="sort" data-sort="zeit">Zeit</th>
			<th class="sort" data-sort="art">Anlass</th>
			<th class="sort" data-sort="team">Mannschaft</th>
			<th class="sort" data-sort="gegner">Gegner</th>
			<th class="sort" data-sort="spielort">Ort</th>
			<th class="sort" data-sort="totalNr">Nr</th>
			<th class="sort" data-sort="schlagPunkte">Punkte</th>
			<th class="sort" data-sort="totalNrGegner">Nr Gegner</th>
			<th class="sort" data-sort="schlagPunkteGegner">Punkte Gegner</th>
			<th></th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="datumDisplay"></td>
		<td class="zeit"></td>
		<td class="art"></td>
		<td class="team"></td>
		<td class="gegner"></td>
		<td class="spielort"></td>
		<td class="totalNr hg_number"></td>
		<td class="schlagPunkte hg_number"></td>
		<td class="totalNrGegner hg_number"></td>
		<td class="schlagPunkteGegner hg_number"></td>
		<td>
			<a href="#" class="spiellistelink"></a>
		</td>
	</tr>
</table>

<script>
	(function () {

		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			if (tdElements[v].classList.length > 0) {
				valueNames.push(tdElements[v].classList[0]);
			}
		}
		valueNames.push({ data: ['id'] });
		valueNames.push('spiellistelink');

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spiele/' + teams.join(',') + '?jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var now = Date.now();

			results.forEach(function (row) {
				row.datumDisplay = row.datum.substring(8, 10) + '.' + row.datum.substring(5, 7) + '.' + row.datum.substring(0, 4);
				row.zeit = row.datum.substring(11);
				var sd = new Date(parseInt(row.datum.substring(0, 4)), parseInt(row.datum.substring(5, 7)) - 1, parseInt(row.datum.substring(8, 10)));

				if (sd.getTime() <= now) {
					row.spiellistelink = 'Spielliste';
				}
			});
			dataList.add(results);

			dataList.sort('datum', { order: "asc" });

			var i = 0;
			var rows = document.getElementById('hg_data').getElementsByTagName('tr');
			for (; i < rows.length; i++) {
				var spielId = rows[i].dataset.id;
				if (spielId) {
					var atags = rows[i].getElementsByTagName('a');
					for (var j = 0; j < atags.length; j++) {
						(function () {
							var atag = atags[j];
							var sid = spielId;
							atag.addEventListener("click", function () {
								var modal = new tingle.modal({
									footer: false,
									stickyFooter: false,
									closeMethods: ['overlay', 'button', 'escape'],
									closeLabel: "Schliessen",
								});

								showDetail(modal, sid);

							});
						})();
					}
				}
			}
		}

		function showDetail(modal, spielId) {
			var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spiel/' + spielId + '?gegner=1';

			fetch(url).then(function (response) {
				return response.json();
			}).then(function (result) {
				modal.setContent(createDetailHtml(result));
				modal.open();
			});
		}

		function createDetailHtml(result) {
			var html = [];

			var d = result.datum;

			var map = {
				hg_art: result.art,
				hg_datum: d.substring(8, 10) + '.' + d.substring(5, 7) + '.' + d.substring(0, 4) + ' ' + d.substring(11)
			};

			map.hg_mann1 = result.team;
			map.hg_rp1 = result.rangPunkte;
			map.hg_nr1 = result.totalNr;
			map.hg_pu1 = result.schlagPunkte;

			map.hg_mann2 = result.gegner;
			map.hg_rp2 = result.rangPunkteGegner;
			map.hg_nr2 = result.totalNrGegner;
			map.hg_pu2 = result.schlagPunkteGegner;


			map.hg_bericht = result.bericht ? result.bericht : '';

			html.push('<div class="hg_detail">');
			html.push('<h1 id="hg_title">' + map.hg_art + ' vom ' + map.hg_datum + '</h1>');
			html.push('<table id="hg_header">');
			html.push('<tr>');
			html.push('<th class="mannschaft">Mannschaft</th>');
			if (result.meisterschaft) {
				html.push('<th class="hg_number">Rangpunkte</th>');
			}
			html.push('<th class="hg_number">Nummer</th>');
			html.push('<th class="hg_number">Punkte</th>');
			html.push('</tr>');
			html.push('<tr id="hg_first">');

			html.push('<td>' + map.hg_mann1 + '</td>');
			if (result.meisterschaft) {
				html.push('<td class="hg_number">' + (map.hg_rp1 != null ? map.hg_rp1 : '') + '</td>');
			}
			html.push('<td class="hg_number">' + (map.hg_nr1 != null ? map.hg_nr1 : '') + '</td>');
			html.push('<td class="hg_number">' + (map.hg_pu1 != null ? map.hg_pu1 : '') + '</td>');
			html.push('</tr>');
			html.push('<tr id="hg_second">');
			html.push('<td>' + map.hg_mann2 + '</td>');
			if (result.meisterschaft) {
				html.push('<td class="hg_number">' + (map.hg_rp2 != null ? map.hg_rp2 : '') + '</td>');
			}
			html.push('<td class="hg_number">' + (map.hg_nr2 != null ? map.hg_nr2 : '') + '</td>');
			html.push('<td class="hg_number">' + (map.hg_pu2 != null ? map.hg_pu2 : '') + '</td>');
			html.push('</tr>');
			html.push('</table>');

			html.push('<div id="hg_bericht">' + map.hg_bericht + '</div>');

			if (!result.spieler || result.spieler.len === 0) {
				html.push('</div>');
				return html.join('');
			}

			html.push(createPunkte(result, 'spieler', ''));
			if (result.gegnerSpieler) {
				html.push(createPunkte(result, 'gegnerSpieler', '_g'));
			}
			html.push('</div>');


			return html.join('');
		}

		function createPunkte(result, spielerProperty, postfix) {
			var code = [];
			code.push('<table id="hg_spieler' + postfix + '">');
			code.push('<thead>');
			code.push('<tr id="hg_spieler_header' + postfix + '">');


			// Header			
			code.push('<th class="reihenfolge hg_number">#</th>');
			code.push('<th>Name</th>');
			code.push('<th>Vorname</th>');

			for (var r = 0; r < result.anzahlRies; r++) {
				code.push('<th class="hg_number">' + (r + 1) + '</th>');
			}

			code.push('<th class="hg_number">Total</th>');

			if (result.meisterschaft) {
				code.push('<th class="hg_number">RP</th>');
			}
			if (result.fest) {
				code.push('<th>Ausz.</th>');
			}			

			code.push('</tr>');
			code.push('</thead>');
			code.push('<tbody>');

			// Spieler
			var spieler = [];
			result[spielerProperty].forEach(function (row) {
				if (!row.ueberzaehlig) {
					spieler.push(createSpielerRow(result, row));
				}
			});

			Array.prototype.push.apply(code, spieler);

			code.push('</tbody>');
			code.push('<tfoot>');


			// Total Row
			var totals = [0, 0, 0, 0, 0, 0, 0, 0];
			var grandeTotal = 0;

			result[spielerProperty].forEach(function (row) {
				if (!row.ueberzaehlig) {
					for (var l = 0; l < row.ries.length; l++) {
						if (row.ries[l] !== null) {
							totals[l] += row.ries[l];
							grandeTotal += row.ries[l];
						}
					}
				}
			});

			code.push('<tr class="total">');
			code.push('<td colspan="3"></td>');

			for (var r = 0; r < result.anzahlRies; r++) {
				code.push('<td class="hg_number">' + totals[r] + '</td>');
			}
			code.push('<td class="hg_number">' + grandeTotal + '</td>');
			code.push('</tr>');


			code.push('</tfoot>');
			code.push('</table>');


			// Ueberzaehlige Spieler

			code.push('<table id="hg_ueber_spieler">');
			code.push('<tbody>');

			var ueberSpieler = [];
			result[spielerProperty].forEach(function (row) {
				if (row.ueberzaehlig) {
					ueberSpieler.push(createSpielerRow(result, row));
				}
			});

			Array.prototype.push.apply(code, ueberSpieler);

			code.push('</tbody>');
			code.push('</table>');

			return code.join('');
		}

		function createSpielerRow(result, spieler) {
			var len = result.anzahlRies;
			var ms = result.meisterschaft;
			var fest = result.fest;
			
			var rowTotal = 0;

			var row = [
				'<tr>',
				'<td class="reihenfolge hg_number">' + spieler.reihenfolge + '</td>',
				'<td class="nachname">' + spieler.nachname + '</td>',
				'<td class="vorname">' + spieler.vorname + '</td>',
			];

			for (var r = 0; r < len; r++) {
				var rs = '<td class="ries hg_number">';
				var value = spieler.ries[r];
				if (spieler.nr[r]) {
					rs += '<span class="nr">';
				}

				if (value !== null) {
					rowTotal += value;
					if (value < 10) {
						rs += '0';
					}
					rs += value;
				}

				if (spieler.nr[r]) {
					rs += '</span>';
				}

				row.push(rs + '</td>');

			}

			row.push('<td class="total hg_number">' + rowTotal + '</td>');

			if (ms) {
				row.push('<td class="rangpunkt hg_number">' + (spieler.rangpunkte ? spieler.rangpunkte : '') + '</td>');
			}
			if (fest) {
				row.push('<td>' + (spieler.auszeichnung ? spieler.auszeichnung : '') + '</td>');
			}			

			row.push('</tr>');
			return row.join('');
		}

	})();

</script>

Terminübersicht der Spiele einer Saison mit Resultaten und der Spielliste als Popup mit Gegnerliste

Übersicht der Spiele ohne Mannschaft
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_jahrSelect,
	#hg_data {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data td,
	#hg_data th {
		padding-left: 3px;
		padding-right: 10px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}
</style>

<select id="hg_jahrSelect"></select>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="datum">Datum</th>
			<th class="sort" data-sort="zeit">Zeit</th>
			<th class="sort" data-sort="art">Anlass</th>
			<th class="sort" data-sort="gegner">Gegner</th>
			<th class="sort" data-sort="spielort">Ort</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="datumDisplay"></td>
		<td class="zeit"></td>
		<td class="art"></td>
		<td class="gegner"></td>
		<td class="spielort"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var team = 'A';

			if (jahr && team) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spiele/' + team + '?jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			results.forEach(function (row) {
				row.datumDisplay = row.datum.substring(8, 10) + '.' + row.datum.substring(5, 7) + '.' + row.datum.substring(0, 4);
				row.zeit = row.datum.substring(11);
			});
			dataList.add(results);

			dataList.sort('datum', { order: "asc" });
		}

	})();

</script>

Terminübersicht der Spiele einer Saison ohne eigene Mannschaftsspalte

Anlässe
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_jahrSelect,
	#hg_inklSpiele,
	#hg_data {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_inklSpiele {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data td,
	#hg_data th {
		padding-left: 3px;
		padding-right: 10px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}
</style>

<select id="hg_jahrSelect"></select>
<span id="hg_inklSpiele">
	<input type="radio" name="inklSpiele" value="0" checked>Nur Anl&auml;sse
	<input type="radio" name="inklSpiele" value="1">Anl&auml;sse + Spiele
</span>
<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="datum">Start</th>
			<th class="sort" data-sort="zeit">Zeit</th>
			<th class="sort" data-sort="ende">Ende</th>
			<th class="sort" data-sort="endeZeit">Zeit</th>			
			<th class="sort" data-sort="art">Anlass</th>
			<th class="sort" data-sort="team">Team</th>
			<th class="sort" data-sort="ort">Ort</th>
			<th class="sort" data-sort="ha">H/A</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="datumDisplay"></td>
		<td class="zeit"></td>
		<td class="endeDisplay"></td>
		<td class="endeZeit"></td>		
		<td class="anlass"></td>
		<td class="team"></td>
		<td class="ort"></td>
		<td class="ha"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}

		var aktuellesJahr = (new Date()).getFullYear();
		var jahrSelect = document.getElementById('hg_jahrSelect');
		var option = document.createElement("option");
		option.text = aktuellesJahr;
		option.value = aktuellesJahr;
		jahrSelect.appendChild(option);

		option = document.createElement("option");
		option.text = aktuellesJahr + 1;
		option.value = aktuellesJahr + 1;
		jahrSelect.appendChild(option);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);
		document.getElementById('hg_jahrSelect').addEventListener("change", getData);

		var allRadios = document.getElementById('hg_inklSpiele').querySelectorAll("input");
		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		getData();

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var inklSpiele = document.querySelector('#hg_inklSpiele input[name="inklSpiele"]:checked').value;

			if (jahr) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/anlaesse/?jahr=' + jahr + '&inklSpiele=' + inklSpiele;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			results.forEach(function (row) {
				row.datumDisplay = row.datum.substring(8, 10) + '.' + row.datum.substring(5, 7) + '.' + row.datum.substring(0, 4);
				var z = row.datum.substring(11);
				if (!row.ganzerTag) {
					row.zeit = z;
				}
				else {
					row.zeit = null;
				}
				if (row.ende) {
					row.endeDisplay = row.ende.substring(8, 10) + '.' + row.ende.substring(5, 7) + '.' + row.ende.substring(0, 4);
					var z = row.ende.substring(11);
					if (!row.ganzerTag) {
						row.endeZeit = z;
					}
					else {
						row.endeZeit = null;
					}
				}
			});
			dataList.add(results);

			dataList.sort('datum', { order: "asc" });
		}

	})();

</script>

Übersicht der Anlässe mit der zusätzlichen Anzeige der Spiele (komplettes Jahresprogramm)

Auswertungen Mannschaft

HTML-CodeBeschreibungBeispiel

Mannschaftsdurchschnitt
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}
	
	#hg_data td {
	    width: 40px;
		white-space: nowrap;
	}	

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td.art {
		width: 200px;
	}

	#hg_data td.gegner {
		width: 200px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect"></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th colspan="3"></th>
			<th colspan="8">Ries</th>
			<th colspan="3">Spiel</th>
			<th colspan="3">Kumuliert</th>
			<th colspan="2">Streich</th>
			<th colspan="3">Total</th>
			<th></th>
		</tr>
		<tr>
			<th class="sort" data-sort="datum">Datum</th>
			<th class="sort" data-sort="art">Art</th>
			<th class="sort" data-sort="gegner">Gegner</th>
			<th class="sort hg_number" data-sort="ries1">1</th>
			<th class="sort hg_number" data-sort="ries2">2</th>
			<th class="sort hg_number" data-sort="ries3">3</th>
			<th class="sort hg_number" data-sort="ries4">4</th>
			<th class="sort hg_number" data-sort="ries5">5</th>
			<th class="sort hg_number" data-sort="ries6">6</th>
			<th class="sort hg_number" data-sort="ries7">7</th>
			<th class="sort hg_number" data-sort="ries8">8</th>
			<th class="sort hg_number" data-sort="punkte">Punkte</th>
			<th class="sort hg_number" data-sort="streiche">Streiche</th>
			<th class="sort hg_number" data-sort="schnitt">Durchschnitt</th>
			<th class="sort hg_number" data-sort="punkteKumuliert">Punkte</th>
			<th class="sort hg_number" data-sort="streicheKumuliert">Streiche</th>
			<th class="sort hg_number" data-sort="schnittKumuliert">Durchschnitt</th>
			<th class="sort hg_number" data-sort="laengsterStreich">L&auml;ngster</th>
			<th class="sort hg_number" data-sort="kuerzesterStreich">K&uuml;rzester</th>
			<th class="sort hg_number" data-sort="hoechstesTotal">H&ouml;chstes</th>
			<th class="sort hg_number" data-sort="tiefstesTotal">Tiefstes</th>	
			<th class="sort hg_number" data-sort="punkteTotalSchnitt">Durchschnitt</th>	
			<th class="sort hg_number" data-sort="rangpunkte">Rangpunkte</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="datumDisplay"></td>
		<td class="art"></td>
		<td class="gegner"></td>
		<td class="ries1 hg_number"></td>
		<td class="ries2 hg_number"></td>
		<td class="ries3 hg_number"></td>
		<td class="ries4 hg_number"></td>
		<td class="ries5 hg_number"></td>
		<td class="ries6 hg_number"></td>
		<td class="ries7 hg_number"></td>
		<td class="ries8 hg_number"></td>
		<td class="punkte hg_number"></td>
		<td class="streiche hg_number"></td>
		<td class="schnitt hg_number"></td>
		<td class="punkteKumuliert hg_number"></td>
		<td class="streicheKumuliert hg_number"></td>
		<td class="schnittKumuliert hg_number"></td>
		<td class="laengsterStreich hg_number"></td>
		<td class="kuerzesterStreich hg_number"></td>
		<td class="hoechstesTotal hg_number"></td>
		<td class="tiefstesTotal hg_number"></td>						
		<td class="punkteTotalSchnitt hg_number"></td>
		<td class="rangpunkte hg_number"></td>
	</tr>
	<tr id="hg_total_tr">
		<td colspan="3" class="total_label"></td>
		<td class="total_ries1 hg_number"></td>
		<td class="total_ries2 hg_number"></td>
		<td class="total_ries3 hg_number"></td>
		<td class="total_ries4 hg_number"></td>
		<td class="total_ries5 hg_number"></td>
		<td class="total_ries6 hg_number"></td>
		<td class="total_ries7 hg_number"></td>
		<td class="total_ries8 hg_number"></td>
		<td class="total_punkte hg_number"></td>
		<td class="total_streiche hg_number"></td>
		<td class="total_schnitt hg_number"></td>
		<td colspan="7"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var team = document.getElementById('hg_teamSelect').value;
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && team) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/mannschaftsdurchschnitt/' + team + '?alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			//remove total rows
			var tfoot = document.getElementById('hg_data').getElementsByTagName('tfoot')[0];
			while (tfoot.firstChild) {
				tfoot.removeChild(tfoot.firstChild);
			}

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var totalRies = [];
			var totalPunkte = 0;
			var totalStreiche = 0;
			var i;
			for (i = 0; i < 8; i++) {
				totalRies.push(0);
			}

			results.forEach(function (row) {
				if (row.punkte) {
					totalPunkte += row.punkte;
				}
				if (row.streiche) {
					totalStreiche += row.streiche;
				}
				if (row.schnitt) {
					row.schnitt = row.schnitt.toFixed(2);
				}
				if (row.schnittKumuliert) {
					row.schnittKumuliert = row.schnittKumuliert.toFixed(2);
				}
				if (row.punkteTotalSchnitt) {
					row.punkteTotalSchnitt = row.punkteTotalSchnitt.toFixed(2);
				}

				row.datumDisplay = row.datum.substring(8, 10) + '.' + row.datum.substring(5, 7) + '.' + row.datum.substring(0, 4);
				for (i = 0; i < 8; i++) {
					if (row['ries' + (i + 1)]) {
						totalRies[i] += row['ries' + (i + 1)];
					}
				}
			});
			dataList.add(results);
			dataList.sort('datum', { order: "asc" });

			var totalRow = document.getElementById('hg_total_tr').cloneNode(true);
			for (i = 0; i < 8; i++) {
				if (totalRies[i] > 0) {
					totalRow.querySelector(".total_ries" + (i + 1)).textContent = totalRies[i];
				}
			}
			totalRow.querySelector(".total_punkte").textContent = totalPunkte;
			totalRow.querySelector(".total_streiche").textContent = totalStreiche;

			if (totalPunkte && totalStreiche) {
				var schnitt = (totalPunkte / totalStreiche).toFixed(2);
				totalRow.querySelector(".total_schnitt").textContent = schnitt;
			}

			tfoot.appendChild(totalRow);
		}

	})();

</script>

Mannschaftsdurchschnitt mit diversen Zahlen

Mannschaftsstreiche
<!doctype html>

<html lang="en">

<head>
	<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
	<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
	<script src="https://hgverwaltung.ch/static/chart-2.7.3.min.js"></script>

	<style>
		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		}

		#hg_jahrSelect,
		#hg_alle,
		#hg_alle input {
			vertical-align: top;
		}
	</style>
</head>

<body>
	<select id="hg_jahrSelect"></select>
	<span id="hg_alle">
		<input type="radio" name="alle" value="1" checked>Alle Spiele
		<input type="radio" name="alle" value="0">Nur Meisterschaft
	</span>

	<div id="chart-container" style="position: relative; height:100%; width:100%">
		<canvas id="chart"></canvas>
	</div>

	<script>
		(function () {
			var colorHelper = Chart.helpers.color;
			var colors = [
				"rgb(54, 162, 235)",
				"rgb(255, 99, 132)",
				"rgb(75, 192, 192)",
				"rgb(201, 203, 207)",
				"rgb(255, 159, 64)",
				"rgb(153, 102, 255)",
				"rgb(255, 205, 86)"
			];

			var club = hgutil.getParameterByName('club');
			if (!club) {
		  		club = 'test';
			}
			hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);

			document.getElementById('hg_jahrSelect').addEventListener("change", getData);

			var allRadios = document.getElementById('hg_alle').querySelectorAll("input");
			allRadios[0].addEventListener("change", getData);
			allRadios[1].addEventListener("change", getData);

			function getData() {
				var jahr = document.getElementById('hg_jahrSelect').value;
				var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

				if (jahr) {
					var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/streicheProMannschaft?alle=' + alle + '&jahr=' + jahr;
					fetch(url).then(function (response) {
						return response.json();
					}).then(function (results) {
						drawChart(results);
					});
				}
				else {
					drawChart([]);
				}
			}

			function drawChart(results) {
				if (!results && results.length === 0) {
					return;
				}

				var labels = results.map(function (row) {
					return row.streich;
				});

				var teams = [];
				Object.keys(results[0]).forEach(function (k) {
					if (k !== 'streich') {
						teams.push(k);
					}
				});

				var datasets = {};
				var i = 0;
				for (; i < teams.length; i++) {
					datasets[teams[i]] = {
						label: teams[i],
						data: [],
						borderWidth: 1,
						backgroundColor: colorHelper(colors[i % 7]).alpha(0.5).rgbString(),
						borderColor: colors[i % 7],
					};
				}

				results.forEach(function (row) {
					teams.forEach(function (t) {
						datasets[t].data.push(row[t]);
					});
				});

				var ds = [];
				teams.forEach(function (t) {
					ds.push(datasets[t]);
				});


				var ctx = document.getElementById("chart").getContext('2d');
				var myChart = new Chart(ctx, {
					type: 'bar',
					data: {
						labels: labels,
						datasets: ds
					},
					options: {
						events: ['click'],
						scales: {
							yAxes: [{
								ticks: {
									beginAtZero: true
								}
							}]
						}
					}
				});

			}

		})();
	</script>
</body>

</html>

Geschlagene Streiche einer Mannschaft in einem Säulendiagramm

Rangpunkte
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<link rel="stylesheet" href="https://hgverwaltung.ch/static/hint.base-2.5.0.min.css"></link>

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td.nachname {
		width: 200px;
	}

	#hg_data td.vorname {
		width: 200px;
	}

	#hg_data td.total {
		width: 70px;
		font-weight: bold;
	}

	#hg_data td.over20 {
		background-color: lightgreen;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect"></select>
<select id="hg_jahrSelect"></select>

<table id="hg_data" style="display: none;">
	<thead>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
	</tr>
	<tr id="hg_total_tr">
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?ignoriereNachwuchs=true&spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();
		hgDataTable.createTHead();

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/rangpunkte/' + teams.join(',') + '?jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData({ rangpunkte: [], spielInfos: [] });
			}
		}

		function getHeader(spielInfos) {
			var code = [];

			code.push('<tr>');
			code.push('<th class="sort" data-sort="nachname">Nachname</th>');
			code.push('<th class="sort" data-sort="vorname">Vorname</th>');
			for (var i = 0; i < spielInfos.length; i++) {
				code.push('<th class="sort hg_number" data-sort="spiel_' + (i + 1) + '"><span class="hint--top" aria-label="' + spielInfos[i].gegner + '">' + spielInfos[i].datum + '</span></th>');
			}
			code.push('<th class="sort hg_number" data-sort="total">Total</th>');
			code.push('<th class="sort hg_number" data-sort="totalVorjahr">Total Vorjahr</th>');
			code.push('</tr>');

			return code.join('');
		}

		function getTemplateRow(len) {
			var code = [];
			code.push('<td class="nachname"></td>');
			code.push('<td class="vorname"></td>');

			for (var i = 0; i < len; i++) {
				code.push('<td class="spiel_' + (i + 1) + ' hg_number"></td>');
			}
			code.push('<td class="total hg_number"></td>');
			code.push('<td class="totalVorjahr hg_number"></td>');

			return code.join('');
		}

		function getTotalTemplateRow(len) {
			var code = [];
			code.push('<td colspan="2" class="total_label"></td>');
			for (var i = 0; i < len; i++) {
				code.push('<td class="total_' + (i + 1) + ' hg_number"></td>');
			}
			code.push('<td></td>');
			code.push('<td></td>');
			return code.join('');
		}

		function showData(results) {

			//remove datatable content
			var tfoot = document.getElementById('hg_data').getElementsByTagName('tfoot')[0];
			while (tfoot.firstChild) {
				tfoot.removeChild(tfoot.firstChild);
			}
			var thead = document.getElementById('hg_data').getElementsByTagName('thead')[0];
			while (thead.firstChild) {
				thead.removeChild(thead.firstChild);
			}
			var tbody = document.getElementById('hg_data').getElementsByTagName('tbody')[0];
			while (tbody.firstChild) {
				tbody.removeChild(tbody.firstChild);
			}

			if (results.spielInfos.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			thead.innerHTML = getHeader(results.spielInfos);

			var templateRow = document.getElementById('hg_tr_template');
			templateRow.innerHTML = getTemplateRow(results.spielInfos.length);

			var totalTemplateRow = document.getElementById('hg_total_tr');
			totalTemplateRow.innerHTML = getTotalTemplateRow(results.spielInfos.length);

			var totals = [];
			var over20 = [];
			var noSpieler = [];

			var i;
			for (i = 0; i < results.spielInfos.length; i++) {
				totals[i] = 0;
				over20[i] = 0;
				noSpieler[i] = 0;
			}

			results.rangpunkte.forEach(function (row) {
				for (var i = 0; i < results.spielInfos.length; i++) {
					if (row.rangpunkte && row.rangpunkte[i]) {
						var rp = row.rangpunkte[i];
						row['spiel_' + (i + 1)] = rp;
						totals[i] += rp;
						if (rp >= 20) {
							over20[i]++;
						}
						noSpieler[i]++;
					}
				}
			});


			var valueNames = [];
			var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
			for (var v = 0; v < tdElements.length; v++) {
				valueNames.push(tdElements[v].classList[0]);
			}

			var options = {
				valueNames: valueNames,
				listClass: 'hg_list',
				item: 'hg_tr_template'
			};

			var dataList = new List('hg_data', options);
			dataList.add(results.rangpunkte);

			// css class 'over20' hinzufügen wenn rangpunkt grösser oder gleich 20 ist
			var tds = document.getElementById('hg_data').getElementsByTagName('td');
			for (i = 0; i < tds.length; i++) {
				var td = tds[i];
				if (td.classList.contains("hg_number") && !td.classList.contains("total") && !td.classList.contains("totalVorjahr")) {
					if (parseInt(td.textContent) >= 20) {
						td.classList.add('over20');
					}
				}
			}

			//sortierung nach total
			dataList.sort('total', { order: "desc" });

			// total rangpunkte
			var totalRow = document.getElementById('hg_total_tr').cloneNode(true);
			totalRow.querySelector(".total_label").textContent = 'Total';
			for (i = 0; i < totals.length; i++) {
				totalRow.querySelector(".total_" + (i + 1)).textContent = totals[i];
			}
			tfoot.appendChild(totalRow);

			// 20 und mehr
			totalRow = document.getElementById('hg_total_tr').cloneNode(true);
			totalRow.querySelector(".total_label").textContent = '20 Rangpunkte und mehr';
			for (i = 0; i < over20.length; i++) {
				totalRow.querySelector(".total_" + (i + 1)).textContent = over20[i];
			}
			tfoot.appendChild(totalRow);

			// total spieler
			totalRow = document.getElementById('hg_total_tr').cloneNode(true);
			totalRow.querySelector(".total_label").textContent = 'Spieler mit Rangpunkten';
			for (i = 0; i < noSpieler.length; i++) {
				totalRow.querySelector(".total_" + (i + 1)).textContent = noSpieler[i];
			}
			tfoot.appendChild(totalRow);

		}

	})();

</script>

Übersicht der erzielten Rangpunkte einer Mannschaft

Durchschnitt
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td {
		width: 40px;
		white-space: nowrap;
	}

	#hg_data td.nachname {
		width: 200px;
	}

	#hg_data td.vorname {
		width: 200px;
	}

	#hg_data td.diff.positive {
		background-color: lightgreen;
	}

	#hg_data td.diff.negative {
		background-color: lightcoral;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="nachname">Nachname</th>
			<th class="sort" data-sort="vorname">Vorname</th>
			<th class="sort hg_number" data-sort="punkte">Punkte</th>
			<th class="sort hg_number" data-sort="streiche">Streiche</th>
			<th class="sort hg_number" data-sort="schnitt">Durchschnitt</th>
			<th class="sort hg_number" data-sort="diff">Ver&auml;nderung Vorjahr</th>
			<th id="hg_rangpunkte_header" class="sort hg_number" data-sort="rangpunkte">Rangpunkte</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="nachname"></td>
		<td class="vorname"></td>
		<td class="punkte hg_number"></td>
		<td class="streiche hg_number"></td>
		<td class="schnitt hg_number"></td>
		<td class="diff hg_number"></td>
		<td class="rangpunkte hg_number"></td>
	</tr>
	<tr id="hg_total_tr">
		<td colspan="2" class="total_label"></td>
		<td class="total_punkte hg_number"></td>
		<td class="total_streiche hg_number"></td>
		<td class="total_schnitt hg_number"></td>
		<td></td>
		<td class="total_rangpunkte hg_number" id="hg_rangpunkte_footer"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/durchschnitt/' + teams.join(',') + '?alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			//remove total rows
			var tfoot = document.getElementById('hg_data').getElementsByTagName('tfoot')[0];
			while (tfoot.firstChild) {
				tfoot.removeChild(tfoot.firstChild);
			}

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var totalPunkte = 0;
			var totalStreiche = 0;
			var totalRp = 0;
			var totalRies = [];
			for (i = 0; i < 8; i++) {
				totalRies.push(0);
			}

			results.forEach(function (row) {
				if (row.schnitt && row.schnittVorjahr) {
					row.diff = (parseFloat(row.schnitt) - parseFloat(row.schnittVorjahr)).toFixed(2);
				}

				if (row.schnitt) {
					row.schnitt = row.schnitt.toFixed(2);
				}

				if (row.streiche) {
					totalStreiche += row.streiche;
				}

				if (row.punkte) {
					totalPunkte += row.punkte;
				}

				if (row.rangpunkte) {
					totalRp += row.rangpunkte;
				}

			});
			dataList.add(results);

			// css class 'negative' und 'positive' in der diff spalte hinzufügen
			var i = 0;
			var diffTds = document.getElementById('hg_data').querySelectorAll('td.diff');
			for (; i < diffTds.length; i++) {
				var diffTd = diffTds[i];
				var value = parseFloat(diffTd.textContent);
				if (value >= 0) {
					diffTd.classList.add('positive');
				}
				else if (value < 0) {
					diffTd.classList.add('negative');
				}
			}

			//sortierung nach schnitt
			dataList.sort('schnitt', { order: "desc" });

			// mannschaftstotal
			if (totalStreiche > 0) {
				var totalRow = document.getElementById('hg_total_tr').cloneNode(true);
				totalRow.querySelector(".total_label").textContent = 'Mannschaftstotal';
				totalRow.querySelector(".total_punkte").textContent = totalPunkte;
				totalRow.querySelector(".total_streiche").textContent = totalStreiche;
				totalRow.querySelector(".total_schnitt").textContent = (totalPunkte / totalStreiche).toFixed(2);
				totalRow.querySelector(".total_rangpunkte").textContent = totalRp;
				tfoot.appendChild(totalRow);
			}

			// rangpunkte verstecken wenn nachwuchs
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			if (teams.length === 1 && teams[0] === 'NW') {
				document.getElementById('hg_rangpunkte_header').style.display = 'none';
				document.getElementById('hg_rangpunkte_footer').style.display = 'none';

				var rangpunkteTds = document.getElementById('hg_data').querySelectorAll("td.rangpunkte");
				for (i = 0; i < rangpunkteTds.length; i++) {
					rangpunkteTds[i].style.display = 'none';
				}
			}
			else {
				document.getElementById('hg_rangpunkte_header').style.display = '';
				document.getElementById('hg_rangpunkte_footer').style.display = '';
			}
		}

	})();

</script>

Durchschnittsübersicht einer Mannschaft inkl. Veränderung zum Vorjahr

Durchschnitt V2
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td {
		width: 40px;
		white-space: nowrap;
	}

	#hg_data td.nachname {
		width: 200px;
	}

	#hg_data td.vorname {
		width: 200px;
	}

	#hg_data td.diff.positive {
		background-color: lightgreen;
	}

	#hg_data td.diff.negative {
		background-color: lightcoral;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th colspan="2"></th>
			<th colspan="8">Ries</th>
			<th colspan="2"></th>
			<th colspan="3">Durchschnitt</th>
			<th></th>
			<th colspan="2">Streich</th>
			<th colspan="2">Spieldurchschnitt</th>
			<th colspan="2" id="hg_rangpunkte_title">Rangpunkte</th>
		</tr>
		<tr>
			<th class="sort" data-sort="nachname">Nachname</th>
			<th class="sort" data-sort="vorname">Vorname</th>
			<th class="sort hg_number" data-sort="ries1Total">1</th>
			<th class="sort hg_number" data-sort="ries2Total">2</th>
			<th class="sort hg_number" data-sort="ries3Total">3</th>
			<th class="sort hg_number" data-sort="ries4Total">4</th>
			<th class="sort hg_number" data-sort="ries5Total">5</th>
			<th class="sort hg_number" data-sort="ries6Total">6</th>
			<th class="sort hg_number" data-sort="ries7Total">7</th>
			<th class="sort hg_number" data-sort="ries8Total">8</th>
			<th class="sort hg_number" data-sort="punkte">Punkte</th>
			<th class="sort hg_number" data-sort="streiche">Streiche</th>
			<th class="sort hg_number" data-sort="schnitt">Selektiertes&nbsp;Jahr</th>
			<th class="sort hg_number" data-sort="schnittVorjahr">Vorjahr</th>
			<th class="sort hg_number" data-sort="diff">Ver&auml;nderung</th>
			<th class="sort hg_number" data-sort="stdAbw">Std.&nbsp;Abw.</th>
			<th class="sort hg_number" data-sort="laengsterStreich">L&auml;ngster</th>
			<th class="sort hg_number" data-sort="kuerzesterStreich">K&uuml;rzester</th>
			<th class="sort hg_number" data-sort="hoechsterSpielSchnitt">H&ouml;chster</th>
			<th class="sort hg_number" data-sort="tiefsterSpielSchnitt">Tiefster</th>
			<th id="hg_rangpunkte_header" class="sort hg_number" data-sort="rangpunkte">Selektiertes&nbsp;Jahr</th>
			<th id="hg_rangpunktevorjahr_header" class="sort hg_number" data-sort="rangpunkteVorjahr">Vorjahr</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="nachname"></td>
		<td class="vorname"></td>
		<td class="ries1Total hg_number"></td>
		<td class="ries2Total hg_number"></td>
		<td class="ries3Total hg_number"></td>
		<td class="ries4Total hg_number"></td>
		<td class="ries5Total hg_number"></td>
		<td class="ries6Total hg_number"></td>
		<td class="ries7Total hg_number"></td>
		<td class="ries8Total hg_number"></td>
		<td class="punkte hg_number"></td>
		<td class="streiche hg_number"></td>
		<td class="schnitt hg_number"></td>
		<td class="schnittVorjahr hg_number"></td>
		<td class="diff hg_number"></td>
		<td class="stdAbw hg_number"></td>
		<td class="laengsterStreich hg_number"></td>
		<td class="kuerzesterStreich hg_number"></td>
		<td class="hoechsterSpielSchnitt hg_number"></td>
		<td class="tiefsterSpielSchnitt hg_number"></td>
		<td class="rangpunkte hg_number"></td>
		<td class="rangpunkteVorjahr hg_number"></td>
	</tr>
	<tr id="hg_total_tr">
		<td colspan="2" class="total_label"></td>
		<td class="total_ries1Total hg_number"></td>
		<td class="total_ries2Total hg_number"></td>
		<td class="total_ries3Total hg_number"></td>
		<td class="total_ries4Total hg_number"></td>
		<td class="total_ries5Total hg_number"></td>
		<td class="total_ries6Total hg_number"></td>
		<td class="total_ries7Total hg_number"></td>
		<td class="total_ries8Total hg_number"></td>
		<td class="total_punkte hg_number"></td>
		<td class="total_streiche hg_number"></td>
		<td class="total_schnitt hg_number"></td>
		<td colspan="6"></td>
		<td class="total_rangpunkte hg_number" id="hg_rangpunkte_footer"></td>
		<td class="total_rangpunkteVorjahr hg_number" id="hg_rangpunktevorjahr_footer"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/durchschnitt/' + teams.join(',') + '?alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			//remove total rows
			var tfoot = document.getElementById('hg_data').getElementsByTagName('tfoot')[0];
			while (tfoot.firstChild) {
				tfoot.removeChild(tfoot.firstChild);
			}

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var totalPunkte = 0;
			var totalStreiche = 0;
			var totalRp = 0;
			var totalRpVorjahr = 0;
			var totalRies = [];
			for (i = 0; i < 8; i++) {
				totalRies.push(0);
			}

			results.forEach(function (row) {
				if (row.schnitt && row.schnittVorjahr) {
					row.diff = (parseFloat(row.schnitt) - parseFloat(row.schnittVorjahr)).toFixed(2);					
				}

				if (row.schnitt) {
					row.schnitt = row.schnitt.toFixed(2);
				}

				if (row.schnittVorjahr) {
					row.schnittVorjahr = row.schnittVorjahr.toFixed(2);
				}

				if (row.hoechsterSpielSchnitt) {
					row.hoechsterSpielSchnitt = row.hoechsterSpielSchnitt.toFixed(2);
				}

				if (row.tiefsterSpielSchnitt) {
					row.tiefsterSpielSchnitt = row.tiefsterSpielSchnitt.toFixed(2);
				}

				if (row.stdAbw) {
					row.stdAbw = row.stdAbw.toFixed(3);
				}

				if (row.streiche) {
					totalStreiche += row.streiche;
				}

				if (row.punkte) {
					totalPunkte += row.punkte;
				}

				if (row.rangpunkte) {
					totalRp += row.rangpunkte;
				}

				if (row.rangpunkteVorjahr) {
					totalRpVorjahr += row.rangpunkteVorjahr;
				}

				for (i = 0; i < 8; i++) {
					if (row['ries' + (i + 1) + 'Total']) {
						totalRies[i] += row['ries' + (i + 1) + 'Total'];
					}
				}
			});
			dataList.add(results);

			// css class 'negative' und 'positive' in der diff spalte hinzufügen
			var i = 0;
			var diffTds = document.getElementById('hg_data').querySelectorAll('td.diff');
			for (; i < diffTds.length; i++) {
				var diffTd = diffTds[i];
				var value = parseFloat(diffTd.textContent);
				if (value >= 0) {
					diffTd.classList.add('positive');
				}
				else if (value < 0) {
					diffTd.classList.add('negative');
				}
			}

			//sortierung nach schnitt
			dataList.sort('schnitt', { order: "desc" });

			// mannschaftstotal
			if (totalStreiche > 0) {
				var totalRow = document.getElementById('hg_total_tr').cloneNode(true);
				totalRow.querySelector(".total_label").textContent = 'Mannschaftstotal';
				totalRow.querySelector(".total_punkte").textContent = totalPunkte;
				totalRow.querySelector(".total_streiche").textContent = totalStreiche;
				totalRow.querySelector(".total_schnitt").textContent = (totalPunkte / totalStreiche).toFixed(2);
				totalRow.querySelector(".total_rangpunkte").textContent = totalRp;
				totalRow.querySelector(".total_rangpunkteVorjahr").textContent = totalRpVorjahr;

				for (i = 0; i < 8; i++) {
					if (totalRies[i] > 0) {
						totalRow.querySelector(".total_ries" + (i + 1) + "Total").textContent = totalRies[i];
					}
				}

				tfoot.appendChild(totalRow);
			}

			// rangpunkte verstecken wenn nachwuchs
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			if (teams.length === 1 && teams[0] === 'NW') {
				document.getElementById('hg_rangpunkte_header').style.display = 'none';
				document.getElementById('hg_rangpunktevorjahr_header').style.display = 'none';
				document.getElementById('hg_rangpunkte_footer').style.display = 'none';
				document.getElementById('hg_rangpunktevorjahr_footer').style.display = 'none';
				document.getElementById('hg_rangpunkte_title').style.display = 'none';

				var rangpunkteTds = document.getElementById('hg_data').querySelectorAll("td.rangpunkte");
				for (i = 0; i < rangpunkteTds.length; i++) {
					rangpunkteTds[i].style.display = 'none';
				}

				rangpunkteTds = document.getElementById('hg_data').querySelectorAll("td.rangpunkteVorjahr");
				for (i = 0; i < rangpunkteTds.length; i++) {
					rangpunkteTds[i].style.display = 'none';
				}
			}
			else {
				document.getElementById('hg_rangpunkte_header').style.display = '';
				document.getElementById('hg_rangpunktevorjahr_header').style.display = '';
				document.getElementById('hg_rangpunkte_footer').style.display = '';
				document.getElementById('hg_rangpunktevorjahr_footer').style.display = '';
				document.getElementById('hg_rangpunkte_title').style.display = '';
			}
		}

	})();

</script>

Durchschnittsübersicht einer Mannschaft mit allen möglichen Daten

Entwicklung des Durchschnitts
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_teamSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data td.hg_number.plus {
		background-color: lightgreen;
	}

	#hg_data td.hg_number.minus {
		background-color: lightcoral;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
		padding-left: 5px;
	}

	#hg_data td.nachname {
		width: 150px;
	}

	#hg_data td.vorname {
		width: 150px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<table id="hg_data" style="display: none;">
	<thead>
		<tr id="hg_header">
		</tr>
	</thead>
	<tbody id="hg_list" class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function getData() {
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/jahredurchschnitt/' + teams.join(',') + '?alle=' + alle;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData({ jahre: [] });
			}
		}

		function showData(results) {
			if (results.jahre.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var tableHeaderTr = document.getElementById('hg_header');
			while (tableHeaderTr.firstChild) {
				tableHeaderTr.removeChild(tableHeaderTr.firstChild);
			}

			var tableTemplateTr = document.getElementById('hg_tr_template');
			while (tableTemplateTr.firstChild) {
				tableTemplateTr.removeChild(tableTemplateTr.firstChild);
			}

			var hgList = document.getElementById('hg_list');
			while (hgList.firstChild) {
				hgList.removeChild(hgList.firstChild);
			}

			var th = document.createElement('th');
			th.classList.add('sort');
			th.dataset.sort = 'nachname';
			th.innerHTML = "Nachname";
			tableHeaderTr.appendChild(th);

			var td = document.createElement('td');
			td.classList.add('nachname');
			tableTemplateTr.appendChild(td);

			th = document.createElement('th');
			th.classList.add('sort');
			th.dataset.sort = 'vorname';
			th.innerHTML = "Vorname";
			tableHeaderTr.appendChild(th);

			td = document.createElement('td');
			td.classList.add('vorname');
			tableTemplateTr.appendChild(td);

			for (var j = 0; j < results.jahre.length; j++) {
				th = document.createElement('th');
				th.innerHTML = results.jahre[j];
				th.classList.add('hg_number');
				tableHeaderTr.appendChild(th);

				td = document.createElement('td');
				td.classList.add('j' + results.jahre[j]);
				td.classList.add('hg_number');
				tableTemplateTr.appendChild(td);
			}

			var valueNames = ['nachname', 'vorname'];
			for (var y = 0; y < results.jahre.length; y++) {
				valueNames.push('j' + results.jahre[y]);
			}

			var options = {
				valueNames: valueNames,
				listClass: 'hg_list',
				item: 'hg_tr_template'
			};

			var dataList = new List('hg_data', options);

			results.spieler.forEach(function (row) {
				for (var y = 0; y < results.jahre.length; y++) {
					var rs = row.schnitt[y];
					if (rs) {
						row['j' + results.jahre[y]] = rs.toFixed(2);
					}
				}
			});

			dataList.add(results.spieler);

			// css class 'minus' und 'plus' hinzufügen
			var i = 0;
			var srows = document.getElementById('hg_list').querySelectorAll('tr');
			for (; i < srows.length; i++) {
				var srow = srows[i];
				var tds = srow.querySelectorAll('.hg_number');
				var lastValue, value;
				if (tds.length >= 1) {
					lastValue = parseFloat(tds[0].textContent);
				}
				for (var j = 1; j < tds.length; j++) {
					if (tds[j].textContent !== '') {
						value = parseFloat(tds[j].textContent);
						if (value >= lastValue) {
							tds[j].classList.add('plus');
						}
						else if (value < lastValue) {
							tds[j].classList.add('minus');
						}
						lastValue = value;
					}
				}
			}

			//sortierung nach nachname
			dataList.sort('nachname', { order: "asc" });
		}

	})();

</script>

Entwicklung des Durchschnittes einer Mannschaft seit Erfassung der Resultate

Entwicklung des Durchschnitts V2
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<script src="https://hgverwaltung.ch/static/tingle-0.13.2.min.js"></script>
<script src="https://hgverwaltung.ch/static/chart-2.7.3.min.js"></script>
<link href="https://hgverwaltung.ch/static/tingle-0.13.2.min.css" rel="stylesheet">

<style>
	#hg_teamSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data td.hg_number.plus {
		background-color: lightgreen;
	}

	#hg_data td.hg_number.minus {
		background-color: lightcoral;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
		padding-left: 5px;
	}

	#hg_data td.nachname {
		width: 150px;
		text-decoration: underline;
		text-decoration-color: gray;
	}

	#hg_data td.vorname {
		width: 150px;
		text-decoration: underline;
		text-decoration-color: gray;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<table id="hg_data" style="display: none;">
	<thead>
		<tr id="hg_header">
		</tr>
	</thead>
	<tbody id="hg_list" class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		var dataList;
		var jahre;

		function getData() {
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/jahredurchschnitt/' + teams.join(',') + '?alle=' + alle;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData({ jahre: [] });
			}
		}

		function showData(results) {
			if (results.jahre.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var tableHeaderTr = document.getElementById('hg_header');
			while (tableHeaderTr.firstChild) {
				tableHeaderTr.removeChild(tableHeaderTr.firstChild);
			}

			var tableTemplateTr = document.getElementById('hg_tr_template');
			while (tableTemplateTr.firstChild) {
				tableTemplateTr.removeChild(tableTemplateTr.firstChild);
			}

			var hgList = document.getElementById('hg_list');
			while (hgList.firstChild) {
				hgList.removeChild(hgList.firstChild);
			}

			var th = document.createElement('th');
			th.classList.add('sort');
			th.dataset.sort = 'nachname';
			th.innerHTML = "Nachname";
			tableHeaderTr.appendChild(th);

			var td = document.createElement('td');
			td.classList.add('nachname');
			tableTemplateTr.appendChild(td);

			th = document.createElement('th');
			th.classList.add('sort');
			th.dataset.sort = 'vorname';
			th.innerHTML = "Vorname";
			tableHeaderTr.appendChild(th);

			td = document.createElement('td');
			td.classList.add('vorname');
			tableTemplateTr.appendChild(td);

			jahre = results.jahre;

			for (var j = 0; j < results.jahre.length; j++) {
				th = document.createElement('th');
				th.innerHTML = results.jahre[j];
				th.classList.add('hg_number');
				tableHeaderTr.appendChild(th);

				td = document.createElement('td');
				td.classList.add('j' + results.jahre[j]);
				td.classList.add('hg_number');
				tableTemplateTr.appendChild(td);
			}

			var valueNames = ['nachname', 'vorname'];
			for (var y = 0; y < results.jahre.length; y++) {
				valueNames.push('j' + results.jahre[y]);
			}

			var options = {
				valueNames: valueNames,
				listClass: 'hg_list',
				item: 'hg_tr_template'
			};

			dataList = new List('hg_data', options);

			results.spieler.forEach(function (row) {
				for (var y = 0; y < results.jahre.length; y++) {
					var rs = row.schnitt[y];
					if (rs) {
						row['j' + results.jahre[y]] = rs.toFixed(2);
					}
				}
			});

			dataList.add(results.spieler);

			// css class 'minus' und 'plus' hinzufügen
			var i = 0;
			var srows = document.getElementById('hg_list').querySelectorAll('tr');
			for (; i < srows.length; i++) {
				var srow = srows[i];
				var tds = srow.querySelectorAll('.hg_number');
				var lastValue, value;
				if (tds.length >= 1) {
					lastValue = parseFloat(tds[0].textContent);
				}
				for (var j = 1; j < tds.length; j++) {
					if (tds[j].textContent !== '') {
						value = parseFloat(tds[j].textContent);
						if (value >= lastValue) {
							tds[j].classList.add('plus');
						}
						else if (value < lastValue) {
							tds[j].classList.add('minus');
						}
						lastValue = value;
					}
				}
			}

			//sortierung nach nachname
			dataList.sort('nachname', { order: "asc" });

			addClicklistener('nachname');
			addClicklistener('vorname');
		}

		function addClicklistener(field) {
			var names = document.getElementsByClassName(field);
			var n = 0;
			for (; n < names.length; n++) {
				(function () {
					var row = n;
					names[n].addEventListener('click', function () {						
						onSpielerClick(row)
					}, false);
				})();
			}
		}

		function onSpielerClick(row) {
			showDiagram(dataList.items[row]._values);
		}

		function showDiagram(result) {
			var modal = new tingle.modal({
				footer: false,
				stickyFooter: false,
				closeMethods: ['overlay', 'button', 'escape'],
				closeLabel: "Schliessen",
			});
			modal.setContent(createDiagramHtml(result));
			modal.open();
			drawChart(result);
		}

		function drawChart(results) {
			var data = results.schnitt;
			var labels = jahre;

			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'line',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: data,
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'blue',
						lineTension: 0
					}]
				},
				options: {
					title: {
						display: true,
						text: results.nachname + ' ' + results.vorname,
						fontSize: 14
					},
					legend: {
						display: false
					},
					scales: {
						xAxes: [{
							gridLines: {
								display: true
							}
						}],
						yAxes: [{
							display: true,
							ticks: {
								min: 0,
								stepSize: 5
							}
						}]
					}
				}
			});

		}		

		function createDiagramHtml(result) {
			var html = [];

			html.push('<div id="chart-container" style="position: relative; width:100%">');
			html.push('<canvas id="chart"></canvas>');
			html.push('</div>');

			return html.join('');
		}

	})();

</script>

Entwicklung des Durchschnittes einer Mannschaft seit Erfassung mit dem Zusatz, dass wen ein Spieler angewählt wird, ein Diagramm mit dem Verlauf des Durchschnitts angezeigt wird

Entwicklung des Durchschnitts mit Limit
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_teamSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data td.hg_number.plus {
		background-color: lightgreen;
	}

	#hg_data td.hg_number.minus {
		background-color: lightcoral;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
		padding-left: 5px;
	}

	#hg_data td.nachname {
		width: 150px;
	}

	#hg_data td.vorname {
		width: 150px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<table id="hg_data" style="display: none;">
	<thead>
		<tr id="hg_header">
		</tr>
	</thead>
	<tbody id="hg_list" class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function getData() {
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/jahredurchschnitt/' + teams.join(',') + '?limite=5&alle=' + alle;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData({ jahre: [] });
			}
		}

		function showData(results) {
			if (results.jahre.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var tableHeaderTr = document.getElementById('hg_header');
			while (tableHeaderTr.firstChild) {
				tableHeaderTr.removeChild(tableHeaderTr.firstChild);
			}

			var tableTemplateTr = document.getElementById('hg_tr_template');
			while (tableTemplateTr.firstChild) {
				tableTemplateTr.removeChild(tableTemplateTr.firstChild);
			}

			var hgList = document.getElementById('hg_list');
			while (hgList.firstChild) {
				hgList.removeChild(hgList.firstChild);
			}

			var th = document.createElement('th');
			th.classList.add('sort');
			th.dataset.sort = 'nachname';
			th.innerHTML = "Nachname";
			tableHeaderTr.appendChild(th);

			var td = document.createElement('td');
			td.classList.add('nachname');
			tableTemplateTr.appendChild(td);

			th = document.createElement('th');
			th.classList.add('sort');
			th.dataset.sort = 'vorname';
			th.innerHTML = "Vorname";
			tableHeaderTr.appendChild(th);

			td = document.createElement('td');
			td.classList.add('vorname');
			tableTemplateTr.appendChild(td);

			for (var j = 0; j < results.jahre.length; j++) {
				th = document.createElement('th');
				th.innerHTML = results.jahre[j];
				th.classList.add('hg_number');
				tableHeaderTr.appendChild(th);

				td = document.createElement('td');
				td.classList.add('j' + results.jahre[j]);
				td.classList.add('hg_number');
				tableTemplateTr.appendChild(td);
			}

			var valueNames = ['nachname', 'vorname'];
			for (var y = 0; y < results.jahre.length; y++) {
				valueNames.push('j' + results.jahre[y]);
			}

			var options = {
				valueNames: valueNames,
				listClass: 'hg_list',
				item: 'hg_tr_template'
			};

			var dataList = new List('hg_data', options);

			results.spieler.forEach(function (row) {
				for (var y = 0; y < results.jahre.length; y++) {
					var rs = row.schnitt[y];
					if (rs) {
						row['j' + results.jahre[y]] = rs.toFixed(2);
					}
				}
			});

			dataList.add(results.spieler);

			// css class 'minus' und 'plus' hinzufügen
			var i = 0;
			var srows = document.getElementById('hg_list').querySelectorAll('tr');
			for (; i < srows.length; i++) {
				var srow = srows[i];
				var tds = srow.querySelectorAll('.hg_number');
				var lastValue, value;
				if (tds.length >= 1) {
					lastValue = parseFloat(tds[0].textContent);
				}
				for (var j = 1; j < tds.length; j++) {
					if (tds[j].textContent !== '') {
						value = parseFloat(tds[j].textContent);
						if (value >= lastValue) {
							tds[j].classList.add('plus');
						}
						else if (value < lastValue) {
							tds[j].classList.add('minus');
						}
						lastValue = value;
					}
				}
			}

			//sortierung nach nachname
			dataList.sort('nachname', { order: "asc" });
		}

	})();

</script>

Entwicklung des Durchschnittes einer Mannschaft über 5 Jahre (Anzahl Jahre kann im Code angepasst werden)

Entwicklung des Durchschnitts innerhalb der Saison
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<link rel="stylesheet" href="https://hgverwaltung.ch/static/hint.base-2.5.0.min.css"></link>

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data,
	#hg_fortlaufend,
	#hg_anzahl,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_alle,
	#hg_anzahl,
	#hg_anzahl input,
	#hg_fortlaufend,
	#hg_fortlaufend input,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_fortlaufend {
		margin-left: 20px;
	}

	#hg_anzahl {
		margin-left: 20px;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data td.hg_number.plus {
		background-color: lightgreen;
	}

	#hg_data td.hg_number.minus {
		background-color: lightcoral;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td.nachname {
		width: 200px;
	}

	#hg_data td.vorname {
		width: 200px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>
<span id="hg_fortlaufend">
	<input type="checkbox" checked>Fortlaufende Berechnung
</span>
<span id="hg_anzahl">
	Anzahl Spiele:
	<input type="hg_number" min="1" max="999">
</span>

<table id="hg_data" style="display: none;">
	<thead>
	</thead>
	<tbody class="hg_list" id="hg_list">
	</tbody>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTHead();

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");
		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		var fortlaufendCB = document.getElementById('hg_fortlaufend').querySelectorAll("input");
		fortlaufendCB[0].addEventListener("change", getData);

		var anzahlTf = document.getElementById('hg_anzahl').querySelectorAll("input");
		anzahlTf[0].addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;
			var fortlaufend = document.querySelector('#hg_fortlaufend input:checked') !== null;
			var anzahl = document.querySelector('#hg_anzahl input').value;

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/saisondurchschnitt/' + teams.join(',') + '?alle=' + alle + '&jahr=' + jahr + '&fortlaufend=' + fortlaufend;
				if (anzahl) {
					url += '&limite=' + anzahl;
				}
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData({ spieler: [], spielInfos: [] });
			}
		}

		function getHeader(spielInfos) {
			var code = [];

			code.push('<tr>');
			code.push('<th class="sort" data-sort="nachname">Nachname</th>');
			code.push('<th class="sort" data-sort="vorname">Vorname</th>');
			for (var i = 0; i < spielInfos.length; i++) {
				code.push('<th class="sort hg_number" data-sort="spiel_' + (i + 1) + '"><span class="hint--top" aria-label="' + spielInfos[i].gegner + '">' + spielInfos[i].datum + '</span></th>');
			}
			code.push('</tr>');

			return code.join('');
		}

		function getTemplateRow(len) {
			var code = [];
			code.push('<td class="nachname"></td>');
			code.push('<td class="vorname"></td>');

			for (var i = 0; i < len; i++) {
				code.push('<td class="spiel_' + (i + 1) + ' hg_number"></td>');
			}

			return code.join('');
		}

		function showData(results) {
			//remove datatable content
			var thead = document.getElementById('hg_data').getElementsByTagName('thead')[0];
			while (thead.firstChild) {
				thead.removeChild(thead.firstChild);
			}
			var tbody = document.getElementById('hg_data').getElementsByTagName('tbody')[0];
			while (tbody.firstChild) {
				tbody.removeChild(tbody.firstChild);
			}

			if (results.spielInfos.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			thead.innerHTML = getHeader(results.spielInfos);

			var templateRow = document.getElementById('hg_tr_template');
			templateRow.innerHTML = getTemplateRow(results.spielInfos.length);

			results.spieler.forEach(function (row) {
				for (var i = 0; i < results.spielInfos.length; i++) {
					if (row.schnitt && row.schnitt[i]) {
						var schnitt = row.schnitt[i];
						if (schnitt) {
							row['spiel_' + (i + 1)] = schnitt.toFixed(2);
						}
					}
				}
			});


			var valueNames = [];
			var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
			for (var v = 0; v < tdElements.length; v++) {
				valueNames.push(tdElements[v].classList[0]);
			}

			var options = {
				valueNames: valueNames,
				listClass: 'hg_list',
				item: 'hg_tr_template'
			};

			var dataList = new List('hg_data', options);
			dataList.add(results.spieler);

			// css class 'minus' und 'plus' hinzufügen
			var i = 0;
			var srows = document.getElementById('hg_list').querySelectorAll('tr');
			for (; i < srows.length; i++) {
				var srow = srows[i];
				var tds = srow.querySelectorAll('.hg_number');
				var lastValue, value;
				if (tds.length >= 1) {
					lastValue = parseFloat(tds[0].textContent);
				}
				for (var j = 1; j < tds.length; j++) {
					if (tds[j].textContent !== '') {
						value = parseFloat(tds[j].textContent);
						if (value >= lastValue) {
							tds[j].classList.add('plus');
						}
						else if (value < lastValue) {
							tds[j].classList.add('minus');
						}
						lastValue = value;
					}
				}
			}

			//sortierung nach letzer column
			dataList.sort('spiel_' + results.spielInfos.length, { order: "desc" });

		}

	})();

</script>

Entwicklung oder fortlaufender Durchschnitt einer Saison einer Mannschaft

Entwicklung des Durchschnitts der letzten 3 Spiele
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_data {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td.nachname {
		width: 200px;
	}

	#hg_data td.vorname {
		width: 200px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="nachname">Nachname</th>
			<th class="sort" data-sort="vorname">Vorname</th>
			<th class="sort" data-sort="last3">Durchschnitt der letzten 3 Spiele</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="nachname"></td>
		<td class="vorname"></td>
		<td class="last3 hg_number"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			if (tdElements[v].classList.length > 0) {
				valueNames.push(tdElements[v].classList[0]);
			}
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		getData();

		function getData() {
			var jahr = new Date().getFullYear();
			var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/saisondurchschnitt/A?alle=1&jahr=' + jahr + '&fortlaufend=true&limite=3';

			fetch(url).then(function (response) {
				return response.json();
			}).then(function (results) {
				showData(results);
			});
		}

		function showData(results) {
			dataList.clear();

			if (results.spielInfos.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			results.spieler.forEach(function (row) {
				if (row.schnitt[2]) {
					row.last3 = row.schnitt[2].toFixed(2);
				}
			});
			dataList.add(results.spieler);

			//sortierung nach letzer column
			dataList.sort('last3', { order: "desc" });
		}

	})();

</script>

Durchschnitt einer Mannschaft der letzten drei Spielen

<script src="https://hgverwaltung.ch/static/svg.min-2.6.6.js"></script>
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	* {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_gegner,
	#hg_gegner input,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle" style="margin-left: 20px;">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>
<span id="hg_gegner" style="margin-left: 20px;">
	<input type="radio" name="gegner" value="0" checked>Eigene Nummern
	<input type="radio" name="gegner" value="1">Gegnerische Nummern
</span>

<div style="margin-left: 170px;">
   Total:  <b id="totalNummern"></b>
</div> 

<div id="drawing"></div>

<script>
	(function () {

		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);

		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");
		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		var gegnerRadios = document.getElementById('hg_gegner').querySelectorAll("input");
		gegnerRadios[0].addEventListener("change", getData);
		gegnerRadios[1].addEventListener("change", getData);

		var draw = SVG('drawing').size(500, 740);
		//draw.scale(0.9, 0.9);
		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;
			var gegner = document.querySelector('#hg_gegner input[name="gegner"]:checked').value;

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/nummer/' + teams.join(',') + '?alle=' + alle + '&jahr=' + jahr + '&gegner=' + gegner;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData({nummern: [], total: []});
			}
		}

		function showData(data) {
			var nrs = data.nummern;
			var totals = data.total;

			var tn = document.getElementById('totalNummern');
			tn.innerText = '';
			draw.clear();
			if (nrs === null || nrs.length === 0) {
				return;
			}

			var total = nrs.reduce(function(acc, cv) {
				return acc + cv;
			});
			tn.innerText = total;

			var i = 0;

            var leftMargin = 25;
			var xStart = leftMargin;
			var xEnd = xStart + 366;
			var y = 0;
			var height = 35;
			var colors = [];
			var noOfFields = 21;

			for (i = 0; i < noOfFields; i++) {
				if (nrs[i] === 0) {
					colors.push('none');
				}
				else if (nrs[i] < 5) {
					colors.push('LightSalmon');
				}
				else if (nrs[i] < 10) {
					colors.push('DarkSalmon');
				}
				else if (nrs[i] < 15) {
					colors.push('IndianRed');
				}
				else {
					colors.push('Crimson');
				}
			}

			for (i = 0; i < noOfFields; i++) {
				//           oben links,    oben rechts, unten rechts,     unten links         oben links
				var edges = [xStart, 0 + y, xEnd, 0 + y, xEnd - 4, height + y, xStart + 4, height + y, xStart, 0 + y];

				draw.polyline(edges).fill(colors[noOfFields - (i + 1)]).stroke({ width: 1 });
				draw.text("" + (noOfFields - i)).move((noOfFields - i) < 10 ? xStart - 15 : xStart - 25, 10 + y);
				draw.text("" + (noOfFields - i)).move((noOfFields - i) < 10 ? xEnd + 7 : xEnd + 7, 10 + y);

				var r = nrs[noOfFields - (i + 1)];
				if (r > 0) {
					draw.text("" + r).move(r < 10 ? leftMargin + 178 : leftMargin + 173, 5 + y).font('weight', 'bold').font({ size: 18 });
				}

				var t = totals[noOfFields - (i + 1)];
				if (t > 0) {
					var tx;
					if (t < 10) {
                       tx = leftMargin + 226;
					}
					else if (t < 100) {
                       tx = leftMargin + 218;
					}
					else {
                       tx = leftMargin + 210;
					}					
					draw.text("" + t).move(tx, 7 + y).font('weight', 'normal').font({ size: 16 }).fill({ color: '#3c3c3c' });					
				}

				xStart = xStart + 4;
				xEnd = xEnd - 4;
				y = y + height;
			}
		}
	})();

</script>

Übersicht der eigenen Nummern, sofern sie vom Gegner eingegeben wurden und die gemachten Nummern

Auswertungen Spieler

HTML-CodeBeschreibungBeispiel

Punkte grafisch
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<script src="https://hgverwaltung.ch/static/chart-2.7.3.min.js"></script>

<style>
	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#chart-container {
		margin-top: 20px;
	}
</style>

<select id="hg_spielerSelect"></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<div id="chart-container" style="position: relative; height:95vh; width:95vw">
	<canvas id="chart"></canvas>
</div>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		loadSpielerSelect('https://www.hgverwaltung.ch/api/1/' + club + '/spieler', 'hg_spielerSelect', true, getData);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_spielerSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");
		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function loadSpielerSelect(url, elementId, selectFirst, callback) {
			fetch(url)
				.then(function (response) {
					return response.json();
				})
				.then(function (objects) {
					var el = document.getElementById(elementId);

					objects.forEach(function (o) {
						var option = document.createElement("option");
						var jg = o.jahrgang;
						option.text = o.nachname + ' ' + o.vorname + (jg ? ', ' : '') + (jg ? jg : '');
						option.value = o.id;
						el.appendChild(option);
					});

					if (selectFirst) {
						el.selectedIndex = 0;
					}

					if (callback) {
						callback();
					}
				});
		}

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var spielerId = document.getElementById('hg_spielerSelect').value;
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && spielerId) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spielerdurchschnitt/' + spielerId + '?alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					drawChart(results);
				});
			}
			else {
				drawChart([]);
			}
		}

		function drawChart(results) {
			var data = [];
			var labels = [];

			results.forEach(function (row) {
				for (i = 0; i < 8; i++) {
				    var p = row['ries' + (i + 1)];
					if (p > 0 || p === 0) {
						data.push(p);
						var hdate = row.datum.substr(8, 2) + '.' + row.datum.substr(5, 2) + '.' + row.datum.substr(0, 4);
						labels.push([hdate, row.art, row.gegner, (i + 1) + '. Ries']);
					}
				}
			})

			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'line',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: data,
						fill: false,
						pointRadius: 10,
						pointHoverRadius: 12,
						pointBackgroundColor: 'lightblue',
						showLine: false
					}]
				},
				options: {
					legend: {
						display: false
					},
					scales: {
						xAxes: [{
							display: false,
							gridLines: {
								display: false
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							},
							ticks: {
								min: 0,
								max: 30,
								stepSize: 5
							}
						}]
					}
				}
			});

		}
	})();

</script>

Grafische Darstellung der geschlagenen Punkte eines Spielers

Streiche grafisch
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<script src="https://hgverwaltung.ch/static/chart-2.7.3.min.js"></script>

<style>
	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#chart-container {
		margin-top: 20px;
	}
</style>

<select id="hg_spielerSelect"></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<div id="chart-container" style="position: relative; height:95vh; width:95vw">
	<canvas id="chart"></canvas>
</div>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		loadSpielerSelect('https://www.hgverwaltung.ch/api/1/' + club + '/spieler', 'hg_spielerSelect', true, getData);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_spielerSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");
		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function loadSpielerSelect(url, elementId, selectFirst, callback) {
			fetch(url)
				.then(function (response) {
					return response.json();
				})
				.then(function (objects) {
					var el = document.getElementById(elementId);

					objects.forEach(function (o) {
						var option = document.createElement("option");
						var jg = o.jahrgang;
						option.text = o.nachname + ' ' + o.vorname + (jg ? ', ' : '') + (jg ? jg : '');
						option.value = o.id;
						el.appendChild(option);
					});

					if (selectFirst) {
						el.selectedIndex = 0;
					}

					if (callback) {
						callback();
					}
				});
		}

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var spielerId = document.getElementById('hg_spielerSelect').value;
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && spielerId) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spielerdurchschnitt/' + spielerId + '?alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					drawChart(results);
				});
			}
			else {
				drawChart([]);
			}
		}

		function drawChart(results) {
			var data = [];
			var labels = [];
			var i,r;

			for (i = 0; i <= 30; i++) {
				data.push(0);
				labels.push(i);
			}

			for (i = 0; i < results.length; i++) {
				for (r = 1; r <= 8; r++) {
					var ries = results[i]['ries'+r];
					if (ries > 0 || ries === 0) {
						data[ries]++;
					}
				} 
			}


			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'bar',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: data,
						backgroundColor: '#AAAAAA'
					}]
				},
				options: {
					legend: {
						display: false
					},
					scales: {
						xAxes: [{
							gridLines: {
								display: false
							},
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Anzahl'
							},
							ticks: {
								min: 0,
								suggestedMax: 30,
								stepSize: 5
							}
						}]
					}
				}
			});

		}
	})();

</script>

Grafische Darstellung der geschlagenen Streiche eines Spielers

Punkte mit Durchschnitt grafisch
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<script src="https://hgverwaltung.ch/static/chart-2.7.3.min.js"></script>

<style>
	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#chart-container {
		margin-top: 20px;
	}
</style>

<select id="hg_spielerSelect"></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<div id="chart-container" style="position: relative; height:95vh; width:95vw">
	<canvas id="chart"></canvas>
</div>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		loadSpielerSelect('https://www.hgverwaltung.ch/api/1/' + club + '/spieler', 'hg_spielerSelect', true, getData);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_spielerSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");
		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function loadSpielerSelect(url, elementId, selectFirst, callback) {
			fetch(url)
				.then(function (response) {
					return response.json();
				})
				.then(function (objects) {
					var el = document.getElementById(elementId);

					objects.forEach(function (o) {
						var option = document.createElement("option");
						var jg = o.jahrgang;
						option.text = o.nachname + ' ' + o.vorname + (jg ? ', ' : '') + (jg ? jg : '');
						option.value = o.id;
						el.appendChild(option);
					});

					if (selectFirst) {
						el.selectedIndex = 0;
					}

					if (callback) {
						callback();
					}
				});
		}

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var spielerId = document.getElementById('hg_spielerSelect').value;
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && spielerId) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spielerdurchschnitt/' + spielerId + '?alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					drawChart(results);
				});
			}
			else {
				drawChart([]);
			}
		}

		function drawChart(results) {
			var ds = [];
			var high = [];
			var low = [];
			var labels = [];

			results.forEach(function (row) {
				var total = 0;
				var count = 0;
				var h = 0;
				var l = 100;

				for (i = 0; i < 8; i++) {
					var p = row['ries' + (i + 1)];
					if (p > 0 || p === 0) {
						count++;
						total += p;
						h = Math.max(h, p);
						l = Math.min(l, p);
					}
				}

				if (count > 0) {
					ds.push(total / count);
					high.push(h);
					low.push(l);
					var hdate = row.datum.substr(8, 2) + '.' + row.datum.substr(5, 2) + '.' + row.datum.substr(0, 4);
					labels.push([hdate, row.art, row.gegner]);
				}
			})

			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'line',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: ds,
						label: 'Punktedurchschnitt',
						fill: false,
						borderWidth: 2,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'blue',
						lineTension: 0
					}, {
						data: high,
						label: 'Längster Streich',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'green',
						lineTension: 0,
						pointStyle: 'rect'
					}, {
						data: low,
						label: 'Kürzester Streich',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'red',
						lineTension: 0,
						pointStyle: 'triangle'
					}]
				},
				options: {
					tooltips: {
						callbacks: {
							title: function (tooltipItem, data) {
								return data.labels[tooltipItem[0].index];
							}
						}
					},
					legend: {
						display: true
					},
					scales: {
						xAxes: [{
							display: true,
							gridLines: {
								display: true
							},
							ticks: {
								minRotation: 90,
								maxRotation: 90,
								autoSkip: false,
								callback: function (value, index, values) {
									return [value[0], value[2]];
								}
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							},
							ticks: {
								min: 0,
								max: 30,
								stepSize: 5
							}
						}]
					}
				}
			});

		}
	})();

</script>

Grafische Darstellung über den Punktedurchschnitt pro Spiel (blau), sowie den kürzesten (rot) und längsten Streich (grün)

Punkte, Total und Durchschnitt grafisch
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<script src="https://hgverwaltung.ch/static/chart-2.7.3.min.js"></script>

<style>
	#hg_calc_label,
	#hg_calc,
	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#chart-container {
		margin-top: 20px;
	}

	#hg_calc_label {
		margin-left: 20px;
	}
</style>

<select id="hg_spielerSelect"></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>
<span id="hg_calc_label">Berechnung:</span>
<span id="hg_calc">
	<input type="radio" name="calc" value="1" checked>Total
	<input type="radio" name="calc" value="0">Pro Ries
</span>

<div id="chart-container" style="position: relative; height:95vh; width:95vw">
	<canvas id="chart"></canvas>
</div>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}

		var allspiele = [];
		var allspieleloaded = false;

		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getYearData);
		loadSpielerSelect('https://www.hgverwaltung.ch/api/1/' + club + '/spieler', 'hg_spielerSelect', true, getData);

		document.getElementById('hg_jahrSelect').addEventListener("change", getYearData);
		document.getElementById('hg_spielerSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");
		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		allRadios = document.getElementById('hg_calc').querySelectorAll("input");
		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function loadSpielerSelect(url, elementId, selectFirst, callback) {
			fetch(url)
				.then(function (response) {
					return response.json();
				})
				.then(function (objects) {
					var el = document.getElementById(elementId);

					objects.forEach(function (o) {
						var option = document.createElement("option");
						var jg = o.jahrgang;
						option.text = o.nachname + ' ' + o.vorname + (jg ? ', ' : '') + (jg ? jg : '');
						option.value = o.id;
						el.appendChild(option);
					});

					if (selectFirst) {
						el.selectedIndex = 0;
					}

					if (callback) {
						callback();
					}
				});
		}

		function getYearData() {
			allspieleloaded = false;
			var jahr = document.getElementById('hg_jahrSelect').value;
			fetch('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true')
				.then(function (response) { return response.json(); })
				.then(
				function (teams) {
					var pr = [];
					for (var t = 0; t < teams.length; t++) {
						var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/mannschaftsdurchschnitt/' + teams[t] + '?alle=1' + '&jahr=' + jahr;
						var pro = fetch(url).then(
							function (response) {
								return response.json();
							}
						).then(
							function (spiele) {
								Array.prototype.push.apply(allspiele, spiele);
							}
							);
						pr.push(pro);
					}
					return Promise.all(pr);
				}
				)
				.then(function () { allspieleloaded = true; getData(); })
		}

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var spielerId = document.getElementById('hg_spielerSelect').value;
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && spielerId && allspieleloaded) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spielerdurchschnitt/' + spielerId + '?alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					drawChart(results);
				});
			}
			else {
				drawChart([]);
			}
		}

		function drawChart(results) {
			var ds = [];
			var high = [];
			var low = [];
			var labels = [];
			var average = [];
			
			var proRies = document.querySelector('#hg_calc input[name="calc"]:checked').value === "0";
			results.forEach(function (row) {

				var total = 0;
				var count = 0;

				for (i = 0; i < 8; i++) {
					var p = row['ries' + (i + 1)];
					if (p > 0 || p === 0) {
						count++;
						total += p;
					}
				}

				if (count > 0) {
					var spiel = allspiele.find(function (item) {
						return item.id === row.id;
					});
					if (spiel) {
						if (proRies) {
							high.push(spiel.hoechstesTotal / count);
							low.push(spiel.tiefstesTotal / count);
							average.push(spiel.punkteTotalSchnitt / count);
						}
						else {
							high.push(spiel.hoechstesTotal);
							low.push(spiel.tiefstesTotal);
							average.push(spiel.punkteTotalSchnitt);
						}
					}
					else {
						high.push(0);
						low.push(0);
						average.push(0);
					}
					if (proRies) {
						ds.push(total / count);
					}
					else {
						ds.push(total);
					}
					var hdate = row.datum.substr(8, 2) + '.' + row.datum.substr(5, 2) + '.' + row.datum.substr(0, 4);
					labels.push([hdate, row.art, row.gegner]);
				}
			});

			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'line',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: ds,
						label: 'Punktetotal',
						fill: false,
						borderWidth: 2,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'blue',
						lineTension: 0
					}, {
						data: high,
						label: 'Höchstes Total',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'green',
						lineTension: 0,
						pointStyle: 'rect'
					}, {
						data: low,
						label: 'Tiefstes Total',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'red',
						lineTension: 0,
						pointStyle: 'triangle'
					}, {
						data: average,
						label: 'Durchschnitt',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'orange',
						lineTension: 0,
						pointStyle: 'star'
					}]
				},
				options: {
					tooltips: {
						callbacks: {
							title: function (tooltipItem, data) {
								return data.labels[tooltipItem[0].index];
							}
						}
					},
					animation: {
						duration: 400
					},
					legend: {
						display: true
					},
					scales: {
						xAxes: [{
							display: true,
							gridLines: {
								display: true
							},
							ticks: {
								minRotation: 90,
								maxRotation: 90,
								autoSkip: false,
								callback: function (value, index, values) {
									return [value[0], value[2]];
								}
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							},
							ticks: {
								min: 0,
								stepSize: 5
							}
						}]
					}
				}
			});

		}
	})();

</script>

Grafische Darstellung über Punktetotal pro Spiel. Total des Spielers im Spiel (blau), höchstes Total eines Spiels (grün), tiefstes Total (rot), Durchschnitt der Totale (gelb)

Streiche
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td {
		width: 20px;
		white-space: nowrap;
	}

	#hg_data td.nachname {
		width: 200px;
	}

	#hg_data td.vorname {
		width: 200px;
	}

	#hg_data td.punkte {
		font-weight: bold;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="nachname">Nachname</th>
			<th class="sort" data-sort="vorname">Vorname</th>
			<th class="sort hg_number" data-sort="s0">0</th>
			<th class="sort hg_number" data-sort="s1">1</th>
			<th class="sort hg_number" data-sort="s2">2</th>
			<th class="sort hg_number" data-sort="s3">3</th>
			<th class="sort hg_number" data-sort="s4">4</th>
			<th class="sort hg_number" data-sort="s5">5</th>
			<th class="sort hg_number" data-sort="s6">6</th>
			<th class="sort hg_number" data-sort="s7">7</th>
			<th class="sort hg_number" data-sort="s8">8</th>
			<th class="sort hg_number" data-sort="s9">9</th>
			<th class="sort hg_number" data-sort="s10">10</th>
			<th class="sort hg_number" data-sort="s11">11</th>
			<th class="sort hg_number" data-sort="s12">12</th>
			<th class="sort hg_number" data-sort="s13">13</th>
			<th class="sort hg_number" data-sort="s14">14</th>
			<th class="sort hg_number" data-sort="s15">15</th>
			<th class="sort hg_number" data-sort="s16">16</th>
			<th class="sort hg_number" data-sort="s17">17</th>
			<th class="sort hg_number" data-sort="s18">18</th>
			<th class="sort hg_number" data-sort="s19">19</th>
			<th class="sort hg_number" data-sort="s20">20</th>
			<th class="sort hg_number" data-sort="s21">21</th>
			<th class="sort hg_number" data-sort="s22">22</th>
			<th class="sort hg_number" data-sort="s23">23</th>
			<th class="sort hg_number" data-sort="s24">24</th>
			<th class="sort hg_number" data-sort="s25">25</th>
			<th class="sort hg_number" data-sort="s26">26</th>
			<th class="sort hg_number" data-sort="s27">27</th>
			<th class="sort hg_number" data-sort="s28">28</th>
			<th class="sort hg_number" data-sort="s29">29</th>
			<th class="sort hg_number" data-sort="s30">30</th>
			<th class="sort hg_number" data-sort="streiche">Streiche</th>
			<th class="sort hg_number" data-sort="punkte">Punkte</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="nachname"></td>
		<td class="vorname"></td>
		<td class="s0 hg_number"></td>
		<td class="s1 hg_number"></td>
		<td class="s2 hg_number"></td>
		<td class="s3 hg_number"></td>
		<td class="s4 hg_number"></td>
		<td class="s5 hg_number"></td>
		<td class="s6 hg_number"></td>
		<td class="s7 hg_number"></td>
		<td class="s8 hg_number"></td>
		<td class="s9 hg_number"></td>
		<td class="s10 hg_number"></td>
		<td class="s11 hg_number"></td>
		<td class="s12 hg_number"></td>
		<td class="s13 hg_number"></td>
		<td class="s14 hg_number"></td>
		<td class="s15 hg_number"></td>
		<td class="s16 hg_number"></td>
		<td class="s17 hg_number"></td>
		<td class="s18 hg_number"></td>
		<td class="s19 hg_number"></td>
		<td class="s20 hg_number"></td>
		<td class="s21 hg_number"></td>
		<td class="s22 hg_number"></td>
		<td class="s23 hg_number"></td>
		<td class="s24 hg_number"></td>
		<td class="s25 hg_number"></td>
		<td class="s26 hg_number"></td>
		<td class="s27 hg_number"></td>
		<td class="s28 hg_number"></td>
		<td class="s29 hg_number"></td>
		<td class="s30 hg_number"></td>
		<td class="streiche hg_number"></td>
		<td class="punkte hg_number"></td>
	</tr>
	<tr id="hg_total_tr">
		<td colspan="2" class="total_label"></td>
		<td class="total_s0 hg_number"></td>
		<td class="total_s1 hg_number"></td>
		<td class="total_s2 hg_number"></td>
		<td class="total_s3 hg_number"></td>
		<td class="total_s4 hg_number"></td>
		<td class="total_s5 hg_number"></td>
		<td class="total_s6 hg_number"></td>
		<td class="total_s7 hg_number"></td>
		<td class="total_s8 hg_number"></td>
		<td class="total_s9 hg_number"></td>
		<td class="total_s10 hg_number"></td>
		<td class="total_s11 hg_number"></td>
		<td class="total_s12 hg_number"></td>
		<td class="total_s13 hg_number"></td>
		<td class="total_s14 hg_number"></td>
		<td class="total_s15 hg_number"></td>
		<td class="total_s16 hg_number"></td>
		<td class="total_s17 hg_number"></td>
		<td class="total_s18 hg_number"></td>
		<td class="total_s19 hg_number"></td>
		<td class="total_s20 hg_number"></td>
		<td class="total_s21 hg_number"></td>
		<td class="total_s22 hg_number"></td>
		<td class="total_s23 hg_number"></td>
		<td class="total_s24 hg_number"></td>
		<td class="total_s25 hg_number"></td>
		<td class="total_s26 hg_number"></td>
		<td class="total_s27 hg_number"></td>
		<td class="total_s28 hg_number"></td>
		<td class="total_s29 hg_number"></td>
		<td class="total_s30 hg_number"></td>
		<td></td>
		<td></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/durchschnitt/' + teams.join(',') + '?alle=' + alle + '&streicheDetail=true&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			//remove total rows
			var tfoot = document.getElementById('hg_data').getElementsByTagName('tfoot')[0];
			while (tfoot.firstChild) {
				tfoot.removeChild(tfoot.firstChild);
			}

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var totals = [];
			for (j = 0; j < 31; j++) {
				totals.push(0);
			}

			results.forEach(function (row) {
				for (var s = 0; s < 31; s++) {
					if (row.streicheDetail) {
						var sd = row.streicheDetail[s];
						if (sd !== 0) {
							row['s' + s] = sd;
							totals[s] += sd;
						}
					}
				}
			});
			dataList.add(results);

			//sortierung nach punkte
			dataList.sort('punkte', { order: "desc" });

			// total
			var totalRow = document.getElementById('hg_total_tr').cloneNode(true);
			totalRow.querySelector(".total_label").textContent = 'Total';
			for (i = 0; i < totals.length; i++) {
				totalRow.querySelector(".total_s" + i).textContent = totals[i];
			}
			tfoot.appendChild(totalRow);

		}

	})();

</script>

Übersicht der geschlagenen Streiche einer Mannschaft

Streiche V2
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<script src="https://hgverwaltung.ch/static/tingle-0.13.2.min.js"></script>
<script src="https://hgverwaltung.ch/static/chart-2.7.3.min.js"></script>
<link href="https://hgverwaltung.ch/static/tingle-0.13.2.min.css" rel="stylesheet">

<style>
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td {
		width: 20px;
		white-space: nowrap;
	}

	#hg_data td.nachname {
		width: 200px;
		text-decoration: underline;
		text-decoration-color: gray;
	}

	#hg_data td.vorname {
		width: 200px;
		text-decoration: underline;
		text-decoration-color: gray;
	}

	#hg_data td.punkte {
		font-weight: bold;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th class="sort" data-sort="nachname">Nachname</th>
			<th class="sort" data-sort="vorname">Vorname</th>
			<th class="sort hg_number" data-sort="s0">0</th>
			<th class="sort hg_number" data-sort="s1">1</th>
			<th class="sort hg_number" data-sort="s2">2</th>
			<th class="sort hg_number" data-sort="s3">3</th>
			<th class="sort hg_number" data-sort="s4">4</th>
			<th class="sort hg_number" data-sort="s5">5</th>
			<th class="sort hg_number" data-sort="s6">6</th>
			<th class="sort hg_number" data-sort="s7">7</th>
			<th class="sort hg_number" data-sort="s8">8</th>
			<th class="sort hg_number" data-sort="s9">9</th>
			<th class="sort hg_number" data-sort="s10">10</th>
			<th class="sort hg_number" data-sort="s11">11</th>
			<th class="sort hg_number" data-sort="s12">12</th>
			<th class="sort hg_number" data-sort="s13">13</th>
			<th class="sort hg_number" data-sort="s14">14</th>
			<th class="sort hg_number" data-sort="s15">15</th>
			<th class="sort hg_number" data-sort="s16">16</th>
			<th class="sort hg_number" data-sort="s17">17</th>
			<th class="sort hg_number" data-sort="s18">18</th>
			<th class="sort hg_number" data-sort="s19">19</th>
			<th class="sort hg_number" data-sort="s20">20</th>
			<th class="sort hg_number" data-sort="s21">21</th>
			<th class="sort hg_number" data-sort="s22">22</th>
			<th class="sort hg_number" data-sort="s23">23</th>
			<th class="sort hg_number" data-sort="s24">24</th>
			<th class="sort hg_number" data-sort="s25">25</th>
			<th class="sort hg_number" data-sort="s26">26</th>
			<th class="sort hg_number" data-sort="s27">27</th>
			<th class="sort hg_number" data-sort="s28">28</th>
			<th class="sort hg_number" data-sort="s29">29</th>
			<th class="sort hg_number" data-sort="s30">30</th>
			<th class="sort hg_number" data-sort="streiche">Streiche</th>
			<th class="sort hg_number" data-sort="punkte">Punkte</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="nachname"></td>
		<td class="vorname"></td>
		<td class="s0 hg_number"></td>
		<td class="s1 hg_number"></td>
		<td class="s2 hg_number"></td>
		<td class="s3 hg_number"></td>
		<td class="s4 hg_number"></td>
		<td class="s5 hg_number"></td>
		<td class="s6 hg_number"></td>
		<td class="s7 hg_number"></td>
		<td class="s8 hg_number"></td>
		<td class="s9 hg_number"></td>
		<td class="s10 hg_number"></td>
		<td class="s11 hg_number"></td>
		<td class="s12 hg_number"></td>
		<td class="s13 hg_number"></td>
		<td class="s14 hg_number"></td>
		<td class="s15 hg_number"></td>
		<td class="s16 hg_number"></td>
		<td class="s17 hg_number"></td>
		<td class="s18 hg_number"></td>
		<td class="s19 hg_number"></td>
		<td class="s20 hg_number"></td>
		<td class="s21 hg_number"></td>
		<td class="s22 hg_number"></td>
		<td class="s23 hg_number"></td>
		<td class="s24 hg_number"></td>
		<td class="s25 hg_number"></td>
		<td class="s26 hg_number"></td>
		<td class="s27 hg_number"></td>
		<td class="s28 hg_number"></td>
		<td class="s29 hg_number"></td>
		<td class="s30 hg_number"></td>
		<td class="streiche hg_number"></td>
		<td class="punkte hg_number"></td>
	</tr>
	<tr id="hg_total_tr">
		<td colspan="2" class="total_label"></td>
		<td class="total_s0 hg_number"></td>
		<td class="total_s1 hg_number"></td>
		<td class="total_s2 hg_number"></td>
		<td class="total_s3 hg_number"></td>
		<td class="total_s4 hg_number"></td>
		<td class="total_s5 hg_number"></td>
		<td class="total_s6 hg_number"></td>
		<td class="total_s7 hg_number"></td>
		<td class="total_s8 hg_number"></td>
		<td class="total_s9 hg_number"></td>
		<td class="total_s10 hg_number"></td>
		<td class="total_s11 hg_number"></td>
		<td class="total_s12 hg_number"></td>
		<td class="total_s13 hg_number"></td>
		<td class="total_s14 hg_number"></td>
		<td class="total_s15 hg_number"></td>
		<td class="total_s16 hg_number"></td>
		<td class="total_s17 hg_number"></td>
		<td class="total_s18 hg_number"></td>
		<td class="total_s19 hg_number"></td>
		<td class="total_s20 hg_number"></td>
		<td class="total_s21 hg_number"></td>
		<td class="total_s22 hg_number"></td>
		<td class="total_s23 hg_number"></td>
		<td class="total_s24 hg_number"></td>
		<td class="total_s25 hg_number"></td>
		<td class="total_s26 hg_number"></td>
		<td class="total_s27 hg_number"></td>
		<td class="total_s28 hg_number"></td>
		<td class="total_s29 hg_number"></td>
		<td class="total_s30 hg_number"></td>
		<td></td>
		<td></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/durchschnitt/' + teams.join(',') + '?alle=' + alle + '&streicheDetail=true&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			//remove total rows
			var tfoot = document.getElementById('hg_data').getElementsByTagName('tfoot')[0];
			while (tfoot.firstChild) {
				tfoot.removeChild(tfoot.firstChild);
			}

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var totals = [];
			for (j = 0; j < 31; j++) {
				totals.push(0);
			}

			results.forEach(function (row) {
				for (var s = 0; s < 31; s++) {
					if (row.streicheDetail) {
						var sd = row.streicheDetail[s];
						if (sd !== 0) {
							row['s' + s] = sd;
							totals[s] += sd;
						}
					}
				}
			});
			dataList.add(results);

			//sortierung nach punkte
			dataList.sort('punkte', { order: "desc" });

			// total
			var totalRow = document.getElementById('hg_total_tr').cloneNode(true);
			totalRow.querySelector(".total_label").textContent = 'Total';
			for (i = 0; i < totals.length; i++) {
				totalRow.querySelector(".total_s" + i).textContent = totals[i];
			}
			tfoot.appendChild(totalRow);


			addClicklistener('nachname');
			addClicklistener('vorname');

		}

		function addClicklistener(field) {
			var names = document.getElementsByClassName(field);
			var n = 0;
			for (; n < names.length; n++) {
				(function () {
					var row = n;
					names[n].addEventListener('click', function () {						
						onSpielerClick(row)
					}, false);
				})();
			}
		}

		function onSpielerClick(row) {
			showDiagram(dataList.items[row]._values);
		}

		function showDiagram(result) {
			var modal = new tingle.modal({
				footer: false,
				stickyFooter: false,
				closeMethods: ['overlay', 'button', 'escape'],
				closeLabel: "Schliessen",
			});
			modal.setContent(createDiagramHtml(result));
			modal.open();
			drawChart(result);
		}

		function drawChart(results) {
			var data = results.streicheDetail;
			var labels = [];
			var i;

			for (i = 0; i <= 30; i++) {
				labels.push(i);
			}

			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'bar',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: data,
						backgroundColor: '#AAAAAA'
					}]
				},
				options: {
					title: {
						display: true,
						text: results.nachname + ' ' + results.vorname,
						fontSize: 14
					},
					legend: {
						display: false
					},
					scales: {
						xAxes: [{
							gridLines: {
								display: false
							},
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Anzahl'
							},
							ticks: {
								min: 0,
								suggestedMax: 30,
								stepSize: 5
							}
						}]
					}
				}
			});

		}		

		function createDiagramHtml(result) {
			var html = [];

			html.push('<div id="chart-container" style="position: relative; width:100%">');
			html.push('<canvas id="chart"></canvas>');
			html.push('</div>');

			return html.join('');
		}

	})();

</script>

Übersicht der geschlagenen Streiche einer Mannschaft. Zusätzlich kann der Spieler angeklickt werden um eine grafische Darstellung seiner geschlagenen Streiche anzuzeigen.

Spielerdurchschnitt
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td {
		width: 40px;
		white-space: nowrap;
	}

	#hg_data td.art {
		width: 200px;
	}

	#hg_data td.gegner {
		width: 200px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_spielerSelect"></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<table id="hg_data" style="display: none;">
	<thead>
		<tr>
			<th colspan="3"></th>
			<th colspan="8">Ries</th>
			<th colspan="3">Spiel</th>
			<th colspan="3">Kumuliert</th>
			<th></th>
		</tr>
		<tr>
			<th class="sort" data-sort="datum">Datum</th>
			<th class="sort" data-sort="art">Art</th>
			<th class="sort" data-sort="gegner">Gegner</th>
			<th class="sort hg_number" data-sort="ries1">1</th>
			<th class="sort hg_number" data-sort="ries2">2</th>
			<th class="sort hg_number" data-sort="ries3">3</th>
			<th class="sort hg_number" data-sort="ries4">4</th>
			<th class="sort hg_number" data-sort="ries5">5</th>
			<th class="sort hg_number" data-sort="ries6">6</th>
			<th class="sort hg_number" data-sort="ries7">7</th>
			<th class="sort hg_number" data-sort="ries8">8</th>
			<th class="sort hg_number" data-sort="punkte">Punkte</th>
			<th class="sort hg_number" data-sort="streiche">Streiche</th>
			<th class="sort hg_number" data-sort="schnitt">Durchschnitt</th>
			<th class="sort hg_number" data-sort="punkteKumuliert">Punkte</th>
			<th class="sort hg_number" data-sort="streicheKumuliert">Streiche</th>
			<th class="sort hg_number" data-sort="schnittKumuliert">Durchschnitt</th>
			<th class="sort hg_number" data-sort="rangpunkte">Rangpunkte</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="datumDisplay"></td>
		<td class="art"></td>
		<td class="gegner"></td>
		<td class="ries1 hg_number"></td>
		<td class="ries2 hg_number"></td>
		<td class="ries3 hg_number"></td>
		<td class="ries4 hg_number"></td>
		<td class="ries5 hg_number"></td>
		<td class="ries6 hg_number"></td>
		<td class="ries7 hg_number"></td>
		<td class="ries8 hg_number"></td>
		<td class="punkte hg_number"></td>
		<td class="streiche hg_number"></td>
		<td class="schnitt hg_number"></td>
		<td class="punkteKumuliert hg_number"></td>
		<td class="streicheKumuliert hg_number"></td>
		<td class="schnittKumuliert hg_number"></td>
		<td class="rangpunkte hg_number"></td>
	</tr>
	<tr id="hg_total_tr">
		<td colspan="3" class="total_label"></td>
		<td class="total_ries1 hg_number"></td>
		<td class="total_ries2 hg_number"></td>
		<td class="total_ries3 hg_number"></td>
		<td class="total_ries4 hg_number"></td>
		<td class="total_ries5 hg_number"></td>
		<td class="total_ries6 hg_number"></td>
		<td class="total_ries7 hg_number"></td>
		<td class="total_ries8 hg_number"></td>
		<td class="total_punkte hg_number"></td>
		<td class="total_streiche hg_number"></td>
		<td class="total_schnitt hg_number"></td>
		<td colspan="4"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
		  club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		loadSpielerSelect('https://www.hgverwaltung.ch/api/1/' + club + '/spieler', 'hg_spielerSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_spielerSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function loadSpielerSelect(url, elementId, selectFirst, callback) {
			fetch(url)
				.then(function (response) {
					return response.json();
				})
				.then(function (objects) {
					var el = document.getElementById(elementId);

					objects.forEach(function (o) {
						var option = document.createElement("option");
						var jg = o.jahrgang;
						option.text = o.nachname + ' ' + o.vorname + (jg ? ', ' : '') + (jg ? jg : '');
						option.value = o.id;
						el.appendChild(option);
					});

					if (selectFirst) {
						el.selectedIndex = 0;
					}

					if (callback) {
						callback();
					}
				});
		}

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var spielerId = document.getElementById('hg_spielerSelect').value;
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && spielerId) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spielerdurchschnitt/' + spielerId + '?alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			//remove total rows
			var tfoot = document.getElementById('hg_data').getElementsByTagName('tfoot')[0];
			while (tfoot.firstChild) {
				tfoot.removeChild(tfoot.firstChild);
			}

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var totalRies = [];
			var totalPunkte = 0;
			var totalStreiche = 0;
			var i;
			for (i = 0; i < 8; i++) {
				totalRies.push(0);
			}

			results.forEach(function (row) {
				if (row.punkte) {
					totalPunkte += row.punkte;
				}
				if (row.streiche) {
					totalStreiche += row.streiche;
				}
				if (row.schnitt) {
					row.schnitt = row.schnitt.toFixed(2);
				}
				if (row.schnittKumuliert) {
					row.schnittKumuliert = row.schnittKumuliert.toFixed(2);
				}
				row.datumDisplay = row.datum.substring(8, 10) + '.' + row.datum.substring(5, 7) + '.' + row.datum.substring(0, 4);
				for (i = 0; i < 8; i++) {
					if (row['ries' + (i + 1)]) {
						totalRies[i] += row['ries' + (i + 1)];
					}
				}
			});
			dataList.add(results);
			dataList.sort('datum', { order: "asc" });

			var totalRow = document.getElementById('hg_total_tr').cloneNode(true);
			for (i = 0; i < 8; i++) {
				if (totalRies[i] > 0) {
					totalRow.querySelector(".total_ries" + (i + 1)).textContent = totalRies[i];
				}
			}
			totalRow.querySelector(".total_punkte").textContent = totalPunkte;
			totalRow.querySelector(".total_streiche").textContent = totalStreiche;

			if (totalPunkte && totalStreiche) {
				var schnitt = (totalPunkte / totalStreiche).toFixed(2);
				totalRow.querySelector(".total_schnitt").textContent = schnitt;
			}

			tfoot.appendChild(totalRow);
		}

	})();

</script>

Streich- und Durchschnittsübersicht eines Spielers

Spielerdurchschnitt 2 (mit Grafik)
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>
<script src="https://hgverwaltung.ch/static/tingle-0.13.2.min.js"></script>
<script src="https://hgverwaltung.ch/static/chart-2.7.3.min.js"></script>
<link href="https://hgverwaltung.ch/static/tingle-0.13.2.min.css" rel="stylesheet">

<style>
	#hg_calc_label,
	#hg_calc,
	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_data,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_calc_label {
		margin-left: 55px;
	}

	#hg_jahrSelect,
	#hg_spielerSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	#hg_data tbody tr:nth-child(odd) {
		background-color: #ebeff4;
	}

	#hg_data tr {
		text-align: left;
	}

	#hg_data th {
		cursor: default;
	}

	#hg_data .hg_number {
		text-align: right;
		padding-right: 5px;
	}

	#hg_data td {
		width: 40px;
		white-space: nowrap;
	}

	#hg_data td.art {
		width: 200px;
	}

	#hg_data td.gegner {
		width: 200px;
	}

	#hg_data .sort.asc::after {
		content: "\25b2";
	}

	#hg_data .sort.desc::after {
		content: "\25bc";
	}

	#hg_total_tr td {
		font-weight: bold;
	}
</style>

<select id="hg_spielerSelect"></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<button style="margin-left:100px;" id="punkteButton">Punkte</button>
<button id="punkteSchnittButton">Punkte Schnitt</button>
<button id="punkteTotalButton">Punkte Total</button>
<button id="rangpunkteButton">Rangpunkte</button>
<button id="streicheButton">Streiche</button>

<table id="hg_data" style="display: none;margin-top:20px;">
	<thead>
		<tr>
			<th colspan="3"></th>
			<th colspan="8">Ries</th>
			<th colspan="3">Spiel</th>
			<th colspan="3">Kumuliert</th>
			<th></th>
		</tr>
		<tr>
			<th class="sort" data-sort="datum">Datum</th>
			<th class="sort" data-sort="art">Art</th>
			<th class="sort" data-sort="gegner">Gegner</th>
			<th class="sort hg_number" data-sort="ries1">1</th>
			<th class="sort hg_number" data-sort="ries2">2</th>
			<th class="sort hg_number" data-sort="ries3">3</th>
			<th class="sort hg_number" data-sort="ries4">4</th>
			<th class="sort hg_number" data-sort="ries5">5</th>
			<th class="sort hg_number" data-sort="ries6">6</th>
			<th class="sort hg_number" data-sort="ries7">7</th>
			<th class="sort hg_number" data-sort="ries8">8</th>
			<th class="sort hg_number" data-sort="punkte">Punkte</th>
			<th class="sort hg_number" data-sort="streiche">Streiche</th>
			<th class="sort hg_number" data-sort="schnitt">Durchschnitt</th>
			<th class="sort hg_number" data-sort="punkteKumuliert">Punkte</th>
			<th class="sort hg_number" data-sort="streicheKumuliert">Streiche</th>
			<th class="sort hg_number" data-sort="schnittKumuliert">Durchschnitt</th>
			<th class="sort hg_number" data-sort="rangpunkte">Rangpunkte</th>
		</tr>
	</thead>
	<tbody class="hg_list">
	</tbody>
	<tfoot>
	</tfoot>
</table>

<table style="display: none;">
	<tr id="hg_tr_template">
		<td class="datumDisplay"></td>
		<td class="art"></td>
		<td class="gegner"></td>
		<td class="ries1 hg_number"></td>
		<td class="ries2 hg_number"></td>
		<td class="ries3 hg_number"></td>
		<td class="ries4 hg_number"></td>
		<td class="ries5 hg_number"></td>
		<td class="ries6 hg_number"></td>
		<td class="ries7 hg_number"></td>
		<td class="ries8 hg_number"></td>
		<td class="punkte hg_number"></td>
		<td class="streiche hg_number"></td>
		<td class="schnitt hg_number"></td>
		<td class="punkteKumuliert hg_number"></td>
		<td class="streicheKumuliert hg_number"></td>
		<td class="schnittKumuliert hg_number"></td>
		<td class="rangpunkte hg_number"></td>
	</tr>
	<tr id="hg_total_tr">
		<td colspan="3" class="total_label"></td>
		<td class="total_ries1 hg_number"></td>
		<td class="total_ries2 hg_number"></td>
		<td class="total_ries3 hg_number"></td>
		<td class="total_ries4 hg_number"></td>
		<td class="total_ries5 hg_number"></td>
		<td class="total_ries6 hg_number"></td>
		<td class="total_ries7 hg_number"></td>
		<td class="total_ries8 hg_number"></td>
		<td class="total_punkte hg_number"></td>
		<td class="total_streiche hg_number"></td>
		<td class="total_schnitt hg_number"></td>
		<td colspan="4"></td>
	</tr>
</table>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}

		var allspiele = [];
		var allspieleloaded = false;

		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getYearData);
		loadSpielerSelect('https://www.hgverwaltung.ch/api/1/' + club + '/spieler', 'hg_spielerSelect', true, getData);

		var hgDataTable = document.getElementById("hg_data");
		hgDataTable.createTFoot();

		var valueNames = [];
		var tdElements = document.getElementById('hg_tr_template').getElementsByTagName('td');
		for (var v = 0; v < tdElements.length; v++) {
			valueNames.push(tdElements[v].classList[0]);
		}

		var options = {
			valueNames: valueNames,
			listClass: 'hg_list',
			item: 'hg_tr_template'
		};

		var dataList = new List('hg_data', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getYearData);
		document.getElementById('hg_spielerSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		document.getElementById('punkteButton').addEventListener('click', onPunkteButtonClick);
		document.getElementById('punkteSchnittButton').addEventListener('click', onPunkteSchnittButtonClick);
		document.getElementById('punkteTotalButton').addEventListener('click', onPunkteTotalButtonClick);
		document.getElementById('rangpunkteButton').addEventListener('click', onRangpunkteButtonClick);
		document.getElementById('streicheButton').addEventListener('click', onStreicheButtonClick);

		function onPunkteButtonClick() {
			showDiagram(displayedResults, drawPunkteChart);
		}

		function onPunkteSchnittButtonClick() {
			showDiagram(displayedResults, drawPunkteSchnittChart);
		}

		function onPunkteTotalButtonClick() {
			var modal = new tingle.modal({
				footer: false,
				stickyFooter: false,
				closeMethods: ['overlay', 'button', 'escape'],
				closeLabel: "Schliessen",
			});

			var html = [];
			html.push('<span id="hg_calc_label">Berechnung:</span>');
			html.push('<span id="hg_calc">');
			html.push('<input type="radio" name="calc" value="1" checked>Total');
			html.push('<input type="radio" name="calc" value="0">Pro Ries');
			html.push('</span>');
			html.push('<div id="chart-container" style="position: relative; width:100%">');
			html.push('<canvas id="chart"></canvas>');
			html.push('</div>');

			modal.setContent(html.join(''));
			modal.open();
			drawPunkteTotalChart(displayedResults);


			var allRadios = document.getElementById('hg_calc').querySelectorAll("input");
			allRadios[0].addEventListener("change", function () { drawPunkteTotalChart(displayedResults); });
			allRadios[1].addEventListener("change", function () { drawPunkteTotalChart(displayedResults); });
		}

		function onRangpunkteButtonClick() {
			var modal = new tingle.modal({
				footer: false,
				stickyFooter: false,
				closeMethods: ['overlay', 'button', 'escape'],
				closeLabel: "Schliessen",
			});

			var html = [];
			html.push('<div id="chart-container" style="position: relative; width:100%">');
			html.push('<canvas id="chart"></canvas>');
			html.push('</div>');

			modal.setContent(html.join(''));
			modal.open();
			drawRangpunkteChart(displayedResults);
		}

		function onStreicheButtonClick() {
			showDiagram(displayedResults, drawStreicheChart);
		}

		function showDiagram(results, drawFunction) {
			var modal = new tingle.modal({
				footer: false,
				stickyFooter: false,
				closeMethods: ['overlay', 'button', 'escape'],
				closeLabel: "Schliessen",
			});
			modal.setContent(createDiagramHtml(results));
			modal.open();
			drawFunction(results);
		}

		function createDiagramHtml(results) {
			var html = [];

			html.push('<div id="chart-container" style="position: relative; width:100%">');
			html.push('<canvas id="chart"></canvas>');
			html.push('</div>');

			return html.join('');
		}

		function drawPunkteTotalChart(results) {

			var ds = [];
			var high = [];
			var low = [];
			var labels = [];
			var average = [];

			var proRies = document.querySelector('#hg_calc input[name="calc"]:checked').value === "0";
			results.forEach(function (row) {

				var total = 0;
				var count = 0;

				for (i = 0; i < 8; i++) {
					var p = row['ries' + (i + 1)];
					if (p > 0 || p === 0) {
						count++;
						total += p;
					}
				}

				if (count > 0) {
					var spiel = allspiele.find(function (item) {
						return item.id === row.id;
					});
					if (spiel) {
						if (proRies) {
							high.push(spiel.hoechstesTotal / count);
							low.push(spiel.tiefstesTotal / count);
							average.push(spiel.punkteTotalSchnitt / count);
						}
						else {
							high.push(spiel.hoechstesTotal);
							low.push(spiel.tiefstesTotal);
							average.push(spiel.punkteTotalSchnitt);
						}
					}
					else {
						high.push(0);
						low.push(0);
						average.push(0);
					}
					if (proRies) {
						ds.push(total / count);
					}
					else {
						ds.push(total);
					}
					var hdate = row.datum.substr(8, 2) + '.' + row.datum.substr(5, 2) + '.' + row.datum.substr(0, 4);
					labels.push([hdate, row.art, row.gegner]);
				}
			});

			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'line',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: ds,
						label: 'Punktetotal',
						fill: false,
						borderWidth: 2,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'blue',
						lineTension: 0
					}, {
						data: high,
						label: 'Höchstes Total',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'green',
						lineTension: 0,
						pointStyle: 'rect'
					}, {
						data: low,
						label: 'Tiefstes Total',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'red',
						lineTension: 0,
						pointStyle: 'triangle'
					}, {
						data: average,
						label: 'Durchschnitt',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'orange',
						lineTension: 0,
						pointStyle: 'star'
					}]
				},
				options: {
					tooltips: {
						callbacks: {
							title: function (tooltipItem, data) {
								return data.labels[tooltipItem[0].index];
							}
						}
					},
					legend: {
						display: true
					},
					scales: {
						xAxes: [{
							display: true,
							gridLines: {
								display: true
							},
							ticks: {
								minRotation: 90,
								maxRotation: 90,
								autoSkip: false,
								callback: function (value, index, values) {
									return value[0];
								}
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							},
							ticks: {
								min: 0,
								stepSize: 5
							}
						}]
					}
				}
			});
		}

		function drawRangpunkteChart(results) {
			var labels = [];
            var ds = [];
			var rp = [];

			results.forEach(function (row) {

				var total = 0;
				var count = 0;

				for (i = 0; i < 8; i++) {
					var p = row['ries' + (i + 1)];
					if (p > 0 || p === 0) {
						count++;
						total += p;
					}
				}

				if (count > 0) {
					ds.push(total);
                    rp.push(row.rangpunkte || 0);
					var hdate = row.datum.substr(8, 2) + '.' + row.datum.substr(5, 2) + '.' + row.datum.substr(0, 4);
					labels.push([hdate, row.art, row.gegner]);
				}
			});

			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'line',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: ds,
						label: 'Punkte',
						fill: true,
						borderWidth: 2,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'green',
						lineTension: 0
					}, {
						data: rp,
						label: 'Rangpunkte',
						fill: true,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'red',
						lineTension: 0,
						pointStyle: 'rect'
					}]
				},
				options: {
					tooltips: {
						callbacks: {
							title: function (tooltipItem, data) {
								return data.labels[tooltipItem[0].index];
							}
						}
					},
					legend: {
						display: true
					},
					scales: {
						xAxes: [{
							display: true,
							gridLines: {
								display: true
							},
							ticks: {
								minRotation: 90,
								maxRotation: 90,
								autoSkip: false,
								callback: function (value, index, values) {
									return value[0];
								}
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							},
							ticks: {
								min: 0,
								stepSize: 5
							}
						}]
					}
				}
			});
		}

		function drawPunkteSchnittChart(results) {
			var ds = [];
			var high = [];
			var low = [];
			var labels = [];

			results.forEach(function (row) {
				var total = 0;
				var count = 0;
				var h = 0;
				var l = 100;

				for (i = 0; i < 8; i++) {
					var p = row['ries' + (i + 1)];
					if (p > 0 || p === 0) {
						count++;
						total += p;
						h = Math.max(h, p);
						l = Math.min(l, p);
					}
				}

				if (count > 0) {
					ds.push(total / count);
					high.push(h);
					low.push(l);
					var hdate = row.datum.substr(8, 2) + '.' + row.datum.substr(5, 2) + '.' + row.datum.substr(0, 4);
					labels.push([hdate, row.art, row.gegner]);
				}
			})

			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'line',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: ds,
						label: 'Punktedurchschnitt',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'blue',
						lineTension: 0
					}, {
						data: high,
						label: 'Längster Streich',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'green',
						lineTension: 0,
						pointStyle: 'rect'
					}, {
						data: low,
						label: 'Kürzester Streich',
						fill: false,
						borderWidth: 1,
						pointRadius: 6,
						pointHoverRadius: 7,
						borderColor: 'red',
						lineTension: 0,
						pointStyle: 'triangle'
					}]
				},
				options: {
					tooltips: {
						callbacks: {
							title: function (tooltipItem, data) {
								return data.labels[tooltipItem[0].index];
							}
						}
					},
					legend: {
						display: true
					},
					scales: {
						xAxes: [{
							display: true,
							gridLines: {
								display: true
							},
							ticks: {
								minRotation: 90,
								maxRotation: 90,
								autoSkip: false,
								callback: function (value, index, values) {
									return value[0];
								}
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							},
							ticks: {
								min: 0,
								max: 30,
								stepSize: 5
							}
						}]
					}
				}
			});
		}

		function drawStreicheChart(results) {

			var data = [];
			var labels = [];
			var i, r;

			for (i = 0; i <= 30; i++) {
				data.push(0);
				labels.push(i);
			}

			for (i = 0; i < results.length; i++) {
				for (r = 1; r <= 8; r++) {
					var ries = results[i]['ries' + r];
					if (ries > 0 || ries === 0) {
						data[ries]++;
					}
				}
			}


			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'bar',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: data,
						backgroundColor: '#AAAAAA'
					}]
				},
				options: {
					legend: {
						display: false
					},
					scales: {
						xAxes: [{
							gridLines: {
								display: false
							},
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Anzahl'
							},
							ticks: {
								min: 0,
								suggestedMax: 30,
								stepSize: 5
							}
						}]
					}
				}
			});
		}

		function drawPunkteChart(results) {
			var data = [];
			var labels = [];

			results.forEach(function (row) {
				for (var i = 0; i < 8; i++) {
					var p = row['ries' + (i + 1)];
					if (p > 0 || p === 0) {
						data.push(p);
						var hdate = row.datum.substr(8, 2) + '.' + row.datum.substr(5, 2) + '.' + row.datum.substr(0, 4);
						labels.push([hdate, row.art, row.gegner, (i + 1) + '. Ries']);
					}
				}
			})

			var ctx = document.getElementById("chart").getContext("2d");
			if (this.myChart) {
				this.myChart.destroy();
			}
			this.myChart = new Chart(ctx, {
				type: 'line',
				width: 200,
				height: 200,
				data: {
					labels: labels,
					datasets: [{
						data: data,
						fill: false,
						pointRadius: 6,
						pointHoverRadius: 8,
						pointBackgroundColor: 'lightblue',
						showLine: false
					}]
				},
				options: {
					legend: {
						display: false
					},
					scales: {
						xAxes: [{
							display: false,
							gridLines: {
								display: false
							}
						}],
						yAxes: [{
							display: true,
							scaleLabel: {
								display: true,
								labelString: 'Punkte'
							},
							ticks: {
								min: 0,
								max: 30,
								stepSize: 5
							}
						}]
					}
				}
			});

		}

		function loadSpielerSelect(url, elementId, selectFirst, callback) {
			fetch(url)
				.then(function (response) {
					return response.json();
				})
				.then(function (objects) {
					var el = document.getElementById(elementId);

					objects.forEach(function (o) {
						var option = document.createElement("option");
						var jg = o.jahrgang;
						option.text = o.nachname + ' ' + o.vorname + (jg ? ', ' : '') + (jg ? jg : '');
						option.value = o.id;
						el.appendChild(option);
					});

					if (selectFirst) {
						el.selectedIndex = 0;
					}

					if (callback) {
						callback();
					}
				});
		}

		function getYearData() {
			allspieleloaded = false;
			var jahr = document.getElementById('hg_jahrSelect').value;
			fetch('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true')
				.then(function (response) { return response.json(); })
				.then(
				function (teams) {
					var pr = [];
					for (var t = 0; t < teams.length; t++) {
						var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/mannschaftsdurchschnitt/' + teams[t] + '?alle=1' + '&jahr=' + jahr;
						var pro = fetch(url).then(
							function (response) {
								return response.json();
							}
						).then(
							function (spiele) {
								Array.prototype.push.apply(allspiele, spiele);
							}
							);
						pr.push(pro);
					}
					return Promise.all(pr);
				}
				)
				.then(function () { allspieleloaded = true; getData(); })
		}

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var spielerId = document.getElementById('hg_spielerSelect').value;
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && spielerId && allspieleloaded) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spielerdurchschnitt/' + spielerId + '?alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					displayedResults = results;
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();

			//remove total rows
			var tfoot = document.getElementById('hg_data').getElementsByTagName('tfoot')[0];
			while (tfoot.firstChild) {
				tfoot.removeChild(tfoot.firstChild);
			}

			if (results.length === 0) {
				document.getElementById('hg_data').style.display = 'none';
				return;
			}
			document.getElementById('hg_data').style.display = '';

			var totalRies = [];
			var totalPunkte = 0;
			var totalStreiche = 0;
			var i;
			for (i = 0; i < 8; i++) {
				totalRies.push(0);
			}

			results.forEach(function (row) {
				if (row.punkte) {
					totalPunkte += row.punkte;
				}
				if (row.streiche) {
					totalStreiche += row.streiche;
				}
				if (row.schnitt) {
					row.schnitt = row.schnitt.toFixed(2);
				}
				if (row.schnittKumuliert) {
					row.schnittKumuliert = row.schnittKumuliert.toFixed(2);
				}
				row.datumDisplay = row.datum.substring(8, 10) + '.' + row.datum.substring(5, 7) + '.' + row.datum.substring(0, 4);
				for (i = 0; i < 8; i++) {
					if (row['ries' + (i + 1)]) {
						totalRies[i] += row['ries' + (i + 1)];
					}
				}
			});
			dataList.add(results);
			dataList.sort('datum', { order: "asc" });

			var totalRow = document.getElementById('hg_total_tr').cloneNode(true);
			for (i = 0; i < 8; i++) {
				if (totalRies[i] > 0) {
					totalRow.querySelector(".total_ries" + (i + 1)).textContent = totalRies[i];
				}
			}
			totalRow.querySelector(".total_punkte").textContent = totalPunkte;
			totalRow.querySelector(".total_streiche").textContent = totalStreiche;

			if (totalPunkte && totalStreiche) {
				var schnitt = (totalPunkte / totalStreiche).toFixed(2);
				totalRow.querySelector(".total_schnitt").textContent = schnitt;
			}

			tfoot.appendChild(totalRow);
		}

	})();

</script>

Streich- und Durchschnittsübersicht eines Spielers mit der Möglichkeit zur Anzeige verschiedener grafischen Darstellungen

Spielerdurchschnitt mit Foto
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	body,
	#hg_jahrSelect,
	#hg_teamSelect,
	#hg_alle {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	#hg_jahrSelect,
	#hg_alle,
	#hg_alle input {
		vertical-align: top;
	}

	.rowSpieler h6 {
		font-size: 18px;
		margin-top: 2px;
		margin-left: 10px;
		margin-bottom: 0px;
		margin-right: 0px;
	}

	.rowSpieler h6 .jahrgang {
		font-size: 14px;
	}

	.rowSpieler {
		margin-top: 10px;
		margin-left: 5px;
		padding-bottom: 10px;
		display: flex;
		flex-direction: row;
		border-bottom: 1px dashed #ccc;
	}

	.rowSpieler img {
		align-self: flex-end;
		width: 100px;
	}

	.rowSpieler .info {
		align-self: flex-start;
	}

	.info .detail {
		font-size: 14px;
		display: flex;
		margin-top: 8px;
		margin-left: 10px;
	}

	.info .col {
		margin-right: 40px;
	}

	.coldetail {
		display: inline-block;
		color: #777;
		width: 110px;
	}
</style>

<select id="hg_teamSelect" size="3" multiple></select>
<select id="hg_jahrSelect"></select>
<span id="hg_alle">
	<input type="radio" name="alle" value="1" checked>Alle Spiele
	<input type="radio" name="alle" value="0">Nur Meisterschaft
</span>

<div id="spielerListe">
	<div class="list"></div>
</div>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/spiele/jahre', 'hg_jahrSelect', true, getData);
		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=true', 'hg_teamSelect', true, getData);

		var template = [];
		template.push('<div class="rowSpieler">');
		template.push(' <img class="foto" src="">');
		template.push(' <div class="info">');
		template.push('   <h6><span class="nachname"></span>&nbsp;<span class="vorname"></span>&nbsp;<span class="jahrgang"></span></h6>');
		template.push('   <div class="detail">');
		template.push('     <div class="col">');
		template.push('        <span class="coldetail" style="width: 55px;">Punkte:</span><br><b class="punkte"></b>');		
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 55px;">Streiche:</span><br><b class="streiche"></b>');
		template.push('     </div>');
		template.push('     <div class="col">');
		template.push('        <span class="coldetail" style="width: 90px;">Durchschnitt:</span><br><b class="schnitt"></b>');
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 90px;">Vorjahr:</span><br><b class="schnittVorjahr"></b>');
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 90px;">Ver&auml;nderung:</span><br><b class="diff"></b>');
		template.push('     </div>');
		template.push('     <div class="col">');
		template.push('        <span class="coldetail" style="width: 110px;">Std. Abw.:</span><br><b class="stdAbw"></b>');
		template.push('        <br>');		
		template.push('        <span class="coldetail" style="width: 110px;">L&auml;ngster&nbsp;Streich:</span><br><b class="laengsterStreich"></b>');
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 110px;">K&uuml;rzester&nbsp;Streich:</span><br><b class="kuerzesterStreich"></b>');
		template.push('     </div>');
		template.push('     <div class="col">');
		template.push('        <span class="coldetail" style="width: 170px;">H&ouml;chster&nbsp;Spieldurchschnitt:</span><br><b class="hoechsterSpielSchnitt"></b>');
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 170px;">Tiefster&nbsp;Spieldurchschnitt:</span><br><b class="tiefsterSpielSchnitt"></b>');
		template.push('     </div>');
		template.push('     <div class="col">');
		template.push('        <span class="coldetail" style="width: 80px;">Rangpunkte:</span><br><b class="rangpunkte"></b>');
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 80px;">Vorjahr:</span><br><b class="rangpunkteVorjahr"></b>');
		template.push('     </div>');
		template.push('   </div>');
		template.push(' </div>');
		template.push('</div>');
		var options = {
			valueNames: ['nachname', 'vorname', 'jahrgang', 'punkte', 'streiche',
				'schnitt', 'schnittVorjahr', 'diff', 'laengsterStreich', 'kuerzesterStreich',
				'hoechsterSpielSchnitt', 'tiefsterSpielSchnitt', 'stdAbw',
				'rangpunkte', 'rangpunkteVorjahr',
				{ attr: 'src', name: 'foto' }],
			item: template.join('')
		};

		var dataList = new List('spielerListe', options);

		document.getElementById('hg_jahrSelect').addEventListener("change", getData);
		document.getElementById('hg_teamSelect').addEventListener("change", getData);
		var allRadios = document.getElementById('hg_alle').querySelectorAll("input");

		allRadios[0].addEventListener("change", getData);
		allRadios[1].addEventListener("change", getData);

		function getData() {
			var jahr = document.getElementById('hg_jahrSelect').value;
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});
			var alle = document.querySelector('#hg_alle input[name="alle"]:checked').value;

			if (jahr && teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/durchschnitt/' + teams.join(',') + '?inklFoto=true&alle=' + alle + '&jahr=' + jahr;
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();
			if (results.length === 0) {
				document.getElementById('spielerListe').style.display = 'none';
				return;
			}
			document.getElementById('spielerListe').style.display = '';

			results.forEach(function (row) {
				if (row.foto) {
					row.foto = 'https://www.hgverwaltung.ch/api/1/' + club + '/spielerfoto/' + row.foto;
				}
				else {
					row.foto = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
				}

				if (row.jahrgang) {
					row.jahrgang = '(' + row.jahrgang + ')';
				}

				if (row.schnitt && row.schnittVorjahr) {
					row.diff = (parseFloat(row.schnitt) - parseFloat(row.schnittVorjahr)).toFixed(2);
				}

				if (row.schnitt) {
					row.schnitt = row.schnitt.toFixed(2);
				}

				if (row.schnittVorjahr) {
					row.schnittVorjahr = row.schnittVorjahr.toFixed(2);
				}

				if (row.stdAbw) {
					row.stdAbw = row.stdAbw.toFixed(3);
				}				

				if (row.hoechsterSpielSchnitt) {
					row.hoechsterSpielSchnitt = row.hoechsterSpielSchnitt.toFixed(2);
				}

				if (row.tiefsterSpielSchnitt) {
					row.tiefsterSpielSchnitt = row.tiefsterSpielSchnitt.toFixed(2);
				}
			});

			dataList.add(results);
			//sortierung nach schnitt
			dataList.sort('schnitt', { order: "desc" });
		}

	})();

</script>

Anzeige der Spieler je Mannschaft mit Foto und diversen Daten aus dem Durchschnitt

Spieler mit Foto
<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
<script src="https://hgverwaltung.ch/static/list-1.5.min.js"></script>
<script src="https://hgverwaltung.ch/static/hgutil-1.1.js"></script>

<style>
	body,
	#hg_teamSelect {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	.rowSpieler h6 {
		font-size: 18px;
		margin-top: 2px;
		margin-left: 10px;
		margin-bottom: 0px;
		margin-right: 0px;
	}

	.rowSpieler h6 .jahrgang {
		font-size: 14px;
	}

	.rowSpieler {
		margin-top: 10px;
		margin-left: 5px;
		padding-bottom: 10px;
		display: flex;
		flex-direction: row;
		border-bottom: 1px dashed #ccc;
	}

	.rowSpieler img {
		align-self: flex-end;
		width: 100px;
	}

	.rowSpieler .info {
		align-self: flex-start;
	}

	.info .detail {
		font-size: 14px;
		display: flex;
		margin-top: 8px;
		margin-left: 10px;
	}

	.info .col {
		margin-right: 50px;
	}

	.coldetail {
		display: inline-block;
		color: #777;
		width: 110px;
	}
</style>

<select id="hg_teamSelect"></select>

<div id="spielerListe">
	<div class="list"></div>
</div>

<script>
	(function () {
		var club = hgutil.getParameterByName('club');
		if (!club) {
			club = 'test';
		}

		hgutil.loadSelectFromArray('https://www.hgverwaltung.ch/api/1/' + club + '/mannschaften?spiele=null', 'hg_teamSelect', true, getData);

		var template = [];
		template.push('<div class="rowSpieler">');
		template.push(' <img class="foto" src="">');
		template.push(' <div class="info">');
		template.push('   <h6><span class="nachname"></span>&nbsp;<span class="vorname"></span>&nbsp;<span class="jahrgang"></span></h6>');
		template.push('   <div class="detail">');
		template.push('     <div class="col">');
		template.push('        <span class="coldetail" style="width: 200px;">Position:</span><br><b class="position"></b>');
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 200px;">Funktionen:</span><br><b class="funktionen"></b>');
		template.push('     </div>');
		template.push('     <div class="col">');
		template.push('        <span class="coldetail" style="width: 90px;">Ehrenmitglied:</span><br><b class="ehrenmitglied"></b>');
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 90px;">Vorstand:</span><br><b class="vorstand"></b>');
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 90px;">Schiedsrichter:</span><br><b class="schiedsrichter"></b>');
		template.push('     </div>');
		template.push('     <div class="col">');
		template.push('        <span class="coldetail" style="width: 90px;">Fremdspieler:</span><br><b class="fremdspieler"></b>');
		template.push('        <br>');
		template.push('        <span class="coldetail" style="width: 90px;">Aufgestellt:</span><br><b class="aufgestellt"></b>');
		template.push('     </div>');
		template.push('   </div>');
		template.push(' </div>');
		template.push('</div>');
		var options = {
			valueNames: ['nachname', 'vorname', 'jahrgang', 'position', 'funktionen',
				'ehrenmitglied', 'vorstand', 'schiedsrichter', 'fremdspieler', 'aufgestellt',
				{ attr: 'src', name: 'foto' }],
			item: template.join('')
		};

		var dataList = new List('spielerListe', options);

		document.getElementById('hg_teamSelect').addEventListener("change", getData);

		function getData() {
			var teams = Array.prototype.slice.call(document.querySelectorAll('#hg_teamSelect option:checked'), 0).map(function (v) {
				return v.value;
			});

			if (teams && teams.length > 0) {
				var url = 'https://www.hgverwaltung.ch/api/1/' + club + '/spieler?inklDetail=true&aufgestellteSpieler=false&mannschaft=' + teams.join(',');
				fetch(url).then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
				});
			}
			else {
				showData([]);
			}
		}

		function showData(results) {
			dataList.clear();
			if (results.length === 0) {
				document.getElementById('spielerListe').style.display = 'none';
				return;
			}
			document.getElementById('spielerListe').style.display = '';

			results.forEach(function (row) {
				if (row.funktionen) {
					row.funktionen = row.funktionen.replace(/, /g, '<br>');
				}
				
				if (row.foto) {
					row.foto = 'https://www.hgverwaltung.ch/api/1/' + club + '/spielerfoto/' + row.foto;
				}
				else {
					row.foto = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
				}

				if (row.jahrgang) {
					row.jahrgang = '(' + row.jahrgang + ')';
				}
				
				
				if (row.ehrenmitglied) {
					row.ehrenmitglied = 'JA';
				}

				if (row.vorstand) {
					row.vorstand = 'JA';
				}

				if (row.schiedsrichter) {
					row.schiedsrichter = 'JA';
				}

				if (row.fremdspieler) {
					row.fremdspieler = 'JA';
				}

				if (row.aufgestellt) {
					row.aufgestellt = 'JA';
				}
				
			});

			dataList.add(results);
			dataList.sort('nachname', { order: "asc" });
		}

	})();

</script>

Anzeige der Spieler je Mannschaft mit Foto, Name, Jahrgang, Position und Funktion

Karten

HTML-CodeBeschreibungBeispiel

Karte
<!DOCTYPE html>
<html style="height: 100%;">

<head>
	<title>Hornussen: Gesellschaften</title>
	<style>
		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqNmB0Mk6hOBCG1Lx2tmqVgKBUh3l-JFg&language=de"></script>
	<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch"></script>
	<script src="https://hgverwaltung.ch/static/lunr-2.3.4.js"></script>

	<script>
		(function () {
			var map;
			var locations = [];
			var index;
			var mapMarkers;
			var infoWindow = new google.maps.InfoWindow();
			function initialize() {
				var latLng = new google.maps.LatLng(46.8770593, 8.0429356);
				var mapOptions = {
					zoom: 8,
					center: latLng,
					mapTypeId: google.maps.MapTypeId.HYBRID
				};
				map = new google.maps.Map(document.getElementById('map'), mapOptions);
				var ligaSelection = document.getElementById('ligaSelection');
				ligaSelection.addEventListener('change', onLigaChange);

				var nameFilterInput = document.getElementById('nameFilterInput');
				nameFilterInput.addEventListener('keyup', onNameFilterInputChange);

				getLocations('alle').then(function (data) {
					index = lunr(function () {
						this.ref('id');
						this.field('ort');
						this.field('name');

						var i = 0;
						for (; i < data.length; i++) {
							locations[i] = data[i];
							data[i].id = i;
							this.add(data[i]);
						}
					});
				});
			}
			function onLigaChange(e) {
				document.getElementById('nameFilterInput').value = '';
				getLocations(e.target.value);
			}
			function debounce(func, interval) {
				var lastCall = -1;
				return function () {
					clearTimeout(lastCall);
					var args = arguments;
					var self = this;
					lastCall = setTimeout(function () {
						func.apply(self, args);
					}, interval);
				};
			}
			function onNameFilterInputChange(e) {
				document.getElementById('ligaSelection').value = 'alle';
				debounce(function () {
					if (!e.target.value) {
						showData(locations);
					}
					else {
						var matches = index.search(e.target.value + '*');
						var data = matches.map(function (r) {
							return locations[r.ref];
						});
						showData(data);
					}
				}, 200)();
			}
			function getLocations(liga) {
				return fetch("https://www.hgverwaltung.ch/api/1/clubs/locations/" + liga)
					.then(function (response) {
						return response.json();
					}).then(function (results) {
						showData(results);
						return results;
					});
			}
			function showData(data) {
				if (mapMarkers) {
					for (var i = 0; i < mapMarkers.length; i++) {
						mapMarkers[i].setMap(null);
					}
				}
				mapMarkers = [];
				var boundary = new google.maps.LatLngBounds();
				for (var i = 0; i < data.length; i++) {
					var markerLatLng = new google.maps.LatLng(data[i].lat, data[i].lng);
					boundary.extend(markerLatLng);
					var marker = new google.maps.Marker({
						map: map,
						info: data[i],
						title: data[i].name,
						position: markerLatLng
					});
					marker.addListener('click', function () {
						infoWindow.close();
						var info = '';
						var hp = this.info.homepage;
						if (hp) {
							if (!hp.startsWith('http')) {
								hp = 'http://' + hp;
							}
							info = '<a href="' + hp + '" target="_blank"><h3>' + this.info.name + '</h3></a>'
						} else {
							info = '<h3>' + this.info.name + '</h3>';
						}
						info += '<p>';
						info += '<a href="https://maps.google.com/?daddr=' + this.info.lat + ',' + this.info.lng + '" target="_blank">Google Routenplaner</a>';
						info += '</p>';
						infoWindow.setContent(info);
						infoWindow.open(map, this);
					});
					mapMarkers.push(marker);
				}
				map.fitBounds(boundary);
			}
			google.maps.event.addDomListener(window, 'load', initialize);

		})();
	</script>

</head>

<body style="height: 100%;">

	<select id="ligaSelection">
		<option value="alle">Alle</option>
		<option value="nla">NLA</option>
		<optgroup label="NLB">
			<option value="nlb1">Gruppe 1</option>
			<option value="nlb2">Gruppe 2</option>
		</optgroup>
		<optgroup label="1. Liga">
			<option value="1l1">Gruppe 1</option>
			<option value="1l2">Gruppe 2</option>
			<option value="1l3">Gruppe 3</option>
			<option value="1l4">Gruppe 4</option>
		</optgroup>
		<optgroup label="2. Liga">
			<option value="2l1">Gruppe 1</option>
			<option value="2l2">Gruppe 2</option>
			<option value="2l3">Gruppe 3</option>
			<option value="2l4">Gruppe 4</option>
		</optgroup>
		<optgroup label="3. Liga">
			<option value="3l1">Gruppe 1</option>
			<option value="3l2">Gruppe 2</option>
			<option value="3l3">Gruppe 3</option>
			<option value="3l4">Gruppe 4</option>
		</optgroup>
		<optgroup label="4. Liga">
			<option value="4l1">Gruppe 1</option>
			<option value="4l2">Gruppe 2</option>
			<option value="4l3">Gruppe 3</option>
			<option value="4l4">Gruppe 4</option>
		</optgroup>
		<optgroup label="5. Liga">
			<option value="5l1">Gruppe 1</option>
			<option value="5l2">Gruppe 2</option>
			<option value="5l3">Gruppe 3</option>
		</optgroup>
	</select>
	<input id="nameFilterInput" type="text" placeholder="Name" width="100">

	<div id="map" style="margin-top:10px; height: 100%;"></div>

</body>

</html>

Karte mit einer Übersicht aller Hornusserplätzen nach Meisterschaftsliga sortiert

Karte anderes Kartenmaterial
<!DOCTYPE html>
<html style="height: 100%;">

<head>
	<title>Hornussen: Gesellschaften</title>
	<style>
		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		}
	</style>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>
	<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
	<script src="https://hgverwaltung.ch/polyfill/v2/polyfill.min.js?features=fetch,String.prototype.startsWith"></script>
	<script src="https://hgverwaltung.ch/static/lunr-2.3.4.js"></script>
</head>

<body style="height: 100%;">

	<select id="ligaSelection">
		<option value="alle">Alle</option>
		<option value="nla">NLA</option>
		<optgroup label="NLB">
			<option value="nlb1">Gruppe 1</option>
			<option value="nlb2">Gruppe 2</option>
		</optgroup>
		<optgroup label="1. Liga">
			<option value="1l1">Gruppe 1</option>
			<option value="1l2">Gruppe 2</option>
			<option value="1l3">Gruppe 3</option>
			<option value="1l4">Gruppe 4</option>
		</optgroup>
		<optgroup label="2. Liga">
			<option value="2l1">Gruppe 1</option>
			<option value="2l2">Gruppe 2</option>
			<option value="2l3">Gruppe 3</option>
			<option value="2l4">Gruppe 4</option>
		</optgroup>
		<optgroup label="3. Liga">
			<option value="3l1">Gruppe 1</option>
			<option value="3l2">Gruppe 2</option>
			<option value="3l3">Gruppe 3</option>
			<option value="3l4">Gruppe 4</option>
		</optgroup>
		<optgroup label="4. Liga">
			<option value="4l1">Gruppe 1</option>
			<option value="4l2">Gruppe 2</option>
			<option value="4l3">Gruppe 3</option>
			<option value="4l4">Gruppe 4</option>
		</optgroup>
		<optgroup label="5. Liga">
			<option value="5l1">Gruppe 1</option>
			<option value="5l2">Gruppe 2</option>
			<option value="5l3">Gruppe 3</option>
		</optgroup>
	</select>
	<input id="nameFilterInput" type="text" placeholder="Name" width="100">

	<div id="mapid" style="margin-top:10px; height: 100%;"></div>

	<script>
		var map;
		var locations = [];
		var index;
		var markerGroup;
		function initialize() {
			map = L.map('mapid').setView([46.8770593, 8.0429356], 13);
			L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				maxZoom: 18
			}).addTo(map);

			var ligaSelection = document.getElementById('ligaSelection');
			ligaSelection.addEventListener('change', onLigaChange);

			var nameFilterInput = document.getElementById('nameFilterInput');
			nameFilterInput.addEventListener('keyup', onNameFilterInputChange);

			getLocations('alle').then(function (data) {
				index = lunr(function () {
					this.ref('id');
					this.field('ort');
					this.field('name');

					var i = 0;
					for (; i < data.length; i++) {
						locations[i] = data[i];
						data[i].id = i;
						this.add(data[i]);
					}
				});
			});
		}
		function onLigaChange(e) {
			document.getElementById('nameFilterInput').value = '';
			getLocations(e.target.value);
		}
		function debounce(func, interval) {
			var lastCall = -1;
			return function () {
				clearTimeout(lastCall);
				var args = arguments;
				var self = this;
				lastCall = setTimeout(function () {
					func.apply(self, args);
				}, interval);
			};
		}
		function onNameFilterInputChange(e) {
			document.getElementById('ligaSelection').value = 'alle';
			debounce(function () {
				if (!e.target.value) {
					showData(locations);
				}
				else {
					var matches = index.search(e.target.value + '*');
					var data = matches.map(function (r) {
						return locations[r.ref];
					});
					showData(data);
				}
			}, 200)();
		}
		function getLocations(liga) {
			return fetch("https://www.hgverwaltung.ch/api/1/clubs/locations/" + liga)
				.then(function (response) {
					return response.json();
				}).then(function (results) {
					showData(results);
					return results;
				});
		}
		function showData(data) {
			if (markerGroup) {
				markerGroup.removeFrom(map);
			}
			markerGroup = L.layerGroup(null).addTo(map);

			var positions = [];
			for (var i = 0; i < data.length; i++) {
				var info = '';
				var hp = data[i].homepage;
				if (hp) {
					if (!hp.startsWith('http')) {
						hp = 'http://' + hp;
					}
					info = '<a href="' + hp + '" target="_blank"><h3>' + data[i].name + '</h3></a>'
				} else {
					info = '<h3>' + data[i].name + '</h3>';
				}
				info += '<p>';
				info += '<a href="https://maps.google.com/?daddr=' + data[i].lat + ',' + data[i].lng + '" target="_blank">Google Routenplaner</a>';
				info += '</p>';
				L.marker([data[i].lat, data[i].lng]).bindPopup(info).addTo(markerGroup);
				positions.push([data[i].lat, data[i].lng]);
			}
			map.fitBounds(positions);
		}

		initialize();
	</script>

</body>

</html>

Karte mit einer Übersicht aller Hornusserplätzen nach Meisterschaftsliga sortiert, anderes Kartenmaterial

Karte mit Unterverbänden
<!DOCTYPE html>
<html style="height: 100%;">

<head>
	<title>Hornussen: Gesellschaften</title>
	<style>
		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqNmB0Mk6hOBCG1Lx2tmqVgKBUh3l-JFg&language=de"></script>
	<script>
		(function () {
			var map;
			var boundary = new google.maps.LatLngBounds();

			function initialize() {
				var latLng = new google.maps.LatLng(46.8770593, 8.0429356);
				var mapOptions = {
					zoom: 8,
					center: latLng,
					mapTypeId: google.maps.MapTypeId.HYBRID
				};
				map = new google.maps.Map(document.getElementById('map'), mapOptions);

				getLocations('EMHV', 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
				getLocations('MWHV', 'http://maps.google.com/mapfiles/ms/icons/red-dot.png');
				getLocations('OZHV', 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png');
				getLocations('NOHV', 'http://maps.google.com/mapfiles/ms/icons/green-dot.png');
			}

			function getLocations(verband, markerIcon) {
				var req = new XMLHttpRequest();
				req.onload = function (e) {
					var data = JSON.parse(req.response);

					for (var i = 0; i < data.length; i++) {
						var markerLatLng = new google.maps.LatLng(data[i].lat, data[i].lng);
						boundary.extend(markerLatLng);

						var marker = new google.maps.Marker({
							map: map,
							title: data[i].name,
							position: markerLatLng
						});
						marker.setIcon(markerIcon);
					}

					map.fitBounds(boundary);
				}
				req.open("GET", "//www.hgverwaltung.ch/api/1/verbaende/locations/" + verband);
				req.send();
			}

			google.maps.event.addDomListener(window, 'load', initialize);
		})();
	</script>

</head>

<body style="height: 100%;">
	<div id="map" style="height: 100%;"></div>
</body>

</html>

Karte mit einer Übersicht aller Hornusserplätzen nach Zweckverband

Einbindung in eure Vereinshomepage

Wenn ihr das gewünschte Beispiel ausgewählt habt, müsst ihr euch den entsprechenden Quellcode kopieren. Entweder markiert ihr den Code hier auf der Seite oder ruft ihn auf der Vorschau mittels rechter Maustaste auf. Wir empfehlen euch, nun diesen Quellcode in einen Editor wie z.B. Windows Editor oder Notepad einzufügen. Im html-Code müsst ihr dann folgenden Teil suchen:

   var club = hgutil.getParameterByName('club');

        if (!club) {
            club = 'test';

Die Variable Club = 'test' müsst ihr nun mit eurem Webcode ersetzen. Diesen findet ihr in der HGVerwaltung im Menüpunkt Club:

Normalerweise vergeben wir einen WebCode der ähnlich dem Gesellschaftsnamen ist. Auf Wunsch können wir auch einen nicht sprechenden WebCode aus einer Zahlen und Buchstabenkombination vergeben. Wenn dies gewünscht ist bitte beim Support melden.

Falls gewünscht, können am Code noch weitere Anpassungen vorgenommen werden, um diesen optimal an eure Vereinshomepage anzupassen. Der Code ist immer gleich aufgebaut:

Script = Stellt die Grundseite dar

CSS (Cascading Style Sheets) = Definiert die Formatierung

HTML = Darstellung der Seite

JavaScript = Funktionen für die Daten

Weiterhin habt ihr natürlich immer noch die Möglichkeit, euch den Code selber zusammenzustellen anhand unserer Codesammlung:

https://www.hgverwaltung.ch/swagger-ui.html#/

Den fertigen Code kopiert ihr nun wieder und fügt diesen in eine leere html-Seite in eurem CMS der Vereinshomepage ein. 



 

  • No labels