code sample below.
<
link
href
=
"/Content/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"/Content/kendo.dataviz.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"/Content/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"/Scripts/jquery-1.8.2.js"
></
script
>
<
script
src
=
"/Scripts/kendo.all.min.js"
></
script
>
<
script
src
=
"/Scripts/kendo.aspnetmvc.min.js"
></
script
>
<
div
id
=
"chart"
style
=
"width: 350px; height: 250px;"
></
div
>
<
script
type
=
"text/javascript"
>
var salesData = [{
DOB: new Date("2011/11/1"),
EmployeeID: 1,
sales1: 2000
}, {
DOB:new Date("2011/11/2"),
EmployeeID: 2,
sales1: 2250
}, {
DOB: new Date("2011/11/3"),
EmployeeID: 3,
sales1: 1550
}]
$(document).ready(function () {
$("#chart").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: {
data: salesData
},
series: [{
type: "column",
field: "sales1",
name: "Sales in Units"
}],
categoryAxis: {
field: "DOB"
},
tooltip: {
visible: true,
format: "{0}"
},
seriesClick: onSeriesClick
});
});
function onSeriesClick(e) {
//console.log(e);
alert("Employee ID is: " + e.dataItem.EmployeeID);
}
</
script
>
if I change the code to below it works
Note The data fields are changed to string
<
script
type
=
"text/javascript"
>
var salesData = [{
DOB: "2011/11/1",
EmployeeID: 1,
sales1: 2000
}, {
DOB:"2011/11/2",
EmployeeID: 2,
sales1: 2250
}, {
DOB: "2011/11/3",
EmployeeID: 3,
sales1: 1550
}]
$(document).ready(function () {
$("#chart").kendoChart({
title: {
text: "Employee Sales"
},
dataSource: {
data: salesData
},
series: [{
type: "column",
field: "sales1",
name: "Sales in Units"
}],
categoryAxis: {
field: "DOB"
},
tooltip: {
visible: true,
format: "{0}"
},
seriesClick: onSeriesClick
});
});
function onSeriesClick(e) {
//console.log(e);
alert("Employee ID is: " + e.dataItem.EmployeeID);
}
</
script
>