Hi there,
I have a pie chart which has been working fine and now seems to be rendering blank everytime. I've tried to undo what code changes I've made but can't get it to render at all, and I have tried everything I can think of to get it rendering. It gets data from an MVC controller which is definitely returning data ok, and there is a databound event which is definitely getting called correctly. There are no console errors in the browser's debug tools either - so everything seems ok except it renders blank! Looking at the markup - the main wrapper div for the control is rendered but none of the content nested inside it. Please can you give me advice on how to go about debugging this. I've copied below the view code, the markup generated when run, and also some JS functions called.
=== VIEW ===
<td>
@( Html.Kendo().Chart<TEAMSPortalV2.Models.RecommendedActionPieChartModel>()
.Name("recommendedActionPie")
.ChartArea(chartArea => chartArea
.Background("#EFF7FB")
.Height(240)
.Width(240)
)
.Legend(legend => legend
.Visible(false)
)
.DataSource(ds =>
{
ds.Read(read => read.Action("RecommendedActionPieChart", "Reporting").Data("getAdditionalData"));
ds.Sort(sort => sort.Add(model => model.category).Ascending());
}
)
.Tooltip(tooltip => tooltip
.Visible(false)
)
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Bottom)
)
.Series(series => series
.Pie(model => model.Share, model => model.category, model => model.Color)
.Padding(0)
.Labels(labels => labels
.Visible(true)
.Template("#= value # (#= dataItem.PercentageField #)")
.Align(ChartPieLabelsAlign.Column)
.Position(ChartPieLabelsPosition.Center)
)
)
.Events(events => events
.DataBound("onDataBound_recommendedActionPie")
)
)
</td>
=== JS ====
// append JobID to controller call for getting rec action pie chart data
function getAdditionalData() {
var scheduler = $("#recommendedActionPie").data("kendoChart");
var tempJobID = @Model.JobID.ToString(); // for some reason you can't semm to do this in a single statement below :(
var result = {
JobID:tempJobID
}
return result;
}
// if no data found, display a no data message instead
function onDataBound_recommendedActionPie() {
//get the chart
var chart = $("#recommendedActionPie").data("kendoChart");
//check if the datasource is empty
if(chart.dataSource.data().length == 0) {
$('#recommendedActionPie').parent().html('No data available');
}
}
====RENDERED MARKUP FOR CHART====
<div class="k-chart" id="recommendedActionPie"></div>
<script>
jQuery(function(){jQuery("#recommendedActionPie2").kendoChart({"dataBound":onDataBound_recommendedActionPie,"chartArea":{"background":"#EFF7FB","height":240,"width":240},"legend":{"position":"bottom","visible":true},"series":[{"name":"Share","type":"pie","field":"Share","categoryField":"category","colorField":"Color","padding":0,"labels":{"template":"#= value # (#= dataItem.PercentageField #)","visible":true,"position":"center","align":"column"}}],"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Reporting/RecommendedActionPieChart","data":getAdditionalData,"type":"POST"},"prefix":""},"sort":[{"field":"category","dir":"asc"}],"schema":{"model":{"fields":{"Share":{"type":"number"},"VisibleInLegend":{"type":"boolean"},"Color":{"type":"string"},"category":{"type":"string"},"SortOrder":{"type":"number"},"PercentageField":{"type":"string"}}}}},"tooltip":{"visible":false}});});
</script>
Thanks, Mark