put values in pie chart

[Miranda Johnson]

How do I put the value for the number into a pie chart?

here is the controller code

RadioButtonAnswers rba = new RadioButtonAnswers();

rba.SurveyNumber = SurveyNumber;

rba.GroupNumber = 10;

List<GetRadioAnswerOccurances_Result> IdeasRadio = rba.RadioAnswers();

ViewBag.PieIdeas = IdeasRadio;

comments.GroupNumber = 10;

comments.SurveyNumber = SurveyNumber;

Here is the code for my my view

<div class="row">

    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">

        @(Html.EJ().Chart("PieChartContainer1")

              .CommonSeriesOptions(cr => cr.Type(SeriesType.Pie))

              .Series(sr =>

              {

                  sr.Explode(true)

                  

                  .XName("ResponseText")

                  .Marker(mr => mr.DataLabel(dl => dl.Visible(true)

                        .TextMappingName("ResponseText")

                        .Font(fn => fn.Color("black"))

                        )

                    )

                  .YName("NumOccurance")

                  .DataSource(ViewBag.PieIdeas)

                  .LabelPosition(ChartLabelPosition.OutsideExtended)

                  .EnableSmartLabels(true) 

                  .Add();

              })

             .Title(title => title.Text("How Ideas Get Shared"))

             .IsResponsive(true)

        )

    </div>

</div>

Attachment: webpagepiechart_f030b748.zip

[Dharanidharan Dharmasivam]

Hi Miranda, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. Your requirement can be achieved as a workaround using annotation feature in the load event of chart. In this event, got the data source and depends upon the length of the data source we have added annotation dynamically. Find the code snippet to achieve this requirement. 

ASP.NET MVC: 

@(Html.EJ().Chart("PieChartContainer1") 

  //... 

  .Load("chartLoad") 

) 

function chartLoad(sender) { 

        //Get the data source 

        var chartData = sender.model.series[0].dataSource; 

        for (var i = 0; i < chartData.length; i++) { 

            //Created div element dynamically 

            var divElement = document.createElement('div'); 

            divElement.id = 'annotation' + i; 

            divElement.style.display = "none"; 

            divElement.innerText = chartData[i].InstanceUsed 

            document.getElementsByTagName('body')[0].appendChild(divElement); 

            //Added annotation dynamically 

            sender.model.annotations[i] = {}; 

            sender.model.annotations[i].visible = true; 

            sender.model.annotations[i].content = 'annotation' + i; 

            sender.model.annotations[i].coordinateUnit = "points"; 

            sender.model.annotations[i].x = i; 

            sender.model.annotations[i].y = chartData[i].NumOccurance; 

        } 

    } 

You can add the required content form the data source as in the above highlighted code example. 

Screenshot: 

 

Sample for reference can be find from below link.
http://www.syncfusion.com/downloads/support/forum/132129/ze/chart642664589  

For more information on annotation, kindly find the help document. 

Thanks, 

Dharani. 

[Miranda Johnson]

Thank you    Upon inspection of your solution I saw that you were assigning an ID value to the divs  and realized that with multiple pie charts that I would need to name all of these id's differently  and would also need to have multiple javascript functions in order to have proper values in each section of the various pie charts.   So here is what I ended up doing.  Anyway it works   so thanks.  

1st pie chart  

@(Html.EJ().Chart("PieChartContainer1") 

  //... 

  .Load("chartLoad") 

)  

2nd and 3rd pie charts

@(Html.EJ().Chart("PieChartContainer2") 

  //... 

  .Load("chartLoad2") 

) 

@(Html.EJ().Chart("PieChartContainer3") 

  //... 

  .Load("chartLoad3") 

) 

javascript functions

function chartLoad(sender){

    var chartData = sender.model.series[0].dataSource; 

    for (var i = 0; i < chartData.length; i++) { 

        var divElement = document.createElement('div'); 

        divElement.id = 'annotation' + i; 

        divElement.style.display = "none"; 

        divElement.innerText = chartData[i].NumOccurance 

        document.getElementsByTagName('body')[0].appendChild(divElement); 

        //Added annotation dynamically 

        sender.model.annotations[i] = {}; 

        sender.model.annotations[i].visible = true; 

        sender.model.annotations[i].content = 'annotation' + i; 

        sender.model.annotations[i].coordinateUnit = "points"; 

        sender.model.annotations[i].x = i; 

        sender.model.annotations[i].y = chartData[i].NumOccurance; 

    }

}

function chartLoad2(sender){

    var chartData = sender.model.series[0].dataSource; 

    for (var i = 0; i < chartData.length; i++) { 

        var divElement = document.createElement('div'); 

        divElement.id = 'annotation2' + i; 

        divElement.style.display = "none"; 

        divElement.innerText = chartData[i].Instances 

        document.getElementsByTagName('body')[0].appendChild(divElement); 

        //Added annotation dynamically 

        sender.model.annotations[i] = {}; 

        sender.model.annotations[i].visible = true; 

        sender.model.annotations[i].content = 'annotation2' + i; 

        sender.model.annotations[i].coordinateUnit = "points"; 

        sender.model.annotations[i].x = i; 

        sender.model.annotations[i].y = chartData[i].NumOccurance; 

    }

}

function chartLoad3(sender){

    var chartData = sender.model.series[0].dataSource; 

    for (var i = 0; i < chartData.length; i++) { 

        var divElement = document.createElement('div'); 

        divElement.id = 'annotation3' + i; 

        divElement.style.display = "none"; 

        divElement.innerText = chartData[i].Instances 

        document.getElementsByTagName('body')[0].appendChild(divElement); 

        //Added annotation dynamically 

        sender.model.annotations[i] = {}; 

        sender.model.annotations[i].visible = true; 

        sender.model.annotations[i].content = 'annotation3' + i; 

        sender.model.annotations[i].coordinateUnit = "points"; 

        sender.model.annotations[i].x = i; 

        sender.model.annotations[i].y = chartData[i].NumOccurance; 

    }

}

[Dharanidharan Dharmasivam]

Hi Miranda, 

Thanks for the update. 

In case of having multiple charts, you no need to use different javascript function(load event) for adding annotation. Instead you can use the same function for all the chart, here you need to assign unique id to each annotation div element. To achieve this, you can assign the chart id to the annotation div element as highlighted in the below code snippet. 

@(Html.EJ().Chart("PieChartContainer1") 

//... 

.Load("chartLoad") 

) 

        @(Html.EJ().Chart("PieChartContainer2") 

//... 

.Load("chartLoad") 

) 

@(Html.EJ().Chart("PieChartContainer3") 

//... 

.Load("chartLoad") 

) 

 

 

function chartLoad(sender) { 

        var chartData = sender.model.series[0].dataSource; 

        for (var i = 0; i < chartData.length; i++) { 

            var divElement = document.createElement('div'); 

            divElement.id = 'annotation' + i + this._id; 

            divElement.style.display = "none"; 

            divElement.innerText = chartData[i].InstanceUsed 

            document.getElementsByTagName('body')[0].appendChild(divElement); 

            sender.model.annotations[i] = {}; 

            sender.model.annotations[i].visible = true; 

            sender.model.annotations[i].content = 'annotation' + i + this._id; 

            sender.model.annotations[i].coordinateUnit = "points"; 

            sender.model.annotations[i].x = i; 

            sender.model.annotations[i].y = chartData[i].NumOccurance; 

        } 

    } 

Sample for reference can be find form below link. 

http://www.syncfusion.com/downloads/support/forum/132129/ze/chart-1377836061  

 

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani.