This is a migrated thread and some comments may be shown as answers.

Chart renders blank

1 Answer 154 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 01 Sep 2015, 02:55 PM

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

1 Answer, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 02 Sep 2015, 12:10 PM

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

Tags
Charts
Asked by
Mark
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Share this question
or