Vaughn Myers
Top achievements
Rank 1
Rank 1
Vaughn Myers
asked on 10 Jul 2013, 05:22 PM
I'm using the same code as the kendoui demo, but with a WCF service instead of JSON. But the data is not being displayed.
The method call is returning exactly the same data as [spain-electricity.json] used in your demo. In my case it's http://localhost:4916/Service1.svc/getList and it displays exactly the same thing in the browser.
My IService1 interface looks like this:
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
IList<myStruct> getList();
The method looks like this:
public IList<myStruct> getList()
{
IList<myStruct> StructSpain = new List<myStruct>();
StructSpain.Add(new myStruct
{
country = "Spain",
year = "2008",
unit = "GWh",
solar = 2578,
hydro = 26112,
wind = 32203,
nuclear = 58973
});
...
return StructSpain;
}
My html looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content absConf">
<div class="chart-wrapper" style="margin: auto;">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
type:"post",
url: "http://localhost:4916/Service1.svc/getList",
dataType: "json"
}
},
sort: {
field: "year",
dir: "asc"
}
},
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "area"
},
series: [{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
field: "year",
labels: {
rotation: -90
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 10000
},
tooltip: {
visible: true,
format: "N0"
}
});
}
$(document).ready(function() {
setTimeout(function() {
createChart();
// Initialize the chart with a delay to make sure
// the initial animation is visible
}, 400);
$(document).bind("kendo:skinChange", function(e) {
createChart();
});
});
</script>
</div>
</body>
</html>
The method call is returning exactly the same data as [spain-electricity.json] used in your demo. In my case it's http://localhost:4916/Service1.svc/getList and it displays exactly the same thing in the browser.
My IService1 interface looks like this:
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
IList<myStruct> getList();
The method looks like this:
public IList<myStruct> getList()
{
IList<myStruct> StructSpain = new List<myStruct>();
StructSpain.Add(new myStruct
{
country = "Spain",
year = "2008",
unit = "GWh",
solar = 2578,
hydro = 26112,
wind = 32203,
nuclear = 58973
});
...
return StructSpain;
}
My html looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content absConf">
<div class="chart-wrapper" style="margin: auto;">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
type:"post",
url: "http://localhost:4916/Service1.svc/getList",
dataType: "json"
}
},
sort: {
field: "year",
dir: "asc"
}
},
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "area"
},
series: [{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
field: "year",
labels: {
rotation: -90
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 10000
},
tooltip: {
visible: true,
format: "N0"
}
});
}
$(document).ready(function() {
setTimeout(function() {
createChart();
// Initialize the chart with a delay to make sure
// the initial animation is visible
}, 400);
$(document).bind("kendo:skinChange", function(e) {
createChart();
});
});
</script>
</div>
</body>
</html>