I'm a bit stumped as to what I may have missed in my code. I know that data is being returned from the web service, there are no errors setting the dataSource and the dataBound event fires, and yet I see no columns on the chart. If I hard code series data then it renders OK. Can anyone spot anything that's incorrect?
This is the Json data being returned ...
{
"d": [
{
"location": " Garden (AUS)",
"amount": "4661"
},
{
"location": "Suites ",
"amount": "1768"
},
{
"location": "Marriot",
"amount": "2292"
},
{
"location": "Santa Rosa",
"amount": "1616"
},
{
"location": "W",
"amount": "275"
}
]
}
This is the Json data being returned ...
{
"d": [
{
"location": " Garden (AUS)",
"amount": "4661"
},
{
"location": "Suites ",
"amount": "1768"
},
{
"location": "Marriot",
"amount": "2292"
},
{
"location": "Santa Rosa",
"amount": "1616"
},
{
"location": "W",
"amount": "275"
}
]
}
<script type="text/javascript"> $(document).ready(function () { setTimeout(function () { // Initialize the chart with a delay to make sure // the initial animation is visible createChart(); $("#example").bind("kendo:skinChange", function (e) { createChart(); }); }, 400); }); function createChart() { $("#chart").kendoChart({ theme: $(document).data("kendoSkin") || "black", dataSource: { schema: { data: "d", model: { fields: { location: { type: "string" }, amount: { type: "number" } } } }, transport: { read: { type: "POST", url: "../WebServices/DashboardService.asmx/YTDRevenueByLocation?format=json", contentType: "application/json; charset=utf-8", data: {}, dataType: "json" } }, error: function (e) { alert("Error fetching data from server"); }, change: function (e) { //alert(data); }, requestStart: function (e) { // alert("Request Start"); } }, title: { text: "YTD Revenue By Location" }, legend: { position: "bottom" }, seriesDefaults: { type: "column" }, series: [ { name: "Totals", field: "amount" } ], categoryAxis: { field: "location", labels: { rotation: -90 } }, valueAxis: { labels: { format: "${0}" }, majorUnit: 2000 }, tooltip: { visible: true, format: "${0}" }, dataBound: function onDataBound(e) { alert("Data is bound"); } }); } </script>