Pie Chart is not displaying

[Bulut]

Hi, 

I tried to create a pie chart. I did my own filtering from controller. So far I am not having any script errors but my chart is not displaying at all. When I put a break point on script I can see the data is coming correctly as array. Couldn't figure out why it is not displaying.

So far my data response is as follow;

{"Data":[{"AisStateType":"Under Way Using Engine","TotalDistance":9806.0141499469737,"DistancePercentage":100.0,"TotalTime":1536.0666666666666,"TimePercentage":100.0,"Id":1,"Form":null,"CustomProperties":{}},{"AisStateType":"At Anchor","TotalDistance":0.0,"DistancePercentage":0.0,"TotalTime":0.0,"TimePercentage":0.0,"Id":2,"Form":null,"CustomProperties":{}},{"AisStateType":"Not Under Command","TotalDistance":0.0,"DistancePercentage":0.0,"TotalTime":0.0,"TimePercentage":0.0,"Id":3,"Form":null,"CustomProperties":{}},{"AisStateType":"Restricted Maneuverability","TotalDistance":0.0,"DistancePercentage":0.0,"TotalTime":0.0,"TimePercentage":0.0,"Id":4,"Form":null,"CustomProperties":{}},{"AisStateType":"Constrained by Her Draught","TotalDistance":0.0,"DistancePercentage":0.0,"TotalTime":0.0,"TimePercentage":0.0,"Id":5,"Form":null,"CustomProperties":{}},{"AisStateType":"Moored","TotalDistance":0.0,"DistancePercentage":0.0,"TotalTime":0.0,"TimePercentage":0.0,"Id":6,"Form":null,"CustomProperties":{}},{"AisStateType":"Aground","TotalDistance":0.0,"DistancePercentage":0.0,"TotalTime":0.0,"TimePercentage":0.0,"Id":7,"Form":null,"CustomProperties":{}},{"AisStateType":"Engaged in Fishing","TotalDistance":0.0,"DistancePercentage":0.0,"TotalTime":0.0,"TimePercentage":0.0,"Id":8,"Form":null,"CustomProperties":{}},{"AisStateType":"Under Way Sailing","TotalDistance":0.0,"DistancePercentage":0.0,"TotalTime":0.0,"TimePercentage":0.0,"Id":9,"Form":null,"CustomProperties":{}},{"AisStateType":"Reserved for future amendment of navigational status for ships carrying DG, HS, or MP, or IMO hazard or pollutant category C","TotalDistance":0.0,"DistancePercentage":0.0,"TotalTime":0.0,"TimePercentage":0.0,"Id":10,"Form":null,"CustomProperties":{}}],"Total":10,"ExtraData":null,"Errors":null,"Form":null,"CustomProperties":{}}

 

and my cshtml is;

<div id="piechart"></div>
        <script>
            function createChart() {
                $("#piechart").kendoChart({
                    dataSource: {
                        type: "json",
                        transport: {
                            read: {
                                url: "@Html.Raw(Url.Action("AisReportList", "AisTrackingAdmin"))",
                                type: "POST",
                                dataType: "json",
                                data: additionalData
                            }
                        },
                        schema: {
                            data: function (response) {
                                return response.Data; // twitter's response is { "statuses": [ /* results */ ] }
                            }

                        },
                        requestEnd: function (e) {
                            if (e.type == "update") {
                                this.read();
                            }
                        },
                        error: function (e) {
                            display_kendoui_chart_error(e);
                            // Cancel the changes
                            this.cancelChanges();
                        }
                    },
                    title: {
                        position: "bottom",
                        text: "Ais Data Report for @Model.ShipName, @Model.StartDate - @Model.EndDate"
                    },
                    legend: {
                        visible: false
                    },
                    chartArea: {
                        background: ""
                    },
                    seriesDefaults: {
                        labels: {
                            visible: true,
                            background: "transparent",
                            template: "#= AisStateType #: \n #= DistancePercentage#%"
                        }
                    },
                    series: [{
                        type: "pie",
                        startAngle: 150,
                        field: "AisStateType",
                        categoryField: "DistancePercentage"
                    }],
                    tooltip: {
                        visible: true,
                        format: "{0}%"
                    }
                });
            }

            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
        </script>
    </div>

<script>
        $(document).ready(function () {
            //search button
            $('#search-aisdata').click(function () {
                //search
                $("#piechart").data("kendoChart").dataSource.read();
                $("#piechart").data("kendoChart").redraw();
                return false;
            });

            $("#@Html.IdFor(model => model.AisReportSearchModel.SearchDestination)").keydown(function (event) {
                if (event.keyCode === 13) {
                    $("#search-aisdata").click();
                    return false;
                }
            });

        });

        function additionalData() {
            var data = {
                ShipId: $("#@Html.IdFor(model => model.AisReportSearchModel.ShipId) option:selected").val(),
                SearchDestination: $('#@Html.IdFor(model => model.AisReportSearchModel.SearchDestination)').val(),
                SearchStartDate: $('#@Html.IdFor(model => model.AisReportSearchModel.SearchStartDate)').val(),
                SearchEndDate: $('#@Html.IdFor(model => model.AisReportSearchModel.SearchEndDate)').val()
            };
            addAntiForgeryToken(data);
            return data;
        }
</script>

[Bulut]

I just changed the array  structure and it works fine.