Chart Test
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id='chart'></div>
JavaScript
var chartData = {
Target: 23,
Series1: [{
Date: new Date('1/1/2012'),
Value: 20},
{
Date: new Date('2/1/2012'),
Value: 24},
{
Date: new Date('8/1/2012'),
Value: 22}],
Series2: [{
Date: new Date('2/1/2012'),
Value: 20},
{
Date: new Date('8/1/2012'),
Value: 23}],
PlotLineHack: [{
Date: new Date('1/1/2012'),
Value: 22},
{
Date: new Date('8/1/2012'),
Value: 22}]
};
$.ajax({
url: "/echo/json/",
//using jsfiddle echo service to simulate JSON endpoint
dataType: "json",
type: "POST",
data: {
// /echo/json/ echoes the JSON which you pass as an argument
json: JSON.stringify({
d: chartData
})
},
success: function(results) {
var data = results.d;
var chart = $('#chart');
chart.kendoChart({
series: [{
data: data.Series1,
field: "Value",
type: "area",
missingValues: "interpolate"},
{
data: data.Series2,
field: "Value",
type: "area",
missingValues: "interpolate"},
{
data: data.PlotLineHack,
field: "Value",
type: "line",
markers: false}],
categoryAxis: {
field: "Date"
},
markers: {
visible: true
},
tooltip: {
visible: false,
template: "#= kendo.stringify(dataItem) #"
},
seriesHover: seriesHover
});
}
});
function seriesHover(e) {
debugger;
}