Kendo UI TabStrip selection
by whoamiwho
HTML
<base href="http://demos.telerik.com/kendo-ui/dataviz/line-charts/notes.html">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2013.2.918/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
CSS
.notesLink {
font-weight:800;
text-decoration:underline;
cursor: pointer;
}
JavaScript
var grandSlam = [{
"year": "2003",
"win": 13,
"extremum": "MIN: 13",
"loss": 3
},{
"year": "2004",
"win": 22,
"loss": 1
},{
"year": "2005",
"win": 24,
"loss": 2
},{
"year": "2006",
"win": 27,
"extremum": "MAX: 27",
"loss": 1
},{
"year": "2007",
"win": 26,
"loss": 1
},{
"year": "2008",
"win": 24,
"loss": 3
},{
"year": "2009",
"win": 26,
"loss": 2
},{
"year": "2010",
"win": 20,
"loss": 3
},{
"year": "2011",
"win": 20,
"loss": 4
},{
"year": "2012",
"win": 19,
"loss": 3
}];
function createChart() {
$("#chart").kendoChart({
dataSource: {
data: grandSlam
},
title: {
text: "Roger Federer Grand Slam tournament performance"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "line"
},
series: [{
field: "win",
name: "Wins",
noteTextField: "extremum",
notes: {
label: {
position: "outside",
template: kendo.template('<a class="notesLink" href="http://bing.com">Link</a>')
},
position: "bottom"
}
},{
field: "loss",
name: "Losses"
}],
valueAxis: {
...