Simple Donut-Grafik mit HTML5
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.mobile.min.css" />
<!-- Nutzen Sie ihre präferierten JS-Bibliotheken / Ich bevorzuge Telerik Kendo UI -->
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
var cedata = #FREQU; // Der CorpusExplorer wird anstelle des FREQU-Tags ein JSON-Array einfügen.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Artikel im Korpus" // Titel der Grafik
},
legend: {
position: "bottom"
},
dataSource: {
data: cedata,
filter: [ // Der Filter reduziert die Daten. Finden Sie einen Weg die Datenmenge möglichst frühzeitig zu reduzieren.
{ field: "Lemma", operator: "eq", value: "die" },
]
},
series: [{
type: "donut",
field: "Frequenz", // Angaben welche Werte relevant sind
categoryField: "Wort", // Angaben welche Bezeichnung genutzt werden soll.
explodeField: "explode"
}],
seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
