How to create Dynamic Kendo Donut Chart in ASP.net Part II.

After done Web Controller part. Let’s continue with the View part. There are 4 parts in creating dynamic Kendo Donut Chart.

1. Create a div to be donut template ground. You will get the ground like a picture below.

<div class="col-lg-12 col-md-7 col-sm-6 col-xs-6" id="donut-ground"></div>

2. Create donut content.You will get the donut contend like this. The content include each Score detail, and the total score in the middle of the donut.

<script id="donut-chart-template" type="text/x-kendo-template">
 <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
     <div class="panel panel-default">
          <div class="panel-heading"> </div>
          <div class="panel-body">
           //div for inner text, Reading Score, Writing Score,   //Speaking score.
          </div>
     </div>
 </div>
</script>

3.Get data from API using Ajax call and bind data in donut content. After get data success, the next step is coping a empty “donut-chart-template” then loop to assign data of each student to each donut and call Kendo drawing chart function to draw each donut.

function getDataAllChart() {
$.ajax({
url: "/DonutChart/GetDonutChart",
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { startDate: startDate, endDate: endDate},
beforeSend: function () {showGlobalLoadingProgress(true);},
success: function (data) {
    //clear all old div
    $("#donut-ground").empty();
    //copy this template
    var donutChartTemplate = $(".donut-chart-template").html();
    //loop for creating donut chart follow the amount of data
    for (var index = 0; index < data.length; index++) {
        //copy div
        var donut = $("#donut-chart-template").html();
        //assign id to div
        var content = $("<div id='" +   Data[index].Id + "'>");
        //add content that have the id into the div that you copied
        $("#donut-ground").append(content)
        $("#donut-ground").append(donutChartTemplate);
//bind data to each part in donut chart and call function to draw donut.
        createDonutChart(data[index].StudentId, data[index]);
        $("#" + data[index].StudentId + " .StudentId").attr('id', data[index].StudentId);
        $("#" + data[index].StudentId + " .reading").text(data[index].ReadingScore); 
        $("#" + data[index].StudentId + " .writing").text(data[index].WritingScore);  
        $("#" + data[index].StudentId + " .speaking").text(data[index].StudentId); 
        $("#" + data[index].StudentId+ " .title").text(data[index].Student);
        $("#" + data[index].StudentId+ " .innerText_donut-chart").text(data[index].TotalScore);  
  };      
},
error: openWindowAlertAjaxError,
complete: function () {showGlobalLoadingProgress(false);}
})
;}
}

4. Create function to draw Donut chart with data that you have assigned. Actually the Donut detail like category, value and color have to assign in this function, but we already done it on the View Model, so in this function just assign only series part.

function createDonutChart(chartName, donutData) {
       $("#" + chartName +" .donut-style-chart").kendoChart({
            legend: { visible: false },
            seriesDefaults: {  
                 type: "donut",
            },
            series: [{
                 holeSize: 70,
                 data: donutData.SeriesDonut
            }],
       });
       $("#innerText_donut-chart").text(donutData.TotalScore);
}

After you have done all steps, you will get a final result like this.