Chart renders blank

[Mark]

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

[Mark]

Apologies - I've resolved this myself now.  It turns out the partial rendering this content was being drawn incorrectly somewhere else (not visibly) on the page - so presumably all the selectors to actually render the chart only hit the first instance and therefore the second instance wasn't doing anything.

Cheers, Mark